Typography
The theme provides base styles for standard HTML elements. Just use plain
<h1>, <p>, etc. — no extra classes or components needed.
H1
Page title. Just use a plain <h1> element.
Taxing Laughter: The Joke Tax Chronicles
<h1>Taxing Laughter: The Joke Tax Chronicles</h1>H2
Section heading with bottom border.
The People of the Kingdom
<h2>The People of the Kingdom</h2>H3
Sub-section heading.
The Joke Tax
<h3>The Joke Tax</h3>H4
Minor heading.
People stopped telling jokes
<h4>People stopped telling jokes</h4>Paragraph
Standard body text with proper leading. Consecutive paragraphs get automatic spacing.
The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.
Jokester began sneaking into the castle in the middle of the night and leaving jokes all over the place: under the king's pillow, in his soup, even in the royal toilet.
<p>
The king, seeing how much happier his subjects were, realized the error of
his ways and repealed the joke tax.
</p>
<p>
Jokester began sneaking into the castle in the middle of the night and
leaving jokes all over the place.
</p>Blockquote
Italicized quote with left border accent.
"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."
<blockquote>
"After all," he said, "everyone enjoys a good joke, so it's only fair
that they should pay for the privilege."
</blockquote>Inline Code
Inline code snippets are styled automatically when not inside a <pre>.
Use the Alert component to display important messages.
<p>
Use the <code>Alert</code> component to display important messages.
</p>Small
Small text for fine print and labels.
<small>Email address</small>Customization
All typography styles come from the theme CSS and use the same CSS variables as the rest of the library. Override them in your own stylesheet:
/* Override heading sizes */
h1 { font-size: 3rem; }
h2 { border-bottom: none; }
/* Override code background */
code:not(pre code) {
background-color: hsl(var(--secondary));
}