Panel

A band of colour that holds a section: a call to action, a promotion, a summary set apart from the page.

import { Panel } from '@zitdevs/ui';

Examples

On the primary field, as the design draws a call to action:

Ready to start your project?

Tell us what you want to launch, and we will come back with a practical next step.

Talk to us

<Panel aria-labelledby="cta-heading">
  <h2 id="cta-heading">Ready to start your project?</h2>
  <p>Tell us what you want to launch, and we will come back with a practical next step.</p>
  <Button label="Talk to us" variant="inverse" icon="arrow-right" />
</Panel>

Fields

The primary field

The panel sets the text colour its field needs.

The inverse field

The panel sets the text colour its field needs.

The surface field

The panel sets the text colour its field needs.

The raised field

The panel sets the text colour its field needs.

<Panel tone="inverse" padding="md">
  …
</Panel>

Props

Prop	Type	Default	Notes
tone	'primary' | 'inverse' | 'surface' | 'raised'	'primary'	The field (the vocabulary’s Fill), and the text colour on it.
padding	'none' | 'md' | 'lg'	'lg'	md the page gutter, 24px; lg 24px growing to 64px from page-md.
children	ReactNode	—	The section’s content.
ref	Ref<HTMLElement>	—	The <section>.
className	string	—	Placement.
anything else	<section> attributes	—	Such as aria-labelledby.

Exported types: PanelProps, PanelTone, PanelPadding.

Accessibility

• A <section>: a region landmark once it is named. Point aria-labelledby at its heading.
• It sets the text colour its field needs: on-primary on the primary field, on-inverse-quiet on the inverse one, body on the light ones — each 4.5:1 or more. Controls inside take their band variants (Button variant="inverse").
• It clips what bleeds off its edges, such as a motif.

Without JavaScript

A section; it needs none, and renders as a Server Component.

Theming

primary, surface-inverse, surface and surface-raised (the fields), on-primary, on-inverse-quiet and body (the text).

Use instead: the brand’s pattern or chevron on the field → PatternPanel.