Section
A full-bleed page band with generous vertical padding. Alternate default and tray sections to separate regions of a page by surface instead of borders.
<Section tone="tray" spacing="compact">
<Container>
<Heading level={2} size="h3">Pricing</Heading>
<Text tone="muted">One plan, billed monthly.</Text>
</Container>
</Section>Import
import { Section } from "@merid/react";Examples
Tones
default uses the page background; tray uses --mrd-tray for a recessed alternate band. Alternating the two is how a long page gets structure without dividers.
<Section spacing="compact">
<Container><Text>Default tone: the page background.</Text></Container>
</Section>
<Section tone="tray" spacing="compact">
<Container><Text>Tray tone: the recessed alternate band.</Text></Container>
</Section>Spacing
default padding is --mrd-section (112px, stepping down to 80px and 64px on smaller screens). compact halves it; none removes it when you need the band only for its background.
<Section tone="tray" spacing="compact">…</Section>
<Section spacing="none">…</Section>Cards on a tray section
A tray card would disappear on a tray section, so inside Section tone="tray" Merid flips tray cards to the surface colour. Use variant="elevated" for cards that should read as lifted.
<Section tone="tray">
<Container>
<Card variant="elevated">…</Card>
</Container>
</Section>API reference
Section renders a <section> by default, forwards its ref and passes other HTML attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "default" | "tray" | "default" | Background: page bg or the recessed tray. |
spacing | "default" | "compact" | "none" | "default" | Vertical padding: --mrd-section, half of it, or none. |
as | ElementType | "section" | Element or component to render instead. |
Styling
| Hook | Values |
|---|---|
.mrd-section | Root element |
data-tone | default · tray |
data-spacing | default · compact · none |
Padding comes from the global --mrd-section token; override it on the element to change the rhythm of one band.
.hero.mrd-section {
--mrd-section: 160px;
}Accessibility
- A
<section>is only exposed as a landmark when it has an accessible name. Give important bands anaria-labelledbypointing at their heading. - Use
as="div"for purely visual bands that do not start a new topic.
Guidelines
Do
Alternate default and tray sections to separate page regions.
Avoid
Stack two tray sections back to back, or add borders between sections.