Type
Headings
Styled by tag — put the right tag in a text element, never a class on the heading.
h1
The quick brown fox jumps over the lazy dog
<h1>The quick brown fox jumps over the lazy dog</h1>h2
What the framework gives you
<h2>What the framework gives you</h2>h3
Real components, one system
<h3>Real components, one system</h3>h4
A smaller sub-heading
<h4>A smaller sub-heading</h4>Type
Body, small & links
Body copy is --type-body with a comfortable measure. .small steps the size down for fine print.
Paragraph
Body copy sits at a fluid size with a 1.6-ish line height and a capped reading measure, so long passages stay legible on wide screens.
<p>Body copy sits at a fluid size with a 1.6-ish line height and a capped reading measure, so long passages stay legible on wide screens.</p>Small
class="small".
Fine print, captions and disclaimers use the small step.
<p class="small">Fine print, captions and disclaimers use the small step.</p>Inline link
Links carry a hairline underline and shift colour on hover.
Read more about the framework and how it fits together.
<p>Read more <a href="#">about the framework</a> and how it fits together.</p>Type
Lists
The list element and the rich-text editor emit the same <ul>/<ol>.
Unordered
- Tokens set the brand once
- Layout is the framework grid
- Native elements only
<ul><li>Tokens set the brand once</li><li>Layout is the framework grid</li><li>Native elements only</li></ul>Ordered
- Choose a layout
- Drop in content
- Style by tag
<ol><li>Choose a layout</li><li>Drop in content</li><li>Style by tag</li></ol>Type
Blockquote
A <blockquote> for pulled quotes, styled in website.css.
Blockquote
Build it once in the framework and every site inherits the same behaviour.
<blockquote><p>Build it once in the framework and every site inherits the same behaviour.</p></blockquote>Type
Code
A <pre><code> block scrolls rather than clips (code.css); inline <code> wraps with the text.
Code block
<a class="btn" href="#">Get started</a><pre><code><a class="btn" href="#">Get started</a></code></pre>Inline code
Use var(--prime), never a raw hex.
<p>Use <code>var(--prime)</code>, never a raw hex.</p>