BrandRibbon

Implemented

ADR-031 decorative 4-hue gradient strip (teal → indigo → amber → pink) — one of the three valid accent contexts. The bookend pattern: a 4px strip above the header and a matching strip at the top of the footer. Always aria-hidden + role=presentation; theme-stable (all four hues are non-swapping tokens).

Categoryatoms

Sourcecomponents/atoms/BrandRibbon/BrandRibbon.tsx

AI HintDecorative gradient bookend strip. Use above the header (full, flush, 4px) and at the top of the footer (contained, rounded, 4px + consumer margin).

ADR-031 decorative 4-hue gradient strip — the header/footer bookend ribbon. FR-CA : Ruban décoratif dégradé 4 teintes (bandeau du header/footer).

BrandRibbon

Display atom (Family 2 — Tier 1)

One of the three valid ADR-031 accent contexts. Purely decorative — always aria-hidden + role="presentation".

Header bookend — 4px, full, flush

Footer bookend — 4px, contained, rounded

Hairline — 1px

This component supports light and dark mode.

Usage

import { BrandRibbon } from '@epasslive/design-system'

// Header bookend — 4px, flush, edge-to-edge
<BrandRibbon thickness={4} width="full" rounded={false} />

// Footer bookend — 4px, contained, rounded (spacing via className)
<BrandRibbon width="contained" className="mb-8" />

Accessibility

Always aria-hidden + role="presentation" — purely decorative (ADR-031 §4.2).
Theme-stable — all four hues are non-swapping tokens, identical in light and dark.

Props

Prop

Type

Default

Description

thickness

1 | 4

4

4 = h-1 bookend strip (both current ribbons); 1 = h-px hairline.

width

'full' | 'contained'

full

full = w-full edge-to-edge (header); contained = mx-auto w-full max-w-6xl (footer frame).

rounded

boolean

true

rounded-full end caps; false for a flush top strip.

className

string

—

Extra utility classes appended after the recipe classes.

Props

Preview

BrandRibbon

Prop

Type

Required

Default

Description

thickness

1 | 4

Optional

4

4 renders h-1 (4px) — the value both current bookend ribbons use (header h-1 w-full, footer mx-auto mb-8 h-1 w-full max-w-6xl rounded-full). 1 renders h-px (1px hairline).

width

'full' | 'contained'

Optional

'full'

full = w-full edge-to-edge (header); contained = mx-auto w-full max-w-6xl (footer frame — outer margin belongs to the consumer).

rounded

boolean

Optional

True

rounded-ep-full end caps. Pass false for a flush full-width top strip.

className

string

Optional

—

Extra utility classes appended after the recipe classes.

Quick use:<BrandRibbon />

Accessibility

ARIA rolepresentation

Usage

Import

tsxSnippet

import { BrandRibbon } from "@epasslive/design-system"

Example 1

tsxSnippet

<BrandRibbon thickness={4} width="full" rounded={false} />

Example 2

tsxSnippet

<BrandRibbon width="contained" className="mb-8" />

Anti-patterns

— Do not wrap meaningful content or make the ribbon focusable — it is purely decorative

— Do not attach interactivity or tooltips to the ribbon