Section
@stellaria/nebula-webSectionPropsPreview
Props
22| Prop | Type | Default |
|---|---|---|
actions | ReactNode | — |
align `"center"` centres eyebrow, title and description over the rail and moves `actions` and `aside` under them; `"start"` is the header row as it always was. | SectionAlign | "start" |
aria-label Only used when there is no `title` and no `Section.Title`: the title, when present, names the region. | string | — |
aside What sits beside the actions on the header row, to their left. Equivalent to `Section.Aside`. | ReactNode | — |
children The body. A `Section.Header` among the children replaces the header built from `title`, `description`, `aside` and `actions`; a `Section.Footer` replaces `footer` (ADR-111). | ReactNode | — |
className | string | — |
contentWidth Maximum width of the inner rail; the band still spans the full width. | Unit | 1180 |
description | ReactNode | — |
divided A rule inside the rail, so it does not cross the band from edge to edge of the screen. | boolean | false |
empty What renders in place of the content when `isEmpty`. Without `isEmpty` it never renders. | ReactNode | — |
error Replaces the content. A string is wrapped in an error `Alert` that announces itself. | ReactNode | — |
eyebrow The small label OVER the title — «Cómo funciona», «Planes» — that every landing band opens with (ADR-189). A string or a node becomes a `Section.Eyebrow`, a light `Badge`; an element is rendered as it comes. It sits outside the title, so the region's name stays the title alone. | ReactNode | — |
footer | ReactNode | — |
glass The glass band of ADR-082, the lowest step. Use it ALTERNATING sections: turning it on everywhere gives you a uniform background, which is the opposite of the effect. | boolean | false |
id | string | — |
isEmpty Turns on the `empty` branch. `error` wins over it: with an error, the empty state does not render. | boolean | false |
loading Lays the loading veil over the content WITHOUT removing it, so the page does not jump when it ends. | boolean | false |
order Heading level of the title, 2 to 6. Structure, not size: the size is `fz`. | SectionOrder | 2 |
reveal Animates the band in when it first scrolls into view. `true` takes the catalogue entrance — `slide-up` over 24 px on the `gentle` spring — and an object tunes it. It takes an object rather than a sibling `revealProps` for two reasons: it is the same shape `Box` accepts, so a band and a card are configured alike; and a name ending in `Props` promises a slot that gets spread onto an element, which this is not — it is read by a hook. | boolean | SectionRevealProps | false |
revealTarget What actually moves when `reveal` is on. - `"surface"` animates the whole band, its background and its glass included, so the strip slides in as one piece. - `"content"` leaves the band where it is and lifts only the rail — the header, the body and the footer — into it. On a band with `glass` this is usually what you want: the band is the page's structure and the content is what should arrive. | SectionRevealTarget | "surface" |
size | SectionSize | "md" |
title Names the region through `aria-labelledby`, which is why it beats `aria-label`. Without it, and without a `Section.Title` among the children, the band falls back to `aria-label`. | ReactNode | — |
Slot props
1Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
eyebrowProps The badge the eyebrow is drawn with. Only rendered with `eyebrow` that is not an element. | BadgeProps | — |
Parts
9Section.ActionsSection.AsideSection.BodySection.DescriptionSection.EyebrowSection.FooterSection.HeaderSection.HeadingSection.TitleAlso accepts
On top of its own props, this component forwards these groups.