FairGarden Design

Spec List

A key-value list with dotted leaders: the label, a leader of true round dots, then the value right-aligned in tabular figures. Use it for prices, dimensions and printable forms.

import { SpecList, SpecListItem } from '@fairgarden-private/design/components/SpecList'

The leader stops 8 px short of each text and sits on the label's last baseline, so a long label wraps cleanly. A long value wraps too and stays right-aligned. The dots are an SVG mask over a 1 px rule, never a dotted border.

Leaders

Leaders

Below 320 px of the list's own width, the leader drops and each label stacks over its value. On a saturated ground, keep a list to six pairs.

Print, 8 × 10 in
$24.00
Print, 11 × 14 in
$38.00
Framed print, 16 × 20 in, oak frame with archival mat
$120.00
Shipping
Free over $50.00, otherwise $6.50
SpecListLeaders.tsx
import { SpecList, SpecListItem } from '@fairgarden-private/design/components/SpecList'

/** Label, dotted leader, value: prices and dimensions. */
export function SpecListLeaders() {
  return (
    <SpecList>
      <SpecListItem label="Print, 8 × 10 in">$24.00</SpecListItem>
      <SpecListItem label="Print, 11 × 14 in">$38.00</SpecListItem>
      <SpecListItem label="Framed print, 16 × 20 in, oak frame with archival mat">
        $120.00
      </SpecListItem>
      <SpecListItem label="Shipping">Free over $50.00, otherwise $6.50</SpecListItem>
    </SpecList>
  )
}

In print

Leaders print as 0.75 pt dots on a 2.25 pt pitch, and a label never splits from its value.

API Reference

SpecList

The leader list. Put SpecListItems inside; on a saturated ground keep it to 6 pairs.

PropTypeDescription
primary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| null
| undefined

Primary Radix scale: labels, leaders and values. Never defaulted; omitted, it inherits the scope [D133].

secondary
| 'ruby'
| 'olive'
| 'sage'
| 'slate'
| 'sand'
| 'gray'
| 'mauve'
| 'brown'
| 'bronze'
| 'gold'
| 'red'
| 'crimson'
| 'tomato'
| 'pink'
| 'plum'
| 'indigo'
| 'iris'
| 'violet'
| 'purple'
| 'amber'
| 'blue'
| 'cyan'
| 'grass'
| 'green'
| 'jade'
| 'lime'
| 'mint'
| 'orange'
| 'sky'
| 'teal'
| 'yellow'
| null
| undefined

Secondary Radix scale: unused. Never defaulted.

SpecListItem

One pair: “Label ········ Value”. The leader stops --size-px-2 short of each text and sits on the label’s last baseline; a long value wraps and stays right-aligned. A label never splits from its value in print.

PropTypeDescription
label
React.ReactNode

The caps label (type-label); author it in sentence case.

Additional types

specList
SpecListItemProps

Props for SpecListItem: div props and the label.

type SpecListItemProps = React.ClassAttributes<HTMLDivElement> &
  React.HTMLAttributes<HTMLDivElement> & { label: React.ReactNode }
SpecListProps

Props for SpecList: dl props and the color axes.

type SpecListProps = React.ClassAttributes<HTMLDListElement> &
  React.HTMLAttributes<HTMLDListElement> & {
    primary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | null;
    secondary?:
      | 'ruby'
      | 'olive'
      | 'sage'
      | 'slate'
      | 'sand'
      | 'gray'
      | 'mauve'
      | 'brown'
      | 'bronze'
      | 'gold'
      | 'red'
      | 'crimson'
      | 'tomato'
      | 'pink'
      | 'plum'
      | 'indigo'
      | 'iris'
      | 'violet'
      | 'purple'
      | 'amber'
      | 'blue'
      | 'cyan'
      | 'grass'
      | 'green'
      | 'jade'
      | 'lime'
      | 'mint'
      | 'orange'
      | 'sky'
      | 'teal'
      | 'yellow'
      | null;
  }

Specification: DESIGN-SYSTEM.md §8.3 (key-value and spec lists) and §12.7 (spec sheet).