Patterns: Type
§ Type styles
There are four styles of type used across the site.
Default
The default text style is this, used for large chunks of text and, broadly, “content”. However, headings are not in this style, by default.
Here’s another paragraph so we can see the spacing and some more features. Here is a link, for example, and here is some small text (which uses <small></small> tags). We should look at superscript12 and subscript12 numbers, to see how they affect line-height. Here's an abbreviation: HTML. [And this is a note.]
Nav
The “nav” text style is used for shorter, more navigational elements, “meta” information about things, and headings. You wouldn’t use it for a paragraph like this. It is sans-serif, bold, always uppercase, and always the same size (except when used for headings).
Alt
The “alt” text style is the same font and weight as the “nav” style but is smaller and mixed-case. It’s used for form help text, sidebar items that are longer than a couple of words, image captions, etc.
Tiny
The “tiny” text style is like the “alt” style but not bold, and smaller. It's used in the timeline table and for chart text.
<div class="demo-text-style-default">
<h3>Default</h3>
<p>The default text style is this, used for large chunks of text and, broadly, “content”. However, headings are <em>not</em> in this style, by default.</p>
<p>Here’s another paragraph so we can see the spacing and some more features. <a href="#">Here is a link, for example</a>, and <small>here is some small text</small> (which uses <code><small></small></code> tags). We should look at superscript<sup>12</sup> and subscript<sub>12</sub> numbers, to see how they affect <code>line-height</code>. Here's an abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>. <span class="utils-note">[And this is a note.]</span></p>
</div>
<div class="demo-text-style-nav">
<h3>Nav</h3>
<p>The “nav” text style is used for shorter, more navigational elements, “meta” information about things, and headings. You wouldn’t use it for a paragraph like this. It is sans-serif, bold, always uppercase, and always the same size (except when used for headings).</p>
</div>
<div class="demo-text-style-alt">
<h3>Alt</h3>
<p>The “alt” text style is the same font and weight as the “nav” style but is smaller and mixed-case. It’s used for form help text, sidebar items that are longer than a couple of words, image captions, etc.</p>
</div>
<div class="demo-text-style-tiny">
<h3>Tiny</h3>
<p>The “tiny” text style is like the “alt” style but not bold, and smaller. It's used in the timeline table and for chart text.</p>
</div>
§ Headings
Level 1 heading
A paragraph here.
Level 2 heading
A paragraph here.
Level 3 heading
A paragraph here.
Level 4 heading
A paragraph here.
Level 5 heading
A paragraph here.
Level 6 heading
A paragraph here.
<h1>Level 1 heading</h1>
<p>A paragraph here.</p>
<h2>Level 2 heading</h2>
<p>A paragraph here.</p>
<h3>Level 3 heading</h3>
<p>A paragraph here.</p>
<h4>Level 4 heading</h4>
<p>A paragraph here.</p>
<h5>Level 5 heading</h5>
<p>A paragraph here.</p>
<h6>Level 6 heading</h6>
<p>A paragraph here.</p>
Add .h--bordered to add a border beneath:
Level 1 heading
A paragraph here.
Level 2 heading
A paragraph here.
Level 3 heading
A paragraph here.
Level 4 heading
A paragraph here.
Level 5 heading
A paragraph here.
Level 6 heading
A paragraph here.
<h1 class="h--bordered">Level 1 heading</h1>
<p>A paragraph here.</p>
<h2 class="h--bordered">Level 2 heading</h2>
<p>A paragraph here.</p>
<h3 class="h--bordered">Level 3 heading</h3>
<p>A paragraph here.</p>
<h4 class="h--bordered">Level 4 heading</h4>
<p>A paragraph here.</p>
<h5 class="h--bordered">Level 5 heading</h5>
<p>A paragraph here.</p>
<h6 class="h--bordered">Level 6 heading</h6>
<p>A paragraph here.</p>
You can use <small> in headings:
Level 1 heading some small text
A paragraph here.
Level 2 heading some small text
A paragraph here.
Level 3 heading some small text
A paragraph here.
Level 4 heading some small text
A paragraph here.
<h1>Level 1 heading <small>some small text</small></h1>
<p>A paragraph here.</p>
<h2>Level 2 heading <small>some small text</small></h2>
<p>A paragraph here.</p>
<h3>Level 3 heading <small>some small text</small></h3>
<p>A paragraph here.</p>
<h4>Level 4 heading <small>some small text</small></h4>
<p>A paragraph here.</p>
§ Horizontal rules
Standard:
Large:
<p>Standard:</p>
<hr>
<p>Large:</p>
<hr class="hr--lg">
§ Blockquotes
Hello there
Here's some text that's quoted in a standard
<blockquote></blockquote>tag. Here's some text that's quoted. Here's some text that's quoted. Here's some text that's quoted.Another paragraph.
Here's some text that's quoted, but this needs a citation/caption, so it's within a
<figure></figure>tag. Here's some text that's quoted. Here's some text that's quoted.Another paragraph.
<blockquote>
<p>Here's some text that's quoted in a standard <code><blockquote></blockquote></code> tag. Here's some text that's quoted. Here's some text that's quoted. Here's some text that's quoted.</p>
<p>Another paragraph.</p>
</blockquote>
<figure class="figure figure--blockquote">
<blockquote>
<p>Here's some text that's quoted, but this needs a citation/caption, so it's within a <code><figure></figure></code> tag. Here's some text that's quoted. Here's some text that's quoted.</p>
<p>Another paragraph.</p>
</blockquote>
<figcaption>
Fred Bloggs, <cite>My Book Title</cite>
</figcaption>
</figure>
§ Code
Code blocks:
blockquote {
border-left: $border-width solid $black; // This comment means the line should be quite long...
padding-left: $padding-x;
}<pre><code>blockquote {
border-left: $border-width solid $black; // This comment means the line should be quite long...
padding-left: $padding-x;
}</code></pre>
Code inline:
$example is a variable
$example is a variable
$example is a variable
<h4><em><code>$example</code> is a variable</em></h4>
<p><strong><code>$example</code> is a variable</strong></p>
<p><em><code>$example</code> is a variable</em></p>
<p><a href="#">Here's <code>code within</code> a link</a></p>
§ Section anchors
§ Section anchor markers can be added to elements like this.
§ In reality a bit more markup is good, the `style` is in case it works in things like RSS readers where our CSS won't be present.
<p id="anchors-p1">
<a class="section-anchor" href="#anchors-p1">§</a>
Section anchor markers can be added to elements like this.
</p>
<p id="anchors-p2">
<a class="section-anchor" href="#anchors-p2" style="text-decoration:none;" title="Link to this section">§</a>
In reality a bit more markup is good, the `style` is in case it works in things like RSS readers where our CSS won't be present.
</p>
Anchors can also be added to headings:
§ Level 1 heading
§ Level 2 heading
§ Level 3 heading
§ Level 4 heading
§ Level 5 heading
§ Level 6 heading
<h1 id="anchors-h1">
<a class="section-anchor" href="#anchors-h1">§</a>
Level 1 heading
</h1>
<h2 id="anchors-h2">
<a class="section-anchor" href="#anchors-h2">§</a>
Level 2 heading
</h2>
<h3 id="anchors-h3">
<a class="section-anchor" href="#anchors-h3">§</a>
Level 3 heading
</h3>
<h4 id="anchors-h4">
<a class="section-anchor" href="#anchors-h4">§</a>
Level 4 heading
</h4>
<h5 id="anchors-h5">
<a class="section-anchor" href="#anchors-h5">§</a>
Level 5 heading
</h5>
<h6 id="anchors-h6">
<a class="section-anchor" href="#anchors-h6">§</a>
Level 6 heading
</h6>