Reference
Text
Every reusable class, with the result on top and the markup below. Copy a snippet and go.
Headings
Structure headings with labels and summaries.
An <hgroup> ties a heading together with secondary text that titles
it, instead of leaving that text as a separate paragraph.
A paragraph before the heading acts as a label that categorizes it, i.e. the section or kind of thing the heading belongs to. A paragraph after it acts as a summary or subtitle.
The role comes from position, so you add no classes inside an <hgroup>.
Getting started
Install the CLI
A short summary of what the section covers.
Body text after the group, shown at the normal size for comparison.
<hgroup>
<p>Getting started</p>
<h2>Install the CLI</h2>
<p>A short summary of what the section covers.</p>
</hgroup>
<p>
Body text after the group, shown at the normal size for comparison.
</p>The same two roles are available as classes for framing content that isn't a
heading, such as a figure or statistic. .over is a label that introduces
what follows, and .deck is a summary subordinate to the text above it.
When the thing being titled is an actual heading, use an <hgroup> instead; its spacing is tuned for headings, while .over and .deck are not.
Total raised
$48,000
From 320 backers in the first week.
<p class="over">Total raised</p>
<p class="lead" style="margin-block-end: 0;">$48,000</p>
<p class="deck">From 320 backers in the first week.</p>Adjacent headings
A heading or <hgroup> immediately followed by a lower-level heading
or <hgroup> collapses the second one's top margin, so the pair reads
as a unit rather than two separate blocks.
Session
Query optimization
Prerequisites
Body text after the subheading, at normal spacing.
<hgroup>
<p>Session</p>
<h2>Query optimization</h2>
</hgroup>
<h3>Prerequisites</h3>
<p>Body text after the subheading, at normal spacing.</p>Styling other elements as headings
.h1 through .h6 apply the size and margin of the corresponding heading
to any element, for when you want a heading's visual weight on something that
isn't semantically a heading.
<figure>
<div class="h2">600</div>
<figcaption class="over">
An impressive number
</figcaption>
</figure>To resize an actual heading inside an <hgroup>, put the class
on the <hgroup> rather than the heading. It resizes the heading within,
and the group's spacing follows the new size.
Getting started
Install the CLI
<hgroup class="h4">
<p>Getting started</p>
<h2>Install the CLI</h2>
</hgroup>Prose
Set the style and width of body text.
.lead (or .lede) marks the opening paragraph of a section,
i.e. the sentence or two that introduce or summarize what follows. It gives
that paragraph extra weight to match its role.
PGConf.dev brings PostgreSQL contributors together for three days of talks, unconference sessions, and hallway-track hacking.
The first day centers on scheduled talks; the remaining two open up to unconference sessions and hallway-track hacking.
<p class="lead">
PGConf.dev brings PostgreSQL contributors together for three days of talks, unconference sessions, and hallway-track hacking.
</p>
<p>
The first day centers on scheduled talks; the remaining two open up to unconference sessions and hallway-track hacking.
</p>.mono sets text in the monospace typeface. Use it only for text that isn't
code, as <code>, <kbd>, and <samp> already render monospace on their own. Good cases are
a label or a run of figures you want aligned.
Doors open at 09:00 — find us at booth B12.
<p>
Doors open at <span class="mono">09:00</span> — find us at booth <span class="mono">B12</span>.
</p>.note marks content as supplementary, i.e. an aside, caveat, or footnote
that supports the main text without being part of its main line of argument. It
sets the text a step smaller and in a muted tone, while headings keep their size.
Heads up
The prose inside a note shrinks and mutes, marking it as a supporting detail rather than part of the main text.
- Paragraphs and lists are diminished.
- The heading above keeps its normal size.
<div class="note">
<h4>Heads up</h4>
<p>
The prose inside a note shrinks and mutes, marking it as a supporting detail rather than part of the main text.
</p>
<ul>
<li>Paragraphs and lists are diminished.</li>
<li>The heading above keeps its normal size.</li>
</ul>
</div>.text constrains a block's inline size to a comfortable reading width.
The main column applies this automatically, so use it only on elements that sit
outside the normal text flow but should still wrap at the same line length.
A paragraph constrained to a comfortable reading width, even when its container is wider than the main column.
<p class="text">
A paragraph constrained to a comfortable reading width, even when its container is wider than the main column.
</p>Size
Scale text up or down relative to its surroundings.
The size scale changes how large text renders relative to its surroundings
without changing what the text means (a purely presentational adjustment).
Reach for it only when no semantic element like .lead, .deck,
or a heading already carries the meaning you want.
It runs two steps each way: .size+ and .size++ enlarge, .size- and .size-- shrink.
Two steps larger
One step larger
Default body size
One step smaller
Two steps smaller
<p class="size++">Two steps larger</p>
<p class="size+">One step larger</p>
<p>Default body size</p>
<p class="size-">One step smaller</p>
<p class="size--">Two steps smaller</p>Spacing
Control the block margin of any element.
Most block elements have default margins. These classes apply those same spacings to any element.
Paragraph and section
.p spaces an element like a <p>. Use it on a
container (like a <div>) that wraps prose and should flow
with surrounding paragraphs.
<div> spaced like a paragraph.
The next paragraph follows at the same gap.
<div class="p">
A <code><div></code> spaced like a paragraph.
</div>
<p>
The next paragraph follows at the same gap.
</p>.section gives an element the same margin as <section>, <article>, and similar
landmark elements, setting it apart as a major block of content.
A paragraph before the block.
A block with section-level spacing.
A paragraph after the block.
<p>A paragraph before the block.</p>
<p class="section">
A block with section-level spacing.
</p>
<p>A paragraph after the block.</p>Gap
.margin-gap spaces an element by var(--gap), which is
larger than the standard paragraph spacing. Use it on layout blocks, grid
rows, and dividers that need the standard gap unit of separation.
<div class="margin-gap">First block.</div>
<hr class="margin-gap" />
<div class="margin-gap">Second block.</div>