Typography

Since text is the primary and most essential way to convey informations and values to the users, it's important to grant typography a primordial attention. This section stresses the typographic guidelines that should be used on all manitou websites.

You can find the below components in _typography.scss.




Headings

All HTML headings, <h1> through <h5>, are available. .h1 through .h5 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

For SEO reason, use at least one h1 on each view.

Heading 1


Heading 2


Heading 2 .border


Heading 3


Heading 3 .border


Heading 4


Heading 5

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2 class="border">Heading 2</h2>
<h3>Heading 3</h3>
<h2 class="border">Heading 3</h2>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

	



Inline elements

Inline elements are used to create hierarchy in the informations.

These elements are visually different from each other, but are not to be used in an esthetic way for all that. They create a logical hierarchy that has to make sense : a <strong> element for instance is not a bold element, it is rather a more important element that is then visually distinguished.

Default paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eum libero nihil atque praesentium, eius laudantium debitis quaerat dolor, labore sapiente, ad. Quis eum, hic doloribus debitis iste tempora praesentium!


Lead text

Text width .lead class


Large paragraph

Text width .lg class


Inline link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. En savoir plus


Emphasize elements

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nostrum nisi quam ipsa praesentium magnam culpa earum reiciendis consequatur, tempora ducimus reprehenderit! Similique iste fuga quaerat, architecto asperiores nam cumque.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id eum libero nihil atque praesentium, eius laudantium debitis quaerat dolor, labore sapiente, ad. Quis eum, hic doloribus debitis iste tempora praesentium!</p>

<p class="lead">Text width <code>.lead</code> class</p>

<p class="lg">Text width <code>.lg</code> class</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <a href="#">En savoir plus</a></p>

<em>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</em>

<p>Lorem ipsum dolor sit amet, consectetur <strong>adipisicing elit</strong>. Laboriosam nostrum nisi quam ipsa praesentium magnam culpa earum reiciendis consequatur, tempora ducimus reprehenderit! <strong>Similique iste fuga quaerat, architecto asperiores nam cumque</strong>.</p>



Lists

Simple unordered list

A list of items in which the order does not explicitly matter.

  • Sweep and pickup in one operation
  • Up to 2,500 m² (27,000 ft²) cleaned in 10 minutes
  • High quality sweeping
  • Polyester and steel side brush for perfect sweeping along wall or sidewalks
  • Interchangeable side brush (left or right)
  • Swivel wheels for easy driving mode
<ul>
	<li>Sweep and pickup in one operation</li>
	<li>Up to 2,500 m² (27,000 ft²) cleaned in 10 minutes</li>
	<li>High quality sweeping</li>
	<li>Polyester and steel side brush for perfect sweeping along wall or sidewalks </li>
	<li>Interchangeable side brush (left or right)</li>
	<li>Swivel wheels for easy driving mode</li>
</ul>

Unordered list with links

<ul class="bullet">
    <li>
        <a href="#">Cereals</a>
    </li>
    <li>
        <a href="#">Livestock</a>
    </li>
    <li>
        <a href="#">Mixed Farming</a>
    </li>
    <li>
        <a href="#">Market Gardening</a>
    </li>
    <li>
        <a href="#">Plant Nurseries</a>
    </li>
    <li>
        <a href="#">Poultry</a>
    </li>
    <li>
        <a href="#">Equestrian Centres</a>
    </li>
    <li>
        <a href="#">Wineries</a>
    </li>
</ul>