Skip to content

Typography

FAP CSS styles all typographic HTML elements out of the box. No classes needed.

Headings

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Heading 4 — The quick brown fox

Heading 5 — The quick brown fox
Heading 6 — The quick brown fox
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Inline text

Regular paragraph. Bold. Italic. Small. Link. Text with inline code, Ctrl+C, highlight, ins, del. E=mc2, H2O.

<p>
  Regular paragraph. <strong>Bold.</strong>
  <em>Italic.</em> <small>Small.</small>
  <a href="#">Link.</a>
  Text with <code>inline code</code>,
  <kbd>Ctrl+C</kbd>, <mark>highlight</mark>,
  <ins>ins</ins>, <del>del</del>.
  E=mc<sup>2</sup>, H<sub>2</sub>O.
</p>

Blockquote

A blockquote. Use it for quotations or callouts that need visual separation from body text.

<blockquote>
  <p>A blockquote for quotations or callouts.</p>
</blockquote>

Horizontal rule

<hr>

Lists

Unordered list

  • Unordered item
    • Nested item
    • Another nested
  • Item two
  • Item three
<ul>
  <li>Unordered item
    <ul>
      <li>Nested item</li>
      <li>Another nested</li>
    </ul>
  </li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Ordered list

  1. Ordered one
  2. Ordered two
  3. Ordered three
<ol>
  <li>Ordered one</li>
  <li>Ordered two</li>
  <li>Ordered three</li>
</ol>

Definition list

Term
Description for the term above.
Another
Another description.
<dl>
  <dt>Term</dt>
  <dd>Description for the term above.</dd>
  <dt>Another</dt>
  <dd>Another description.</dd>
</dl>

Code block

/* FAP CSS — named grid column breakout */
.fap-container > [data-full] {
  grid-column: full;
}
<pre><code>/* Your code here */
.selector {
  property: value;
}</code></pre>