Hero

Layer foreground content over an optional decorative visual. The element wraps the public Core CSS contract in Shadow DOM without taking ownership of application state.

Installation

npm install @duskmoon-dev/el-hero

Usage

import '@duskmoon-dev/el-hero/register';

<el-dm-hero align="start">
  <div slot="overlay" aria-hidden="true"></div>
  <div>
    <h2>See the signal.</h2>
    <p>Foreground content remains readable.</p>
  </div>
</el-dm-hero>

Live Demo

Hero

See the signal.

Foreground content remains readable.

Properties

Property	Type	Default	Description
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Logical content alignment

Slots

Slot	Description
Default	Foreground hero content
`overlay`	Decorative background or overlay

CSS Parts

Every structural wrapper is exposed with a matching CSS part name for targeted customization.