# Hero

Source: https://lumeo.nativ.sh/components/hero

# 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

Preview Code

Basic Hero

# Build faster with Lumeo

A complete Blazor component library with theming, accessibility, and density built in.

Get started View components

Copy Code

Preview Code

With Eyebrow

New

# Version 3.5 is here

Marketing blocks, density scopes, and a smaller bundle.

Read the changelog

Copy Code

Preview Code

Centered Alignment

# Everything you need to ship

Forms, overlays, data display, charts, and motion — all in one package.

Install Docs

Copy Code

Preview Code

With Media

# See it in action

A two-column layout that collapses to a single column on small screens.

Try the playground

Copy Code

Preview Code

Custom Title Slot

# Ship with confidence

Use TitleSlot and SubtitleSlot for full control over markup.

Get started

Copy Code

## 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](/components/feature-grid) — Pairs with Hero for the feature section of a landing page
-   [CTA Section](/components/cta-section) — Closing call-to-action band
-   [Button](/components/button) — Used inside the Actions slot