Go to Content
Design System
Playroom Storybook
#ClimateEmergency

LabeledList React-only

Open in Storybook Open in Figma

Use LabeledList to show label/value pairs of information.

Don’t
  • Do not use different font sizes for values in a single list.

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Without separators

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Striped variant

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Compact variant

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Zigzag variant

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

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Edit page