Hero
A landing-page hero band with a centered, max-width content rail: optional eyebrow, title, subtitle, actions, and a side media slot. Part of the Splash Kit.
When to Use
- The opening band of a marketing or landing page
- Product announcement headers with a primary call to action
- Split layouts pairing a headline with an illustration or screenshot
Build faster with Lumeo
A complete Blazor component library with theming, accessibility, and density built in.
New
Version 3.5 is here
Marketing blocks, density scopes, and a smaller bundle.
Everything you need to ship
Forms, overlays, data display, charts, and motion — all in one package.
See it in action
A two-column layout that collapses to a single column on small screens.
Ship with confidence
Use TitleSlot and SubtitleSlot for full control over markup.
API Reference
Hero
| Property | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | The headline text, rendered as an h1. |
| TitleSlot | RenderFragment? | — | Custom title markup, rendered after Title for full control. |
| Subtitle | string? | — | Supporting paragraph below the title. |
| SubtitleSlot | RenderFragment? | — | Custom subtitle markup, rendered after Subtitle. |
| Eyebrow | RenderFragment? | — | Small content (e.g. a badge) shown above the title. |
| Actions | RenderFragment? | — | Call-to-action buttons shown below the subtitle. |
| Media | RenderFragment? | — | Side illustration / screenshot. When set, the band becomes a two-column grid that collapses under lg:. |
| Alignment | Hero.HeroAlignment | Start | Content alignment: Start, Center, or End. |
| Class | string? | — | Additional CSS classes appended to the root section. |
Related Components
- Feature Grid — Pairs with Hero for the feature section of a landing page
- CTA Section — Closing call-to-action band
- Button — Used inside the Actions slot