Sign in

Text groups

Compositions of multiple Text variants (plus a simple flat container) that read as one unit — a page header, a key-value pair, an example block, a code block. Each pattern bundles a specific ordering of roles with canonical spacing and semantics. You grab the pattern; the composition stays an implementation detail.

Four patterns live here today: SectionHead for page entries, CodeBlock for copyable code, KeyValue for metadata and prop tables, and List for canonical bullet / dash / numbered lists. Each one is canonical Text variants plus a simple flat container — nothing reaches into the typography primitives. (Demo used to live here too but graduated to a Component once it grew a header band with an action slot — see Components.)

SectionHead

The page-entry pattern. Every doc page, every section page, every detail page uses this composition: an optional gold eyebrow category label, a required title as an h1, and an optional lede paragraph below.

Live

Patterns

Section title here

A lede paragraph below the title — sets the stage for what follows.

tsx
<SectionHead eyebrow="Patterns" title="Text groups">
  A lede paragraph below the title.
</SectionHead>

CodeBlock

Copyable code block on a flat, solid surface — JetBrains Mono inside, a Copy button top-right. Optional language label, title (e.g. a file path), and a caption below. Companion to every component’s live example.

With header (language + title)
example.tsxtsx
function example() {
  return 'hello'
}
Without header (floating Copy)
pnpm install
With caption
css
.thing { color: var(--gold-aa-500); }
The container uses the same flat-surface vocabulary as Card.

KeyValue

Key-value pair display. Semantic <dl> / <dt> / <dd> wrapped in a grid so values column-align across rows. Replaces the ~15 places doc and product pages have hand-rolleddisplay: grid; gridTemplateColumns: auto 1fr. Two layouts — inline (default) and stacked.

inline (default) — values column-aligned across rows
Window opens
Aug 12, 2026
Lead auditor
R. Okafor
Last sync
12 min ago
stacked — for long values or values that want their own block
Description
A bi-temporal organization hierarchy with location graphs, memberships, collateral scoping, and transformation history.
Owner
Tyler Moore

Usage

tsx
<KeyValue>
  <KeyValue.Item label="Window opens">Aug 12, 2026</KeyValue.Item>
  <KeyValue.Item label="Lead auditor">R. Okafor</KeyValue.Item>
</KeyValue>

<KeyValue layout="stacked">
  <KeyValue.Item label="Description">{longText}</KeyValue.Item>
</KeyValue>

List

Canonical unordered (and numbered) list. Replaces the ~30 places doc pages have written <ul> with inline styles for spacing, indentation, and marker style. Three variants — bullet (default, gold-tinted dot), dash (em-dash, for continuation bullets), and numbered (for sequences).

bullet (default)
  • Don’t nest cards inside cards.
  • Don’t put user data in Card.Title — title is system voice.
  • Don’t skip the variant decision — reach for primary / secondary / tertiary deliberately.
dash — continuation bullets
  • Halo CCO substance-trust, not marketing experience-trust.
  • Calibrated for the user’s risk appetite.
  • Founding customers get a personalized rulebook review.
numbered — for ordered procedures
  1. Run pnpm install at the repo root.
  2. Copy .env.example to .env and fill in the Cognito values.
  3. Run pnpm dev to start the stack.

Usage

tsx
<List>
  <List.Item>First point.</List.Item>
  <List.Item>Second point.</List.Item>
</List>

<List variant="numbered">
  <List.Item>Install.</List.Item>
  <List.Item>Configure.</List.Item>
  <List.Item>Run.</List.Item>
</List>

Adding a new text-group pattern

Patterns here are built reactively as the design site asks for them. If you find yourself writing the same composition of Text variants three times, that’s the signal. Build it as a pattern in @halo-compliance/ui/patterns, add an H2 section here with demo + usage + at least one anti-pattern.

Future candidates that haven’t earned their place yet:

  • StatBlock — metric + label (gauge readouts, version build numbers, KPIs).
  • CardHead — h3 + caption description (card interiors not covered by Card.Title).
  • OriginTag — overline + content (“DESIGN SYSTEM” under the logo).
  • PropRow — promote the three-column “name · type · description” composition repeated across every component doc page.

Related

  • /text — the role layer all text-groups compose over.
  • /card — Card.Title and Card.Eyebrow are text-group compositions internal to Card.
  • /error-states — section-scope ErrorState uses CodeBlock-shaped content for its detail panel.