1 typography Typography

Source: styles.scss, line 4

1.1 typography.headings Headings

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Only h1-h3 elements should be used.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Markup: base/headings/headings.twig 
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
Source: base/headings/headings.scss, line 1

1.2 typography.links Link

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Simple link is being used in several places.

Examples
Default styling
Link
:visited
The color is slightly darker in visited links.
Link
Markup: base/links/links.twig 
<a href="#" class="{{ modifier_class }}">Link</a>
Source: base/links/links.scss, line 4

1.3 typography.body Body text

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Suspendisse pretium nulla nec enim consectetur, eu lacinia eros dignissim. Aliquam venenatis quis libero ut mattis. Sed pretium, nisi non lacinia laoreet, magna lectus finibus diam, at laoreet turpis est et neque.

Class aptent taciti sociosqu ad litora torquent per conubia nostra

Donec a quam et libero ullamcorper vehicula in quis massa.

Markup: base/body/body.twig 
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
<p><em>Suspendisse pretium nulla nec enim consectetur, eu lacinia eros dignissim. Aliquam venenatis quis libero ut mattis. Sed pretium, nisi non lacinia laoreet, magna lectus finibus diam, at laoreet turpis est et neque.</em></p>
<p><strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra</strong></p>
<p><strong><em>Donec a quam et libero ullamcorper vehicula in quis massa.</em></strong></p>
Source: base/body/body.scss, line 1

1.4 typography.lists Lists

Source: base/list/list.scss, line 1

1.4.1 typography.lists.ordered Ordered lists

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

Example
  1. Lorem ipsum dolor sit amet
  2. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  3. Faucibus porta lacus fringilla vel
  4. Aenean sit amet erat nunc
  5. Eget porttitor lorem
Markup: base/list/ordered.twig 
<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Nulla volutpat aliquam velit
    <ol>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ol>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>
Source: base/list/list.scss, line 22

1.4.2 typography.lists.unordered Unordered lists

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

Example
  • Lorem ipsum dolor sit amet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Markup: base/list/unordered.twig 
<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>
Source: base/list/list.scss, line 13