Value Grid

Present brand values as large headings paired with concise explanations.

<ValueGrid
  items={[
    { title: "Clarity", body: "Make the important thing easy to find." },
    { title: "Care", body: "Consider the person using the work." },
  ]}
/>

Usage

Supply a title and plain-text explanation for each value. Values appear in the order you provide, with two-digit numbers beside their headings.

<ValueGrid
  items={[{ title: "Clarity", body: "Make the important thing easy to find." }]}
/>

Examples

Remove the visible numbering

The first preview uses numbered={true}. Set it to false to hide the superscript numbers when the values should read as a set of equal principles.

<ValueGrid
  numbered={false}
  items={[
    { title: "Clarity", body: "Make the important thing easy to find." },
    { title: "Care", body: "Consider the person using the work." },
  ]}
/>

Content and layout

body accepts plain text, not nested MDX. The component always uses an ordered list, even with visible numbering hidden. At 48rem and above, each heading and explanation sit side by side; below that width they stack.

API reference