Typography - CGU Brand

Headings & Heading Classes

Below are the native heading elements as well as their classname counterparts. Use heading classes to assign heading sizes and styles to arbitrary text.

<div class="u-clear">

<div class="u-span-6">
  <p>Native Heading Elements</p>
  <hr/>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>
<div class="u-span-6">
  <p>Heading Classes</p>
  <hr/>
  <div class="h1">Faux h1</div>
  <div class="h2">Faux h2</div>
  <div class="h3">Faux h3</div>
  <div class="h4">Faux h4</div>
  <div class="h5">Faux h5</div>
  <div class="h6">Faux h6</div>
</div>

</div>

Body Text

<p>Lorem ipsum dolor sit amet, <a href="#"><strong>this is a link</strong></a>. Cras tincidunt tortor eget arcu eleifend dictum. In feugiat, ipsum eget scelerisque sollicitudin, tortor sapien ullamcorper mauris, sed posuere turpis tortor ut sem.</p>
<blockquote><p>A blockquote. Mauris commodo justo quis nulla suscipit malesuada. Quisque eleifend sagittis mi ut luctus.</p></blockquote>
<p>Cras auctor in lacus non consectetur. Quisque consequat urna at ante blandit, at interdum nibh faucibus. Nullam ullamcorper, nulla luctus porttitor mollis, velit nibh dictum magna, eu tempor quam urna et risus.</p>

Lists

A list must be a direct child of a container with the .u-format-text class in order to render their bullet points correctly.

<div class="u-format-text">

<ul>
  <li>Unordered List Item</li>
  <li>
    Unordered List Item
    <ul>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ul>
  </li>
  <li>Unordered List Item</li>
</ul>

<hr/>

<ol>
  <li>Ordered List Item</li>
  <li>
    Ordered List Item
    <ol>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
      <li>Nested List Item</li>
    </ol>
  </li>
  <li>Ordered List Item</li>
</ol>

</div>