Element

Typograhphy

Headers <h1>to <h6>have a visual hierarchy from large to small. There is also helper classes to get the style of the individual headings .h1to .h6.

Headers is scaled down on smaller screens.

Header level 1

Header level 2

Header level 3

Header level 4

Header level 5

Header level 6

<h1>Header level 1</h1>
<h2>Header level 2</h2>
<h3>Header level 3</h3>
<h4>Header level 4</h4>
<h5>Header level 5</h5>
<h6>Header level 6</h6>

Paragraph

Regular paragraph <p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>

Modules

meta

Meta class .metais used for showing articles author, published and updated dates.

Av Jon-Are Berg-Jakobsen

Publisert: 11.11.2016

Oppdatert: 12.11.2016

<div class="meta">
  <div class="meta-large">
    <div class="profile-publish">
      <span>
        <a href="#">
          <img src="/images/author-image.jpg" class="circle" />
        </a>
      </span>
    </div>
    <div class="text-wrapper">
      <p class="name">Av
        <a href="">Jon-Are Berg-Jakobsen</a>
      </p>
      <p class="date-published">Publisert:
        <time>11.11.2016</time>
      </p>
      <p class="date-updated">Oppdatert:
        <time>12.11.2016</time>
      </p>
    </div>
  </div>
</div>

Icons

<div class="icon-facebook"></div>
<div class="icon-twitter"></div>
<div class="icon-statistic-arrow"></div>
<div class="icon-logo-small"></div>
<div class="icon-search"></div>
<div class="icon-search-white"></div>
<div class="icon-quote"></div>
<div class="icon-triangle-pink"></div>
<div class="icon-play"></div>
<div class="icon-carousel-arrow"></div>

Styleguide