Typography

Simple and clean styling for typography elements

Headings

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

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

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-heading">This is a very big heading</span>
<span class="is-big-heading">This is a big heading<spanh2>
<span class="is-medium-heading">This is a medium heading</span>
<span class="is-heading">This is a regular heading</span>
<span class="is-small-heading">This is a small heading</span>
<span class="is-very-small-heading">This is a very small heading</span>
</> Show code
Copy

---

Subheading

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

This is a very big subheading

This is a big subheading

This is a medium subheading

This is a regular subheading

This is a small subheading

This is a very small subheading

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

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

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

Heading

A subheading to accompany the heading

<h3>Heading</h3>
<h4 class="is-subheading">A subheading to accompany the heading</h4>
Copy

---

Links

Create a hyperlink using the a HTML tag. You can override the default color of a link with the $link Sass variable or the --color-link CSS variable from the color palette.

A regular hyperlink

<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</li>
  <li>Item</li>
  <li>Item</li>
</ul>
</> Show code
Copy

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>
</> Show code
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

---

CSS variables

You can override the styling for individual or all headings using CSS variables.

h1, h2, h3, h4, h5, h6,
.is-very-small-heading, .is-small-heading, .is-heading, .is-medium-heading, .is-big-heading, .is-very-big-heading {
  --font-color: inherit;
  --font-family: var(--theme-heading-font-family);
  --font-weight: 600;
  --line-height: 1.4;
}

h1, .is-very-big-heading {
  --font-size: 2.875rem;
}

h2, .is-big-heading {
  --font-size: 2.5rem;
}

h3, .is-medium-heading {
  --font-size: 1.875rem;
}

h4, .is-heading {
  --font-size: 1.5rem;
}

h5, .is-small-heading {
  --font-size: 1.25rem;
}

h6, .is-very-small-heading {
  --font-size: 1rem;
}

/* Subheadings */
h1.is-subheading, h2.is-subheading, h3.is-subheading, h4.is-subheading, h5.is-subheading, h6.is-subheading,
.is-subheading.is-very-small-heading, .is-subheading.is-small-heading, .is-subheading.is-heading, .is-subheading.is-medium-heading, .is-subheading.is-big-heading, .is-subheading.is-very-big-heading {
  --font-color: hsl(0deg, 0%, 51%, 1);
  --font-weight: 400;
  --line-height: 1.4;
}
Copy

Other CSS variables.

/* Lists */
ol,
ul {
  --margin-left: 1.25rem;
  --margin-top: 1rem;
  --item-padding: 0;
}

ul {
  --style-type: disc;
}

/* Blockquotes */
blockquote {
  --border-color: hsl(0deg, 0%, 84%, 1);
  --border-width: 1px;
  --font-color: var(--color-black);
  --margin: 1rem 0 0;
  --padding: 0.5rem 0 0.5rem 1.25rem;
}

blockquote cite {
  --font-color: var(--color-black);
  --font-size: 0.8125rem;
}

/* Abbreviations */
abbr {
  --border-color: var(--color-black);
}
Copy

---

Sass variables

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