Panelcomponent

Full-width vertical region that paints the current surface colour. Use to break a page into stacked
sections. Has zero block-space (Panels butt against each other); set its vertical breathing room
with the padding variant (<Panel padding="large">, <Panel padding="xxlarge"> etc.).

Renders as a <section> by default; pass as="header" etc. for other semantic elements.

A full-width vertical region that paints the current surface colour. Use panels to break a page into stacked bands: each one butts against its neighbours (zero block margin) but carries generous vertical padding, so a page becomes a sequence of coloured sections.

Things to know:

• A panel always spans the full width of its container. To constrain the content inside, compose a <Block> width="narrow" (or width="wide") within it.
• Block margin is always zero so panels stack flush; control the vertical breathing room with the padding variant (<Panel padding="large">, <Panel padding="none">). Inline padding is fixed.
• color= / status= move the tint anchor for the whole panel scope, so the surface, border, and text re-derive together and cascade into nested content.
• The top and bottom borders are dropped on the first and last panel so the page doesn't gain stray edge lines.

Usage

Page banded into panels

import { Panel, Block, Title, Paragraph } from "shelving/ui";

<Panel as="header" color="primary">
  <Block width="narrow">
    <Title>Welcome</Title>
  </Block>
</Panel>
<Panel padding="large">
  <Block width="narrow">
    <Paragraph>Each panel is a full-width band; the inner block constrains the content.</Paragraph>
  </Block>
</Panel>

Styling

Panel paints from the tint ladder; rebind --panel-tint to recolour the whole scope at once, or reach for a per-property hook for a single change.

Global tokens it reads: the tint-ladder steps --tint-00 / --tint-80 / --tint-90, plus --stroke-normal. Vertical padding comes from the shared padding variant.