Grid

Grid five

Goes from one grid__item on small screens to five grid__item's on larger screens.

Class Description
grid--five Used on parent element
grid__item Used on each individual child element of grid--five
Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--five">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Grid four

Goes from one grid__item on small screens to four grid__item's on larger screens.

Class Description
grid--four Used on parent element
grid__item Used on each individual child element of grid--four
Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--four">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Grid three

Goes from one grid__item on small screens to three grid__item's on larger screens

Class Description
grid--three Used on parent element
grid__item Used on each individual child element of grid--three
Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--three">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Instagram grid

Custom grid for use with instagram widget.

Selector Desc
grid-instagram Parent selector
grid__item Child selector
grid--item Alternative to grid__item
20
12
4
43
2
5
34
 
<div class="grid-instagram">
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-1.jpg" alt="">
      <div class="overlay"><span class="hearts">20</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-2.jpg" alt="">
      <div class="overlay"><span class="hearts">12</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-3.jpg" alt="">
      <div class="overlay"><span class="hearts">4</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-4.jpg" alt="">
      <div class="overlay"><span class="hearts">43</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-5.jpg" alt="">
      <div class="overlay"><span class="hearts">2</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-6.jpg" alt="">
      <div class="overlay"><span class="hearts">5</span></div>
    </a>
  </div>
  <div class="grid__item">
    <a href="JavaScript:void(0)" class="instagram">
      <img src="../assets/img/insta-7.jpg" alt="">
      <div class="overlay"><span class="hearts">34</span></div>
    </a>
  </div>
</div>

List grid

  • DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.

  • DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.

  • DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.

<ul class="list-teaser grid-list">
  <li class="list__item">
    <p>DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.</p>
  </li>
  <li class="list__item">
    <p>DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.</p>
  </li>
  <li class="list__item">
    <p>DIPS vant Helse Nord anbudet. 9.3.2012 ble det offentliggjort at DIPS vant 3 av 4 systemområder som det var levert anbudsbesvarelse på. DIPS ble valgt som leverandør av EPJ/PAS, Lab og Elektronisk rekvirering av laboratorietjenester.</p>
  </li>
</ul>

One plus two

Description.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
<div class="grid--one-two">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>

Three no gutter

Similar to three column grid, but without gutter and space on all sizes except really small displays.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
Grid column 3. Example text to show how the coluns breaks on smaller screens.
<div class="grid--three--nogutter">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 3. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Tile grid

Special grid for three tiles on one row.

Tile one
Tile two
Tile three 
<div class="container grid-tile">
  <div class="section__main tile-wrapper">
    <article class="tile green grid__item">
      Tile one
    </article>
    <article class="tile green grid__item">
      Tile two
    </article>
    <article class="tile green grid__item">
      Tile three
    </article>
  </div>
</div>

Two

Two column grid that breaks down to one column on smaller sceens

Grid column 1. Example text to show how the coluns breaks on smaller screens.
Grid column 2. Example text to show how the coluns breaks on smaller screens.
<div class="grid--two">
  <div class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</div>
  <div class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</div>
</div>

Two plus one

Description.

Grid column 1. Example text to show how the coluns breaks on smaller screens.
<div class="grid--two-one">
  <main class="grid__item">Grid column 1. Example text to show how the coluns breaks on smaller screens.</main>
  <aside class="grid__item">Grid column 2. Example text to show how the coluns breaks on smaller screens.</aside>
</div>