LabeledList React-only

Open in Storybook Open in Figma

Use LabeledList to show label/value pairs of information.

Without separators

Use non-separated LabeledList in situations where they would introduce too much visual noise.

Striped variant

Use LabeledList with stripes in situations where there are more than 3 items expected to appear in the list for improved readability.

Compact variant

Use a compact LabeledList in situations where screen real estate is precious.

Zigzag variant

Use a zigzag LabeledList to achieve a 2-column layout.