Readout
A sentence-case metadata strip separated by middle dots.
<mm-readout label="Asset metadata" items="Table · 14 cols · 1.28M rows · Updated 04:12 UTC"></mm-readout>
Guidance
A readout is a strip of real metadata separated by middle dots, such as
"Table · Snowflake · 9 columns · 1.28M rows" under an asset name in a row, card, node or tile.
By default it is a sentence-case caption in mm-text-2 with tabular figures, in the text face.
Each value is real metadata; the middle dot is not read by assistive technology.
Write items in sentence case with everyday words and relative times ("9 columns", "Updated 5 hours ago"). There is no uppercase variant: the design system has no uppercase text.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
items | items | string[] | string | [] | The metadata values: an array as a property, or a ·-separated string as an attribute (items="Table · 14 cols · 1.28M rows"). |
label | label | string | '' | Names the strip for assistive technology, for example "Asset metadata". |
inline | inline | boolean | false | Sits inline with text instead of on its own line. |
Slots
| Slot | Description |
|---|---|
| Default | Plain readout text, used when items is empty. Use a middle dot only between real values. |
CSS parts
| Part | Description |
|---|---|
list | The list of items. |
item | Each item. |
Examples
Every state of mm-readout in Storybook, with keyboard and screen reader tests.