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 />
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.
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