Typography

Text elements are styled without classes. Everything below is plain semantic HTML.

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

Prose

A paragraph with strong emphasis, emphasis, a link, and small print.

A paragraph with .secondary, which drops it to --text-lc-3. 

<p>
  A paragraph with <strong>strong emphasis</strong>, <em>emphasis</em>,
  <a href="#prose">a link</a>, and <small>small print</small>.
</p>
<p class="secondary">
  A paragraph with <code>.secondary</code>, which drops it to <code>--text-lc-3</code>.
</p>

Blockquote

Bordered on the left at double the standard border width.

The best way to predict the future is to invent it.

Alan Kay
<blockquote>
  <p>The best way to predict the future is to invent it.</p>
  <footer><small>Alan Kay</small></footer>
</blockquote>

Lists

  • Unordered item
  • With a nested list
    • Nested item
  1. Ordered item
  2. Second item
Term
Definition
<ul>
  <li>Unordered item</li>
  <li>
    With a nested list
    <ul>
      <li>Nested item</li>
    </ul>
  </li>
</ul>

<ol>
  <li>Ordered item</li>
  <li>Second item</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Code

code, kbd, and samp render inline. kbd uses the primary surface so it reads as a key.

Run npm install, then press Ctrl + C to stop it. The output was done in 1.2s. 

<p>
  Run <code>npm install</code>, then press <kbd>Ctrl</kbd> + <kbd>C</kbd> to
  stop it. The output was <samp>done in 1.2s</samp>.
</p>

Inside a pre, the font size scales up and padding is applied.

export function greet(name) {
  return "Hello, " + name;
}
<pre><code>export function greet(name) {
  return "Hello, " + name;
}</code></pre>

Small text

small after an input becomes helper text. small.error rebinds --color to --error-color. small.chip is a pill on --surface-lc-3.

draft v2.1.0 needs review

Something went wrong.

<p>
  <small class="chip">draft</small>
  <small class="chip">v2.1.0</small>
  <small class="chip">needs review</small>
</p>
<p><small class="error">Something went wrong.</small></p>

Horizontal rules

Above the rule.

Below the rule.

<p>Above the rule.</p>
<hr />
<p>Below the rule.</p>