Skip to content
Foundation / Layout

Section

client48.5 kB
@stellaria/nebula-webSectionProps

Preview

Props

19
PropTypeDefault

actions

ReactNode

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

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

Reveal on entering the viewport. Swaps the root element for the motion one, it does not add a node (see `Reveal.md`).

booleanfalse

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

Parts

8
Section.ActionsSection.AsideSection.BodySection.DescriptionSection.FooterSection.HeaderSection.HeadingSection.Title

Also accepts

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

Style props · 126