PatternPanel

A panel drawn in the brand’s pattern: the primary field with the chevron bleeding off its right edge, or one of the pattern tiles.

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

Examples

The chevron

The default. Keep the copy clear of the motif’s right three eighths.

Software built to be handed over

Every project ships with its decisions written down.

See how we work

<PatternPanel aria-labelledby="handover-heading">
  <h2 id="handover-heading">Software built to be handed over</h2>
  <p>Every project ships with its decisions written down.</p>
  <Button label="See how we work" variant="inverse" icon="arrow-right" />
</PatternPanel>

The tiles

Under text, set it on a card, or lay the veil:

On a card

The card keeps the text off the marks.

Under a veil

The page colour at 72% over the pattern.

On the light marks

The veil keeps a busy pattern quiet.

<PatternPanel pattern="marks" size="md" padding="md">
  <Card>…</Card>
</PatternPanel>
<PatternPanel pattern="lines" veil padding="md">…</PatternPanel>
<PatternPanel pattern="marks-light" veil padding="md">…</PatternPanel>

The tiles alone, at the small size:

Props

Prop	Type	Default	Notes
pattern	'chevron' | 'lines' | 'marks' | 'marks-light'	'chevron'	marks-light tiles the page colour; the others the primary field.
size	'sm' | 'md' | 'lg'	'lg'	The tile: 160, 260 or 420px. The chevron takes the panel’s height.
veil	boolean	false	The page colour at 72% over the pattern; the text turns to ink.
padding	'none' | 'md' | 'lg'	'lg'	As Panel’s.
children	ReactNode	—	The content, above the pattern.
ref	Ref<HTMLElement>	—	The <section>.
className	string	—	Placement and size.
anything else	<section> attributes	—	Such as aria-labelledby.

Exported types: PatternPanelProps, PatternPanelPattern, PatternPanelSize.

Accessibility

• A <section>, a region once aria-labelledby names it. The pattern and the chevron are decoration, hidden from assistive technology.
• Text on the primary patterns is on-primary: 5.4:1 on the field, but about 3:1 where it crosses a line or a mark. Set text on a card there, or lay the veil, which turns the field light and the text to ink (12:1 or more). On marks-light the text is ink, which reaches 4.5:1 on the field and on every orange mark; a busy pattern under running text is still hard to read, so veil it or keep the text to a heading.
• On the chevron, keep the copy clear of the motif’s right three eighths, where it would sit on the lighter blue.

Without JavaScript

A section with a background; it needs none, and renders as a Server Component. The field colour under each tile paints before the image loads.

Theming

primary and surface (the fields), primary-inverse (the chevron), on-primary and ink (the text), --veil-light. The tiles are brand artwork in @zitdevs/tokens (--pattern-lines-blue, --pattern-marks-blue, --pattern-marks-cream, sized by --pattern-size-sm|md|lg): they keep their colours under any theme, and a product replaces them by overriding those variables.