---
title: Spec List
description: Present short specification terms and values in a readable description list.
sidebar:
  order: 6
---

import previewCode from "../../snippets/spec-list.mdx?raw";
import example0 from "../../snippets/spec-list-inline.mdx?raw";

<ComponentPreview path="spec-list" code={previewCode} />

## Usage

Supply terms and values in the order readers should encounter them.

```mdx
<SpecList
  items={[
    { term: "Format", value: "SVG" },
    { term: "Use", value: "Digital artwork" },
  ]}
/>
```

Keep structured brand specifications in configuration and read them from
`props.brand` when they describe configured assets or tokens.

## Examples

### Keep longer values in stacked rows

The default layout keeps each term beside its value and stacks the pairs.
Use this for explanations that need more room than compact metadata.

<ComponentPreview path="spec-list" code={previewCode} />

### Place short specifications side by side

Use `inline` for a small set of compact values. Each term sits above its value.
This layout does not wrap or switch back to rows at smaller widths, so prefer
the stacked default for long values or many items.

<ComponentPreview path="spec-list-inline" code={example0} />

## API reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `items` | `Array<{ term: string; value: string }>` | - | Key/value rows, in order. |
| `inline?` | `boolean` | `false` | Lay the pairs out side by side instead of stacked. |
| `class?` | `string` | - | Additional class on the outer element. |

Each item has a `term` and a `value`, both strings. Values render as text rather
than markup. No content slot is rendered.