Skip to content
Foundation / Layout

Section

server50.5 kB
@stellaria/nebula-webSectionProps

Preview

Props

22
PropTypeDefault

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.

Unit1180

description

ReactNode

—

divided

A rule inside the rail, so it does not cross the band from edge to edge of the screen.

booleanfalse

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.

booleanfalse

id

string

—

isEmpty

Turns on the `empty` branch. `error` wins over it: with an error, the empty state does not render.

booleanfalse

loading

Lays the loading veil over the content WITHOUT removing it, so the page does not jump when it ends.

booleanfalse

order

Heading level of the title, 2 to 6. Structure, not size: the size is `fz`.

SectionOrder2

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 | SectionRevealPropsfalse

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

1

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

PropTypeDefault

eyebrowProps

The badge the eyebrow is drawn with. Only rendered with `eyebrow` that is not an element.

BadgeProps

—

Parts

9
Section.ActionsSection.AsideSection.BodySection.DescriptionSection.EyebrowSection.FooterSection.HeaderSection.HeadingSection.Title

Also accepts

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

Style props · 125