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.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Hero />
4 tests across 1 file. Auto-generated from the test suite.
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.
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.
Right-aligned hero
Content, actions, and title all align to the end of the rail.
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
Setting Media switches the band to a two-column grid, with the text and media columns collapsing to a single column under the lg: breakpoint.
| Prop | Type | Default | Description |
|---|---|---|---|
| Title | string? | — | Plain-text headline, rendered as an h1 that also names the section landmark. Ignored (and the h1 omitted) when TitleSlot is used instead. |
| TitleSlot | RenderFragment? | — | Rich content slot for the headline, for when a plain-text Title isn't enough (e.g. inline styling, a gradient span). Rendered alongside Title if both are set. |
| Subtitle | string? | — | Plain-text supporting copy below the title. Ignored when SubtitleSlot is used instead. |
| SubtitleSlot | RenderFragment? | — | Rich content slot for the supporting copy, for when plain-text Subtitle isn't enough. |
| Eyebrow | RenderFragment? | — | Small chip/label rendered above the title (e.g. "New" or a category tag). |
| Actions | RenderFragment? | — | Call-to-action buttons/links rendered below the subtitle. |
| Media | RenderFragment? | — | Side illustration/media slot. When set, the hero switches to a two-column grid layout with the text on one side and this media on the other. |
| Alignment | HeroAlignment | HeroAlignment.Start | Horizontal alignment of the text column and its actions. Default: Start. |
| Class | string? | — | Additional CSS classes merged onto the root section. |
| AdditionalAttributes | Dictionary<string, object>? | — | Additional HTML attributes captured and forwarded 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