Spec
A labeled specification list with optional accent styling on individual values.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphSpec } from '@fractaldesign/machines-ui';Preview
- Family
- Geist Mono
- Size
- 14 / 21
- Tracking
- +0.02em
- Figures
- tabular
- Accent
- --graph-accent
- Duo
- --graph-accent-2
- Tri
- --graph-accent-3
<GraphSpec
title="TYPE"
rows={[
{ label: 'Family', value: 'Geist Mono' },
{ label: 'Size', value: '14 / 21' },
{ label: 'Tracking', value: '+0.02em' },
{ label: 'Figures', value: 'tabular' },
{ label: 'Accent', value: '--graph-accent', accent: true },
{ label: 'Duo', value: '--graph-accent-2' },
{ label: 'Tri', value: '--graph-accent-3' }
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| rows* | SpecRow[] | — | Labeled values in display order, with an optional accent flag for each value. |
| corner | string | — | Character drawn at each corner of the frame. |
| class | string | '' |
API
- class forwarded to the outer element
- motion reveals on scroll into view
Types
| Name | Kind | Description |
|---|---|---|
| SpecRow | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-secondary
Related
Built from
src/lib/components/graphs/GraphSpec.svelte