Section
A band of a page: a `<section>` with vertical spacing, a surface and a Container, for heroes, feature lists and calls to action.Hero
Preview
Code
Who does what, where
One place for partners to report their activities, and for everyone to see the gaps.Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Heading, Section } from '@advui/core'
<Section spacing="lg" background="muted" container="lg" aria-labelledby="features-title" id="features">
<Heading id="features-title" level={2}>Features</Heading>
…
</Section>Examples
Features
A muted band with an anchor (`id="features"`) and spacing that grows from md.Preview
Code
Features
For every partnerClusters, agencies and NGOs report in one format.
Down to the townshipMap coverage and spot the places nobody reaches.
Private by defaultShare figures, not the people behind them.
Call to action
An inverse band (dark in light mode, light in dark mode) and a primary one.Preview
Code
Ready for the next round?
Reporting for October closes on the 10th.Get the monthly gaps report by email.
API reference
Section
A `<section>` on web and a View on iOS and Android. It passes `id`, `aria-label`, `aria-labelledby` and View style props through.| Prop | Type | Default | Description |
|---|---|---|---|
spacing | 'none' | 'sm' | 'md' | 'lg' | 'xl'or a breakpoint map | 'md' | Vertical padding, larger from md: `sm` 24 → 32px, `md` 48 → 64px, `lg` 64 → 96px, `xl` 96 → 128px. |
background | 'none' | 'background' | 'card' | 'muted' | 'primary' | 'primarySoft' | 'inverse' | 'none' | The surface. `primary` and `inverse` switch the content to the `primary` or `inverse` sub-theme, so text, muted text, cards and buttons stay readable in light and dark mode. |
container | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full' | 'xl' | Wraps the children in a Container of this size (centered, with side padding); `none` does not. |
id | string | — | For anchor links such as `#features`.Web only. |
aria-labelledby | string | — | The id of the section’s heading. Names it, which makes it a region landmark.Web only. |
aria-label | string | — | Names the section when it has no visible heading. |
sectionPadding(spacing)
The vertical padding of a spacing value or map, as style props with media props, for your own bands.Accessibility
- Renders
<section>on web. Give itaria-labelledby(its heading’s id) oraria-label: a named section is a region landmark that screen reader users can jump to; an unnamed one is not a landmark. - Keep one heading per section, at the level its place in the page outline calls for.
primaryandinversechange the text colors with the surface, so contrast stays at WCAG AA in both modes (checked by the theme tests).
Responsive behavior
Spacing grows at md for every step, and spacing also takes a map, such as { base: "sm", lg: "xl" }. Only the breakpoints where the padding changes are emitted, as CSS media queries on web.
Platform notes
Web
A
<section> element; id, aria-label and aria-labelledby pass through, so #features links jump to it.iOS
A View.
aria-label names it for VoiceOver; there is no landmark role.Android
A View.
aria-label names it for TalkBack; there is no landmark role.