Typography

Simple and clean styling for typography elements

Headings

You can create a heading use the HTML heading tags or with the is-*-title modifier.

  • .is-very-big-title
  • .is-big-title
  • .is-medium-title
  • .is-title
  • .is-small-title
  • .is-very-small-title

This is a very big heading

This is a big heading

This is a medium heading

This is a regular heading

This is a small heading
This is a very small heading
<h1>This is a very big heading</h1>
<h2>This is a big heading</h2>
<h3>This is a medium heading</h3>
<h4>This is a regular heading</h4>
<h5>This is a small heading</h5>
<h6>This is a very small heading</h6>

<span class="is-very-big-title">This is a very big heading</span>
<span class="is-big-title">This is a big heading<spanh2>
<span class="is-medium-title">This is a medium heading</span>
<span class="is-title">This is a regular heading</span>
<span class="is-small-title">This is a small heading</span>
<span class="is-very-small-title">This is a very small heading</span>
</> Show code 
Copy

Subtitles

The subtitle class can be applied to any heading tag or element that is using the is-*-title modifier to create a subtitle element.

This is a very big subtitle

This is a big subtitle

This is a medium subtitle

This is a regular subtitle

This is a small subtitle
This is a very small subtitle
<h1 class="subtitle">This is a very big subtitle</h1>
<h2 class="subtitle">This is a big subtitle</h2>
<h3 class="subtitle">This is a medium subtitle</h3>
<h4 class="subtitle">This is a regular subtitle</h4>
<h5 class="subtitle">This is a small subtitle</h5>
<h6 class="subtitle">This is a very small subtitle</h6>

<span class="is-very-big-title subtitle">This is a very big heading</span>
<span class="is-big-title subtitle">This is a big heading<spanh2>
<span class="is-medium-title subtitle">This is a medium heading</span>
<span class="is-title subtitle">This is a regular heading</span>
<span class="is-small-title subtitle">This is a small heading</span>
<span class="is-very-small-title subtitle">This is a very small heading</span>
</> Show code 
Copy

Subtitles work best when accompanying a heading (like the one at the top of this page).

Heading

A subtitle to accompany the heading

<h3>Heading</h3>
<h4 class="subtitle">A subtitle to accompany the heading</h4>
Copy

Create a hyperlink using the a HTML tag. You can override the default color of a link with the link variable from the color palette.

<a href="#">A regular hyperlink</a>
Copy

The has-link-inherit modifier will force all nested links to inherit their text color from a parent element.

<div class="has-link-inherit has-text-light-grey">
  <a href="#">A regular hyperlink</a>
</div>
Copy

Lists

Unordered lists

Create an unordered list with the ul HTML tag. There is no limit on how deep you can nest a list.

  • Item
  • Item
    • Nested item
    • Nested item
      • Deeper nested item
<ul>
  <li>Item</li>
  <li>Item
    <ul>
      <li>Nested item</li>
      <li>Nested item
        <ul>
          <li>Deeper nested item</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</> Show code 
Copy

The has-no-list-style modifier can be used to remove the bullet points and the left margin of the list.

  • Item
  • Item
  • Item
  • Item
<ul class="has-no-list-style">
  <li>Item</li>
  <li>Item
    <ul>
      <li>Nested item</li>
      <li>Nested item</li>
      <li>Nested item</li>
      <li>Nested item</li>
    </ul>
  </li>
  </ul>
</> Show code 
Copy

The has-no-list-style modifier does not support nested lists.

Ordered lists

Create an ordered list with the ol HTML tag.

  1. Item
  2. Item
    1. Nested item
    2. Nested item
<ol>
  <li>Item</li>
  <li>Item
    <ol>
      <li>Nested item</li>
      <li>Nested item</li>
    </ol>
  </li>
</ol>
</> Show code 
Copy

Ordered and unordered lists can be combined.

  1. Ordered item
  2. Ordered item
    • Unordered item
    • Unordered item
<ol>
  <li>Ordered item</li>
  <li>Ordered item
    <ul>
      <li>Unordered item</li>
      <li>Unordered item</li>
    </ul>
  </li>
</ol>
</> Show code 
Copy

Inline lists

The is-inline-list modifier will create a horizontal list without any of the bullet points or indents. This can only be applied to the ul HTML tag.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
<ul class="is-inline-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
Copy

Definition lists

You can use the definition lists to display name-value pairs. A dt HTML tag can be followed by one or more dd tags.

Cats
The cutest animals on our earth.
Their almond shaped eyes, soft fur and the way they do that really long stretch will break anyones heart.
Dogs
The most loyal animals on our earth.
Dogs come in all sizes, but the smaller and more ridiculous, the better.
<dl>
  <dt>Cats</dt>
  <dd>The cutest animals on our earth.<dd>
  <dd>Their almond shaped eyes, soft fur and the way they do that really long stretch will break anyones heart.<dd>
  <dt>Dogs</dt>
  <dd>The most loyal animals on our earth.<dd>
  <dd>Dogs come in all sizes, but the smaller and more ridiculous, the better.<dd>
</dl>
Copy

Blockquotes

You can display quotes in a clean format using the blockquote and cite HTML tags.

Science is organized knowledge. Wisdom is organized life. Immanuel Kant
<blockquote>
  Science is organized knowledge. Wisdom is organized life.
  <cite>Immanuel Kant</cite>
</blockquote>
Copy

Abbreviations

Use the abbr HTML tag and the title attribute to add an abbreviation to a piece of text.

NASA became operational on October 1, 1958 -- one year after the Soviets launched Sputnik 1, the world's first artificial satellite.

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> became operational on October 1, 1958 -- one year after the Soviets launched Sputnik 1, the world's first artificial satellite.
</p>
Copy

Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$title-font-family font-family Lato, sans-serif
$title-font-weight unitless 600
$title-line-height unitless 1.4
title-margin-bottom units 0.45rem
$subtitle-margin-bottom units 1rem
$subtitle-margin-top units -0.4rem
$subtitle-font-weight unitless 400
$subtitle-line-height unitless $title-line-height
$subtitle-color color #838383
$list-style-type list-style-type disc
$list-margin-left units 1.25rem
$list-margin-top units 1rem
$list-item-padding padding 0
$blockquote-border-left border 1px solid #d6d6d6
$blockquote-color color $black
$blockquote-margin margin 1rem 0 0
$blockquote-padding padding 0.5rem 0 0.5rem 1.25rem
$cite-font-size units 0.8125rem
$cite-color color $black
$abbr-border-bottom border 1px dotted $black
$title-size map (
h1: 2.875rem,
h2: 2.5rem,
h3: 1.875rem,
h4: 1.5rem,
h5: 1.25rem,
h6: 1rem
)