Typography

Headings

Headings are important as they can tell you what to expect below. Smart, huh? Can also be used to efficiently structure content.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Imports

  • SASS:
    @import "base";

Code

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Body Copy

The usual crap that nobody reads. Reason enough to dedicate a whole section to it.

Example

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Hint: using tables for layout kills kittens!

Imports

  • SASS:
    @import "base";

Code

<p>
    Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. 
    Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. 
    <a href="#">A small river named Duden</a> flows by their place and supplies it with the necessary regelialia.
    It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
    <small>Hint: using tables for layout kills kittens!</small>
</p>

Lists

Ever wondered how to get random words in order? Find the solution right below.

Example

  1. I want to make an ordered list
  2. Full of wonderful items
  3. And other stuff
  • This unordered list
  • Is the most wonderful
  • You've ever seen
  • In your entire life

Imports

  • SASS:
    @import "base";

Code

<ol>
    <li>I want to make an ordered list</li>
    <li>Full of wonderful items</li>
    <li>And other stuff</li>
</ol>
<ul>
    <li>This unordered list</li>
    <li>Is the most wonderful</li>
    <li>You've ever seen</li>
    <li>In your entire life</li>
</ul>

Blockquote

Blockquotes shall only be used to cite clients on the references section of your website on how satisfied they are with your work.

Example

You must learn to be patient. Patient with yourself and the people in this world. You must learn to slow down. To take some time to breathe, to notice, to appreciate what you have. Just trust that in the moment you really need an answer it will come to you clearly. You will know what you need to do, to say, to give. Believe in yourself, in the life you are leading. Trust that you can and will figure this all out. Give yourself the time and space to do that.

Imports

  • SASS:
    @import "base";

Code

<blockquote>
    You must learn to be patient. Patient with yourself and the people in this world. 
    You must learn to slow down. To take some time to breathe, to notice, to appreciate what you have. 
    Just trust that in the moment you really need an answer it will come to you clearly. You will know what you need to do, to say, to give.
    Believe in yourself, in the life you are leading. Trust that you can and will figure this all out. Give yourself the time and space to do that.
</blockquote>