Skip to content
Data Display

Hero

server28 kB
@stellaria/nebula-webHeroProps

Preview

Preview

Props

21
PropTypeDefault

actions

ReactNode

—

align

"start" | "end" | "center" | "stretch""start"

bottom

Region below the body, across the rail. Equivalent to `Hero.Bottom`.

ReactNode

—

children

Lands IN THE MIDDLE of the body, between the description and the actions, not at the end. If the children include compound parts — `Hero.Header`, `Hero.Title`… — the body becomes entirely yours and the text props stop being mounted (ADR-111).

ReactNode

—

className

string

—

color

With `transparent` — the default — the band paints no background of its own and inherits the page.

ColorExtended"transparent"

contentWidth

Maximum width of the inner rail; the band still spans the full width.

Unit1400

description

ReactNode

—

hiper

The small label above the title — the announcement, the category. It sits on top of the whole text block.

ReactNode

—

id

string

—

image

Full-bleed background image. The text reads on its veil, not on the image: `overlayOpacity` grades it.

string

—

imageAlt

Empty leaves it decorative, which is right when the image adds nothing the text does not already say.

string""

left

Region to the left of the body. Equivalent to `Hero.Left`, which is how you reorder it.

ReactNode

—

order

Heading level of the title, 1 to 6. Structure, not size: the size comes from `size`.

HeroOrder1

overlayOpacity

Opacity of the veil over `image`. Without `image` there is no veil, so it has no effect.

number0.55

right

Region to the right of the body. Equivalent to `Hero.Right`.

ReactNode

—

size

HeroSize"lg"

style

CSSProperties

—

subtitle

ReactNode

—

title

Names the region through `aria-labelledby`. Without it, and without a `Hero.Title` among the children, the band never becomes a named landmark.

ReactNode

—

variant

HeroVariant"filled"

Slot props

10

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

actionsProps

HeroSlotProps

—

bodyProps

HeroSlotProps

—

bottomProps

HeroSlotProps

—

descriptionProps

HeroSlotProps

—

headerProps

HeroSlotProps

—

hiperProps

HeroSlotProps

—

leftProps

HeroSlotProps

—

rightProps

HeroSlotProps

—

subtitleProps

Omit<HeroSlotProps, "order">

—

titleProps

Omit<HeroSlotProps, "order">

—

Parts

9
Hero.ActionsHero.BottomHero.DescriptionHero.HeaderHero.HiperHero.LeftHero.RightHero.SubtitleHero.Title

Also accepts

On top of its own props, this component forwards these groups.

Style props · 122