Data list | Sodium design system

Styles

When to use it

Use: The details of one pipeline, job, table or bucket: schedule, owner, region, last run.
Use: A key and value block beside a chart or at the top of a run.
Not for: Many things compared field by field; that is a table.
Not for: Two to six headline numbers. Use Status strip.
Not for: A list of things to open. Use Item.

6 rules

Never: Set a value in capitals or a label role; DataListValue keeps it as written in mono. Because values are copied and compared, and capitals change what an ID, a path or a region says.
Must: Pass prose for a value that is a sentence, such as a description. Because a sentence in mono reads slowly and wide, and Sodium sets every sentence in the sans.
Must: Pass an empty value through as null or ""; never a dash or "N/A". Because DataListValue writes None in text-3 for it, the same word everywhere, and a dash is read as "dash".
Never: Use variant="framed" inside a frame; use the default plain there. Because a frame inside a frame is the box in a box Sodium never draws.
Should: Write labels as one or two nouns in sentence case; the list sets the capitals.
Should: Put a Status or a Tag inside the value for a state, not a coloured word.

2 checks

4 edge cases

4 props

10 tokens