Meta row
A row of short muted labels, side by side. Two names in the product today and one anatomy: the axis under a chart, and the ruled strip that says how long something will take and where its instructions came from.
Anatomy
One zone and a repeated content slot, and nothing from the kit inside it, which is what keeps it an atom. Everything below is drawn by design/system/components/meta-row.css through the same entry point a product screen loads, so this page cannot drift from the screens: there is no second copy of the CSS here to drift from. Both specimens carry real product copy.
.metarowthe plain form: a wrapping flex row in the single secondary ink tier, at 11px, with its labels pushed apart byspace-between. It was.axisuntil step 6.metarow.ruledthe ruled form: the same row at 12.5px, with a rule above and a rule below, and a real gap instead ofspace-between. It was.strip> spanthe labels. Plainspanelements with no class of their own: the row positions them, and nothing styles them individuallyflex-wrapwrapon both, and it does more work than it looks. The ruled form's second label is a whole sentence, and at 360px it has to fall to its own line rather than squeeze the label beside itborder-top,border-bottomthe only declarations that separate the two forms structurally. Both read--line-divider, the softer of the two line tokens
Measured on this page: the plain form renders at 11px with justify-content: space-between and 6px above, 24px below; the ruled form at 12.5px with a 4px by 22px gap, 10px of padding inside its two rules and 22px below. Both sit in --text-muted, 5.78:1 on the surface in the light theme and 6.40:1 in the dark.
Behaviour at width
Fluid, and it has no point and no threshold. flex-wrap: wrap, which matters more here than it looks: a meta row is several short facts, and the alternative to wrapping is truncating one of them. See Width.
Variants and sizes
One axis, and it is rule: whether the row carries a line above and below it. Everything else follows from that one choice, because the two forms are answering different questions and the rules are what say so. Values stand next to each other below, because the question is comparative.
| Rule Plain when the labels belong to the thing directly above them. Ruled when they are facts about the whole page and belong to nothing in particular. A rule is a boundary, so it is only earned by content that needs to be fenced off from what surrounds it |
Values | Where it stands |
|---|---|---|
Plain .metarow |
11px space-between 6px 0 24px |
3 places, all of them directly under a chart placeholder. space-between rather than a gap, because these labels are not a list: each one names a position on the plot above and has to sit under it. The first pins left, the last pins right, and that is what makes three months or five categories line up with the strokes |
Ruled .metarow.ruled |
12.5px gap 4px 22px 10px padding 2 × --line-divider |
2 places, both on a cancel guide. Its labels are a list, so they take a real gap: how long this will take, and where the steps came from. The two rules are what turn two stray sentences into one band of facts about the page |
| A third form | - | Forbidden with a reason rather than missing. There is no emphasis axis and no tone axis: every label in both forms is --text-muted. A meta row that could highlight one of its own labels would be ranking them, and ranking is the work this product takes away from the person. If one fact matters more than the others, it is not a label, it is a sentence, and it belongs to a different component |
The step from 11px to 12.5px is the point, not drift. The plain form is a caption for a picture and is read only by somebody following the plot; the ruled form is content a person actually reads before deciding whether to start. Two jobs, two sizes, and the size follows the job rather than the host.
The ruled form is decided from the grey, not invented here. The ruled form stands on zero coloured pages: it lives on cancel-guide and cancel-guide-no-guide, and neither has ever been drawn in colour. docs/census.md lists it under "Meta strip" as one of the seventeen forms that exist only in the grey, and names the risk exactly: a form nobody has drawn is a form every later builder invents independently, differently each time. Every value above came from wireframes/_wf.css:810-814 with only the colour layer added, so stage 12 has something to match rather than something to guess.
Two selectors, one component, and step 6 took the second name off. .axis became .metarow and .strip became .metarow.ruled, executed from the map in docs/inventory.md together with the markup of the screens. A rename here and a screen there is how a pixel comparison stops proving anything, so both moved in one pass.
When to use it
A meta row carries facts nobody came for but everybody wants before they commit, in the fewest words the product can manage. It never carries the answer to the question the screen exists to answer: it carries the small print that makes the answer trustworthy, and it does it at the smallest sizes in the system so it can sit there without competing.
The plain form is a caption for a picture: three months under a trend line, or the person's own five category names under an empty frame behind the Pro gate. It only exists where a chart does, which is why it stands on the same screens and nowhere else.
The ruled form is the answer to "what am I in for", right before a person starts a cancel guide: "About five minutes" beside "Steps for netflix.com, which is how you pay for this one". Both lines come from voice/docs/microcopy.md, and both exist because the category asks for a cancellation with no statement of effort and no statement of source. Stating the effort is what makes the guide feel like help rather than like a task; stating the source is Trust through transparency, applied to instructions instead of to figures. On the screen with no tailored steps the second label changes to "The general path, because we have no tailored steps for this service yet", which is the same sentence being honest about a gap.
The rule, and the anti-rule
Two or three short facts that belong together and belong to nothing else on the page. They read across, not down, so they cost one line of vertical space and stay skippable for the person who does not need them.
The moment each fact needs a label of its own, the row is the wrong object: it has no place to put one, and adding it inline turns the row into a paragraph of run-together phrases. That job belongs to the pair list, .pairs, which gives every fact a label and a value on their own line, divided by a hairline. The test is simple: if a reader has to be told what a value is, use the pair list; if the value says what it is, use this.
A rule above and a rule below, around several labels sitting side by side. The band is the unit, and the two lines are what make the eye read it as one.
One paragraph with a rule above it is a different component: the muted line in its ruled form, .muted.ruled, which is what the legal footnote is on seven grey pages. The two look similar in a screenshot and are not the same object, and the difference is the anatomy rather than the styling: this component is a row of several labels, that one is a single block of prose. Using the ruled meta row for one sentence gives it a second rule underneath that fences off nothing.
Limits
U16, context. [hidden] is a fact about an element, and this component is one of exactly two in the system that out-declared it: .metarow is display: flex at 0-2-0 against the browser's own 0-1-0, so authoring hidden on a meta row did nothing at all, silently. History and trends found it: it carries three of these, one label row per range, and hides two of them in the markup. The fix is not in this file. The display: flex here is correct for a row that IS in the page; the one rule that settles it lives at the end of index.css, where source order lets it win without !important. Full table with sources and how to check: Usage rules.
States
None, and that is a decision rather than an omission. It is a row of labels: nothing in it is a link, a button or a field on any page in the product, and meta-row.css declares no :hover, no :focus-visible and no [disabled]. Inventing a hover on a label is the same defect as inventing a role, because it documents something the product cannot do.
The technical half
| Reads | Which token | Growing from |
|---|---|---|
| every label, in both forms | --text-muted | --muted, the single secondary tier, and there is no third. 5.78:1 on the surface light, 6.40:1 dark. The grey ran a fourth tone here and it collapsed onto this one at stage 07: on 11px text that fourth grey measured about 2.85:1, under AA |
| the two rules of the ruled form | --line-divider | --hairline-soft. Decorative, and deliberately the softer of the two line tokens: it divides content inside a screen and does not enclose anything, so it is not a container edge |
| geometry | no primitive | this component has no corner and no fixed size. The sizes and margins stay the literals they are today, because the spacing and type scales are still a proposal awaiting the founder |
Lives in design/system/components/meta-row.css. Stands on 5 grey pages in 5 places. Coloured screens carrying it, all three of them the plain form: History and trends, the Pro gate, empty. The ruled form stands on none, and its two grey homes are named in the matrix above.
<p class="metarow"><span>May</span><span>Jun</span><span>Jul</span></p>
<p class="metarow ruled">
<span>About five minutes</span>
<span>Steps for netflix.com, which is how you pay for this one</span>
</p>
The labels carry no class. If one of them needs a name of its own,
the component is the pair list, not this.