Molecule
Covers
A label and its value, stacked. What the view you are looking at actually covers: which tenants, which window, how many entries, and how far back it can answer. 4 instances across 4 screens, four pairs in each.
It is the only place in the product where a label sits above its value rather than beside it, and the reason is the width. These stand at the top of a narrow reading column, and a two column definition list wraps into nonsense there: the value goes to three lines while the label keeps one, and the pair stops reading as a pair.
The label shares its face with label and is not it. Same 11px uppercase mono at .08em, and a different job: label names an answer you are about to type, this names a fact you are being told. Two roles, and the surface rule that keeps ink and line apart is the same rule that keeps these apart.
Where it stands is not where two files say it stands. Both components/covers.css and components/brief.css place it in the shift brief. Counted on the frozen wireframes, all four renderings are in the log’s reading pane: the log itself, the log narrowed by a chip, and the two case history views. Two of those four are built in colour and the other two are still grey.
Anatomy
dark, shipped
light, the pair
.coversthe stack. A column with--space-1between every child, which is what puts a label tight against the value it names.kthe label, and it is a fact you are being told. 11px mono, weight 600, uppercase at.08em, receded ink. Four of them per rendering.vthe value, at the body size and the reading ink, with--space-2under it. That bottom margin is the whole grouping mechanism: 4px above a label and 8px below a value is what makes four pairs read as four rather than as eight lines
Variants
| Axis | Value | Uses | The rule |
|---|---|---|---|
| form | base | 4 | the only form. No states and no variants: what changes between the four renderings is which four facts are true, and three pairs or four is a count rather than a variant |
| orientation | no values | – | Prohibited. A side by side reading is the thing this component exists instead of. Introducing it at a wider viewport would mean the pane had two layouts for the same four facts, and the pane is narrow at every width the log is read at |
| emphasis | no values | – | Prohibited. No accent and no severity. These four facts qualify everything under them equally, and lighting one would say a reader could skip the other three |
When to use it
At the top of a reading pane, once, before anything it qualifies. Every pair has to be a fact about the view rather than about the record: what it is narrowed to, how much is in it, what window it spans, and what it cannot answer. The last of those four is the one that earns the component, because a log that quietly stops at a retention boundary is a log that lies by omission.
Where she meets it. Months after the decision, when somebody has asked her to account for it. This is the third of the console’s clusters, answering for it later, and it is the surface where she is least likely to be the one reading. Whoever opens the log needs to know the shape of what they are looking at before they read a single entry, which is why these four lines come before the entries and not after them.
Rule and anti-rule
Do
A fact about the view, in a full sentence, with its own date. The label names the claim and the value carries the scope, which is the voice rule for a number applied to a pair rather than to a line.
Do not
Never above something you can answer. A name over a control is label, which wears the same face for the opposite job and sits above a field 30 times out of its 31. The face is shared on purpose and the two must not be: one says here is what is true, the other says here is what you have to tell us.
At 360 the component does not change, because it was already built for the narrow case. That is the argument in reverse: a two column pair would need a breakpoint here and a stacked one does not, so the stacked one is the desk rendering as well as the phone rendering.
States
It has none, and it is not interactive. Nothing in it can be pressed, tabbed to or changed. The chip that narrowed the view is a control and lives on the scopebar above; this only reports what that chip did.
dark, shipped
light, the pair
A narrowed view and an unnarrowed one are the same component with different values, which is exactly why neither is a state. Compare the first pair here with the one in the anatomy above: the log narrowed to a single case says so in the value, not in a class, and nothing about the rendering changes when the chip comes off.
No empty form either. The four facts are always true of any view of the log, including a view with nothing in it, where Entries reads zero and the span is still worth saying. A count of zero is still a count, which is the same rule bline settles with .n.is-quiet.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--text-secondary | ink 4.5:1 | the label, and it is the only colour the component declares | ||
--text-primary | ink 4.5:1 | the value, inherited from the page rather than set here |