Molecule
Block
A heading and a free space. 227 instances across 50 screens, which makes it the most widely spread component in the product.
Measured in the browser at step 2: 227 instances show 43 distinct sets of child zones and one computed form. Everything that varies is what somebody put in it.
A slot has no variant matrix, and that is the finding rather than a thin component. Six molecules turned out to be slots at step 2, measured in a browser: between them they show 71 distinct sets of child zones and one computed form each. Their pages say so, so nobody looks for a matrix that does not exist.
Anatomy
dark, shipped
Evidence
04:14Token replay from a new ASN, 3 of 3 sessions.
Not checked: the tenant baseline for the same window.
light, the pair
Evidence
04:14Token replay from a new ASN, 3 of 3 sessions.
Not checked: the tenant baseline for the same window.
.blocka column with one step of gap between its children. That is the whole declarationh2orh3the heading, and the choice is not cosmetic. In the pane the block sits under the pane’sh2, so its heading is anh3; in Z4 with no pane title above it the same heading has to be anh2or the document outline skips a level. The rule takes both and gives them one face
Variants
None. It is a slot.
| Axis a reader looks for | Values | Why the cell is empty |
|---|---|---|
| kind of block | – | Prohibited. An evidence block and a latitude block differ in what is inside them and in nothing else. A modifier per kind would be 43 modifiers and a stylesheet that has to be edited every time a case gains a new section |
| emphasis | – | Prohibited. The heading is already the quietest thing that can still be a heading. A loud block would compete with the evidence it holds |
| spacing | – | The gap is one step and it is the same everywhere. Where a section needs more air, the parent gives it: pane-body puts five steps between its blocks |
When to use it
Everywhere a screen has a titled section: the case pane 141, a document body 31, a log entry 28, the shift brief 20. It is the unit a screen is composed of.
Where she meets it. Constantly and without noticing, which is the correct outcome for the most repeated component in a product. The heading is 11px mono uppercase precisely so it can be skipped by an analyst who already knows what is in the section.
Rule and anti-rule
Do
Latitude
Clerk may contain a single endpoint on this tenant.
A heading and what belongs under it. The heading names the section and says nothing the content will repeat.
Do not
Latitude
Ceiling
Not two headings in one block. Two sections are two blocks, and the outline is what a screen reader reads to find its way around a case.
The h2 or h3 question is the one thing on this page that is easy to get wrong. The shift brief restyled its own heading by hand until stage 07 found it, which is what a missing rule looks like from the inside: the drawing was right and the outline was not.
States
It has none, and it is not interactive. A slot holds things; the things carry their own.
dark, shipped
Evidence
04:14Token replay from a new ASN, 3 of 3 sessions.
Not checked: the tenant baseline for the same window.
light, the pair
Evidence
04:14Token replay from a new ASN, 3 of 3 sessions.
Not checked: the tenant baseline for the same window.
What it reads, and where it stands
| Role | Surface | Where on the component | Dark | Light |
|---|---|---|---|---|
--text-secondary | ink 4.5:1 | the heading |