Styleguide

Styleguide short description. It's buildt with Elements, Layout  and Components

Visit live site

Elements

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.

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>

Components

UI

Buttons

There are a few different button options. .btn, <button>and <input type="submit">has the standard styling, and in addition there are .btn-fill, .btn-outlineand .btn-text.

In addition there are custom Paypal which should use the title=""attribute to make sure it's accessible.

Standard button Filled button Outline button Text button 
<a href="href" class="btn">Standard button</a>
<a href="href" class="btn-fill">Filled button</a>
<a href="href" class="btn-outline">Outline button</a>
<a href="href" class="btn-text">Text button</a>
<a href="href" title="Paypal" class="btn-paypal"></a>
<button href="href" title="Paypal" class="btn-paypal payment-cards"></button>

Teasers

Topic teaser

Islam

Praksis, historie og verdisyn

 
<div class="topic-teaser">
  <a href="" class="link-wrapper">
    <p class="title">Islam</p>
    <p class="desc">Praksis, historie og verdisyn</p>
  </a>
</div>

Icons

Icons

<div class="icon-facebook"></div>
<div class="icon-twitter"></div>

Circle Icon

<a href="href" title="Del på Facebook" class="circle-icon">
  <span class="icon-facebook-white"></span>
</a>
<a href="href" title="Del på Facebook" class="circle-icon bg-facebook">
  <span class="icon-facebook-white"></span>
</a>

Circle Icon Large

Make a large version of the circle icon by adding mod-circle-icon_largeon one level above.

<span class="mod-circle-icon_large">
  <a href="href" title="Twitter" class="circle-icon">
    <span class="icon-twitter-white"></span>
  </a>
</span>
<span class="mod-circle-icon_large">
  <a href="href" title="Twitter" class="circle-icon bg-twitter">
    <span class="icon-twitter-white"></span>
  </a>
</span>

Circle Icon Outline

Make a outline version of the circle icon by adding mod-circle-icon_outlineon one level above.

<span class="mod-circle-icon_outline">
  <a href="href" title="Twitter" class="circle-icon">
    <span class="icon-twitter"></span>
  </a>
</span>
<span class="mod-circle-icon_large mod-circle-icon_outline">
  <a href="href" title="Twitter" class="circle-icon">
    <span class="icon-twitter"></span>
  </a>
</span>

Social

Sections

Publication section

HRS Publikasjoner

<div class="section-publication">
  <div class="section-header">
    <h1 class="section-title">HRS Publikasjoner</h1>
  </div>
  <div class="section-body">
    <div class="gallery-three">
      <div class="grid-item">
        <article class="publication">
          <a href="" class="link-wrapper">
            <div class="year">2016</div>
            <h2 class="title">Ny rapport: Kritiske utfordringer</h2>
            <div class="desc">
              <p>Demografien i Oslo undergraver Oslos skattegrunnlag. Oslos skattebyrde må i stadig større grad må bæres av
                personer bosatt i noen av hovedstadens bydeler, nærmere bestemt de med norsk bakgrunn bosatt på vestkanten.</p>
            </div>
          </a>
          <ul class="links">
            <li>
              <a href="">Les utdrag</a>
            </li>
            <li>
              <a href="">Last ned PDF</a>
            </li>
          </ul>
        </article>
      </div>
      <div class="grid-item">
        <article class="publication">
          <a href="" class="link-wrapper">
            <div class="year">2015</div>
            <h2 class="title">Kvinner og vold i Oslo</h2>
            <div class="desc">
              <p>Kriminalitet, og spesielt voldskriminalitet, er et av de samfunnsområdene hvor det er størst forskjell på kvinner
                og menn. Dette er spesielt tydelig innen lovbruddsgruppen «seksualkriminalitet». Selv om kriminalitet rammer
                både kvinner og menn, er kvinner ofte spesielt utsatt for voldskriminalitet, og da særlig seksualkriminalitet.</p>
            </div>
          </a>
          <ul class="links">
            <li>
              <a href="">Les utdrag</a>
            </li>
            <li>
              <a href="">Last ned PDF</a>
            </li>
          </ul>
        </article>
      </div>
      <div class="grid-item">
        <article class="publication">
          <a href="" class="link-wrapper">
            <div class="year">2014</div>
            <h2 class="title">Segregering, mangfold og intgrering - med fokus på Oslos delbydeler og skolen (N-3-2014)</h2>
            <div class="desc">
              <p>Allerede om 16 år kan Oslo ha åtte delbydeler som er sammenliknbare med Rosengård, der integreringen havarerte
                for mangfoldige år siden.</p>
            </div>
          </a>
          <ul class="links">
            <li>
              <a href="">Les utdrag</a>
            </li>
            <li>
              <a href="">Last ned PDF</a>
            </li>
          </ul>
        </article>
      </div>
    </div>
  </div>
</div>

Topic section

Temaer

Innvandring

Takk, fakta og kritikk

Ytringsfrihet

I Norge og internasjonalt

Islam

Praksis, historie og verdisyn

Mediekritikk

Beskrivelse av temaet her

Kriminalitet

Statistikk, utvikling og forebygging

Radikalisering

Med spesielt fokus på Norge

 
<div class="section-topics">
  <div class="section-header">
    <h1 class="section-title">Temaer</h1>
  </div>
  <div class="section-body">
    <div class="gallery-two">
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Innvandring</p>
            <p class="desc">Takk, fakta og kritikk</p>
          </a>
        </div>
      </div>
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Ytringsfrihet</p>
            <p class="desc">I Norge og internasjonalt</p>
          </a>
        </div>
      </div>
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Islam</p>
            <p class="desc">Praksis, historie og verdisyn</p>
          </a>
        </div>
      </div>
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Mediekritikk</p>
            <p class="desc">Beskrivelse av temaet her</p>
          </a>
        </div>
      </div>
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Kriminalitet</p>
            <p class="desc">Statistikk, utvikling og forebygging</p>
          </a>
        </div>
      </div>
      <div class="grid-item">
        <div class="topic-teaser">
          <a href="" class="link-wrapper">
            <p class="title">Radikalisering</p>
            <p class="desc">Med spesielt fokus på Norge</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>