Spec List

Present short specification terms and values in a readable description list.

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

Usage

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

<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.

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

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.

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

API reference

PropType

itemsArray<{ term: string; value: string }>

Key/value rows, in order.

TypeArray<{ term: string; value: string }>

inline?boolean

Lay the pairs out side by side instead of stacked.

Typeboolean

Defaultfalse

class?string

Additional class on the outer element.

Typestring

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