Title
.page-lede
.page-title, .page-lede, .section-title, .subsection-title — the outline of a page, as four classes rather than as nine copies of the same four rules.
Examples
Milano Centrale
Departures and arrivals, from the operator's own board.
Departures
Trains leaving in the next hour.
Delays today
<div class="stack">
<h1 class="page-title">Milano Centrale</h1>
<p class="page-lede">Departures and arrivals, from the operator's own board.</p>
<h2 class="section-title">Departures</h2>
<p>Trains leaving in the next hour.</p>
<h3 class="subsection-title">Delays today</h3>
</div>Four classes because all nine consumers of this library had written the same four rules, down to a comment on .page-title that appears byte for byte in eight stylesheets.
The reset flattens headings on purpose; a component gives its own back, and this gives the page its own.
The weight goes down and never back up
A heading inside prose
Prose sets its own headings semibold, so a page title left at the
inherited 400 has an h2 heavier than its h1.
<div class="stack">
<h1 class="page-title">The weight goes down and never back up</h1>
<div class="prose">
<h2>A heading inside prose</h2>
<p>Prose sets its own headings semibold, so a page title left at the
inherited 400 has an <code>h2</code> heavier than its <code>h1</code>.</p>
</div>
</div>The one value here that is not taste. Below the title nothing carries a weight at all, so the outline is read off the size — which is what stops an h3 from outweighing its h2 the first time somebody reaches for bold.
Tokens 0
Level 2, declared on .page-lede itself. Set any of them on that selector to restyle this utility without touching the skin.
None. It reads the skin's tokens directly.
Variants and states
Variants
None. It is one shape, and the page does the rest.
Inside it
.page-title.section-title.subsection-title
State it reads
None.
Before you ship it
What you have to do 3 requirements
- Keep the level and the class in step. These are four looks, not four levels:
class="section-title"on anh4styles a heading and does not move it in the outline, and a screen reader reads the tag. Choose the tag for the document and the class for the size. - Do not put a weight on anything below the title. If a subsection needs to stand out from the paragraph beside it rather than from the section above it, that is a label on a box — body size, one step of weight — and it is a different thing from a heading.
- A page has one
.page-title. More than one is two pages in one document, and the second one reads as the first having ended.
src/css/utilities/title.css · npx mostlycss add title