Section
@stellaria/nebula-webSectionPropsPreview
Props
19| Prop | Type | Default |
|---|---|---|
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. | 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 | — |
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 Reveal on entering the viewport. Swaps the root element for the motion one, it does not add a node (see `Reveal.md`). | boolean | false |
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
8Section.ActionsSection.AsideSection.BodySection.DescriptionSection.FooterSection.HeaderSection.HeadingSection.TitleAlso accepts
On top of its own props, this component forwards these groups.