NMBU Styleguide

NMBU Styleguide is a collection of visual elements that are used to build a modular and reusable system for nmbu.no. It's buildt with Elements, Layout, Components, and Widget

Visit NMBU.no

Study page

Accordion - Interactive

Accordion for use on study pages

  • Hva blir jeg?

    Du får en utdanning som gjør deg i stand til å takle ulike utfordringer og problemstillinger i næringsliv og forvaltning, særlig knyttet til miljø og forurensninger. Med C i snitt er du kvalifisert til flere masterprogram ved NMBU og ev. andre læresteder. Et bevisst valg av emnegruppe og pedagogisk påbygning gjør også læreryrket aktuelt.

  • Hva lærer jeg?

    Du får kompetanse i miljøkjemi og bærekraftig bruk av jord-, vann- og georessurser. Du lærer om egenskaper og prosesser som påvirker utvikling i jord- og vannsystemer og samspillet mellom de biologiske, kjemiske, fysiske og geologiske prosessene. Du lærer om dannelse og utnyttelser av fornybare og ikke-fornybare naturressurser sett i sammenheng med globale og lokale miljøutfordringer. Ferdigheter læres gjennom prøvetaking, feltmålinger, laboratorieanalyser, statistiske analyser og modellering.

  • Livet ved siden av studiene

    Du får kompetanse i miljøkjemi og bærekraftig bruk av jord-, vann- og georessurser. Du lærer om egenskaperog prosesser som påvirker utvikling i jord- og vannsystemer og samspillet mellom de biologiske, kjemiske, fysiske og geologiske prosessene. Du lærer om dannelse og utnyttelser av fornybare og ikke-fornybare naturressurser sett i sammenheng med globale og lokale miljøutfordringer. Ferdigheter læres gjennom prøvetaking, feltmålinger, laboratorieanalyser, statistiske analyser og modellering.

<ul class="accordion js-accordion">
  <li class="accordion-item">
    <a href="#" class="accordion-header">Hva blir jeg?</a>
    <div class="accordion-body">
      <p>Du får en utdanning som gjør deg i stand til å takle ulike utfordringer og problemstillinger i næringsliv og forvaltning,
        særlig knyttet til miljø og forurensninger. Med C i snitt er du kvalifisert til flere masterprogram ved NMBU og ev.
        andre læresteder. Et bevisst valg av emnegruppe og pedagogisk påbygning gjør også læreryrket aktuelt.</p>
    </div>
  </li>
  <li class="accordion-item">
    <a href="#" class="accordion-header">Hva lærer jeg?</a>
    <div class="accordion-body">
      <p>Du får kompetanse i miljøkjemi og bærekraftig bruk av jord-, vann- og georessurser. Du lærer om egenskaper og prosesser
        som påvirker utvikling i jord- og vannsystemer og samspillet mellom de biologiske, kjemiske, fysiske og geologiske
        prosessene. Du lærer om dannelse og utnyttelser av fornybare og ikke-fornybare naturressurser sett i sammenheng med
        globale og lokale miljøutfordringer. Ferdigheter læres gjennom prøvetaking, feltmålinger, laboratorieanalyser, statistiske
        analyser og modellering.</p>
    </div>
  </li>
  <li class="accordion-item">
    <a href="#" class="accordion-header">Livet ved siden av studiene</a>
    <div class="accordion-body">
      <p>Du får kompetanse i miljøkjemi og bærekraftig bruk av jord-, vann- og georessurser.
        <a href="http://testlenke.no">Du lærer om egenskaper</a>og prosesser som påvirker utvikling i jord- og vannsystemer og samspillet mellom de biologiske,
        kjemiske, fysiske og geologiske prosessene. Du lærer om dannelse og utnyttelser av fornybare og ikke-fornybare naturressurser
        sett i sammenheng med globale og lokale miljøutfordringer. Ferdigheter læres gjennom prøvetaking, feltmålinger, laboratorieanalyser,
        statistiske analyser og modellering.</p>
    </div>
  </li>
</ul>

Testimonial

Blocquote with image and cite

Fagnivået er veldig høyt ved NMBU. I jobben kan jeg til tider virkelig dra nytte av min egen fagkunnskap. Det gir en viss stolthet!

Eli Annette Erdal Adriansen
Prosjektleder Vann og avløp, Vestvågøy kommune 
<blockquote class="testimonial">
  <img src="/images/styleguide/student-testimonial-1.jpg" alt="" />
  <p>Fagnivået er veldig høyt ved NMBU. I jobben kan jeg til tider virkelig dra nytte av min egen fagkunnskap. Det gir en viss
    stolthet!</p>
  <cite>Eli Annette Erdal Adriansen
    <br />Prosjektleder Vann og avløp, Vestvågøy kommune</cite>
</blockquote>

Image hero

Image hero used on study pages..

Foto
Håkon Sparre @ UMB
<div class="hero-banner-left-pull">
  <img src="/images/styleguide/study-1.jpg" alt="" />
  <div class="field field-label-inline">
    <div class="field-label">Foto</div>
    <div class="field-items">
      <div class="field-item">Håkon Sparre @ UMB</div>
    </div>
  </div>
</div>

Study aside data

Søk nå Slik søker du
Varighet
3 år heltid
Opptakskrav
Generell studiekompetanse + realfagskrav (REALFA)
Mer om opptakskrav
Poenggrenser
44,5/42,9 i 2019
Antall studieplasser
20
Oppstart
Høst 2020
<div class="aside-study">
  <div class="space-bottom">
    <a href="" class="btn-cta large">Søk nå</a>
    <a href="" class="btn-link large">Slik søker du</a>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Varighet</div>
    <div class="field-items">
      <div class="field-item">3 år heltid</div>
    </div>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Opptakskrav</div>
    <div class="field-items">
      <div class="field-item">Generell studiekompetanse + realfagskrav (REALFA)</div>
      <div class="field-item">
        <a href="">Mer om opptakskrav</a>
      </div>
    </div>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Poenggrenser</div>
    <div class="field-items">
      <div class="field-item">
        <a href="">44,5/42,9 i 2019</a>
      </div>
    </div>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Antall studieplasser</div>
    <div class="field-items">
      <div class="field-item">20</div>
    </div>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Oppstart</div>
    <div class="field-items">
      <div class="field-item">Høst 2020</div>
    </div>
  </div>
</div>

Study aside contact

Studieveileder

Mina Martinesen Langfjord

Kari Margrete Thue

Hidden label
Send e-post
Ring +47 67 23 19 45
Studentenes informasjonstorg
sit@nmbu.no
Ring +47 67 23 01 11 
<div class="aside-study">
  <div class="field field-label-above">
    <div class="field-label">Studieveileder</div>
    <div class="field-items">
      <div class="field-item">
        <div class="contact-preview">
          <img src="/images/styleguide/study-contact-1.jpg" alt="" />
          <p class="name">Mina Martinesen Langfjord</p>
        </div>
      </div>
      <div class="field-item">
        <div class="contact-preview">
          <img src="/images/styleguide/study-contact-2.jpg" alt="" />
          <p class="name">Kari Margrete Thue</p>
        </div>
      </div>
    </div>
  </div>
  <div class="field field-label-hidden">
    <div class="field-label">Hidden label</div>
    <div class="field-items">
      <div class="field-item">
        <a href="">Send e-post</a>
      </div>
      <div class="field-item">Ring
        <a href="" class="link-tlf">+47 67 23 19 45</a>
      </div>
    </div>
  </div>
  <div class="field field-label-above">
    <div class="field-label">Studentenes informasjonstorg</div>
    <div class="field-items">
      <div class="field-item">
        <a href="">sit@nmbu.no</a>
      </div>
      <div class="field-item">Ring
        <a href="" class="link-tlf">+47 67 23 01 11</a>
      </div>
    </div>
  </div>
</div>

Hidden group wrapper - Interactive

.hidden-group-wrapper.mobile-onlyis used to hide content on mobile with a option to show content by toggeling a link button. It has two children elements: hidden-group-contentand hidden-group-toggle

.hidden-group-contentis wrapper for content that should be hidden on smaller screens

.hidden-group-toggleis button that toggle .hidden-group-contenton smaller screens. The button is only shown on smaller screens. Button has to optional attributes that can be set. data-after="+"and data-text-close="Text to show when open". The link text itself if what will show when .hidden-group-contentis closed.

Text content that is hidden by default on smaller screens

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 volut

Vis mer 
<div class="hidden-group-wrapper mobile-only">
  <div class="hidden-group-content">
    <p>Text content that is hidden by default on smaller screens</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 volut</p>
  </div>
  <a data-after="+" data-text-close="Skjul innhold" href="javascript:;" class="hidden-group-toggle">Vis mer</a>
</div>

Element

Typography

Titles

Base heading styles

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

Base paragraph style

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>

Paragraph large

Large paragraph style

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 class="text-large">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>

Ordered and unordered list

Base list style

  1. List item 1
  2. List item 2
  3. List item 3
  • List item 1
  • List item 2
  • List item 3
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

Section title

.widget-titleor .pane-title, for use in main content area. There are a few options.

Sizes:22px (default), 28px ( widget-title-large) and 16px ( widget-title-small) which is same as base font size.

Other:Hyphen can be omitted by adding widget-title-hyphen-none

Default widget title

Larger widget title

Smaller widget title

Title without hyphen

<h1 class="widget-title">Default widget title</h1>
<div class="widget-title-large">
  <h1 class="widget-title">Larger widget title</h1>
</div>
<div class="widget-title-small">
  <h1 class="widget-title">Smaller widget title</h1>
</div>
<div class="widget-title-hyphen-none">
  <h1 class="widget-title">Title without hyphen</h1>
</div>

Border title

.border-titlecan be set on any heading. If there a two elements as siblings, they will share the border in between them.

Bli med og form morgendagens livsgrunnlag;
Finn ditt studieeller Søk jobb på NMBU

Les om våre to campuser; Campus Adamstuenog Campus Ås.

Les historier om forskning, studier og dagligliv på NMBU 

<div class="center-wrapper">
  <div class="panel-pane">
    <h3 class="border-title">Bli med og form morgendagens livsgrunnlag;
      <br/>
      <a href="href">Finn ditt studie</a>eller
      <a href="href">Søk jobb på NMBU</a>
    </h3>
  </div>
  <div class="panel-pane">
    <h3 class="border-title">Les om våre to campuser;
      <a href="href">Campus Adamstuen</a>og
      <a href="href">Campus Ås</a>.</h3>
    <h3 class="border-title">Les historier om
      <a href="href">forskning, studier og dagligliv på NMBU</a>
    </h3>
  </div>
</div>

Sub title meta

.sub-title-metais used on study pages after primary title. Multiple data can be wrapped inside span's

Bachelor 3 år heltid 

<h2 class="sub-title-meta">
  <span>Bachelor</span>
  <span>3 år heltid</span>
</h2>

Intro

.widget-introCommonly used as a option on widgets together with widget title

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.

<div class="widget-intro">
  <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>
</div>

Buttons

Default button

.btnUsed on <a>tags to attract more attention then a regular link

Campus Ås 
<a href="" class="btn">Campus Ås</a>

Call to action button

.btn-ctaSame as .btnbut uses default link color to grab the attention above the default button.

Campus Ås 
<a href="" class="btn-cta">Campus Ås</a>

Button with icon

Button's can include Font Awesomeicons by adding a empty <span>with the class .fa+ class for the desired icon .fa-drupal. See all Font awesome icons

Studieguiden Slik søker du opptak 
<a href="" class="btn">
  <span class="fa fa-file-pdf-o"></span>Studieguiden</a>
<a href="" class="btn-cta">
  <span class="fa fa-pencil"></span>Slik søker du opptak</a>

.btn-linkis based on .btnbut without background color. Fits next to a regular button.

Slik søker du 
<a href="" class="btn-link">Slik søker du</a>

Button size

.largeis available to make any button larger then standard size.

Søk nå 
<a href="" class="btn-cta large">Søk nå</a>

Table

Default table

Tittel på tabell her
Kolonne 1 Kolonne 2 Kolonne 3 Kolonne 4 Kolonne 5 Kolonne 6 Kolonne 7
Rad 1 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 2 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 3 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 4 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 
<div class="table-wrapper">
  <table>
    <caption>Tittel på tabell her</caption>
    <thead>
      <tr>
        <th></th>
        <th>Kolonne 1</th>
        <th>Kolonne 2</th>
        <th>Kolonne 3</th>
        <th>Kolonne 4</th>
        <th>Kolonne 5</th>
        <th>Kolonne 6</th>
        <th>Kolonne 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Rad 1</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
      </tr>
      <tr>
        <th>Rad 2</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
      </tr>
      <tr>
        <th>Rad 3</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
      </tr>
      <tr>
        <th>Rad 4</th>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
      </tr>
    </tbody>
  </table>
</div>

Table in article

Tittel på tabell her
Kolonne 1 Kolonne 2 Kolonne 3 Kolonne 4 Kolonne 5 Kolonne 6 Kolonne 7
Rad 1 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 2 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 3 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7
Rad 4 Data 1 Data 2 Data 3 Data 4 Data 5 Data 6 Data 7 
<div class="style-article">
  <div class="table-wrapper">
    <table>
      <caption>Tittel på tabell her</caption>
      <thead>
        <tr>
          <th></th>
          <th>Kolonne 1</th>
          <th>Kolonne 2</th>
          <th>Kolonne 3</th>
          <th>Kolonne 4</th>
          <th>Kolonne 5</th>
          <th>Kolonne 6</th>
          <th>Kolonne 7</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Rad 1</th>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
        </tr>
        <tr>
          <th>Rad 2</th>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
        </tr>
        <tr>
          <th>Rad 3</th>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
        </tr>
        <tr>
          <th>Rad 4</th>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
          <td>Data 5</td>
          <td>Data 6</td>
          <td>Data 7</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Form

Input text

Default form input style of type: text, password, date, datetime, datetime-local, month, week, email, number, search, tel, time, urland color 

<form>
  <input type="text" id="input-text" value="Kyrksæterøra" />
</form>

Form label

Default label style

<form>
  <label for="input-text">Name</label>
</form>

Field label wrap

.field-label-wrapis used as wrapper for each collection of label and input put together. The label is indented from left and aligns with text inside the input field.

<form>
  <div class="field-label-wrap">
    <label for="input-text">Name</label>
    <input type="text" id="input-text" value="Kyrksæterøra" />
  </div>
</form>

Search form

.inset-btnis used as a wrapper to get putton inset on the text field, and .input-greyis set to change color on input to grey background.

In addition is .visuallyhiddenused on label and btn to visually hide text, but still have them accessible for screen readers.

<form>
  <div class="field-label-wrap">
    <label for="input-text" class="visuallyhidden">Søk</label>
    <div class="inset-btn">
      <input type="search" id="input-text" placeholder="Søk i emner" class="input-grey" />
      <button type="submit" class="btn-search">
        <span class="visuallyhidden">Søk</span>
      </button>
    </div>
  </div>
</form>

.with-linkcan be added to form element when there are more links next to search forms

Se alle emner 
<form class="with-link">
  <div class="field-label-wrap">
    <label for="input-text" class="visuallyhidden">Søk</label>
    <div class="inset-btn">
      <input type="search" id="input-text" placeholder="Søk i emner" class="input-grey" />
      <button type="submit" class="btn-search">
        <span class="visuallyhidden">Søk</span>
      </button>
    </div>
    <a href="" class="more-link">Se alle emner</a>
  </div>
</form>

Helper classes

Spacing

.space-alladds space by using margin. Default space is 35px. There is variants availabe .space-all-smalland .space-all-large. All of them has little less space on smaller screens.

Button with small space
Button with default space
Button with large space 
<a href="href" class="btn space-all-small">Button with small space</a>
<br/>
<a href="href" class="btn space-all">Button with default space</a>
<br/>
<a href="href" class="btn space-all-large">Button with large space</a>

Spacing top and bottom

.space-topand .space-bottomadds space by margin on top or bottom of a element. Both options has variants for how much space is needed. Available options are .space-top-small .space-top-large .space-bottom-small .space-bottom-large.

Button with small space
Button with default space
Button with large space 
<a href="href" class="btn space-top-small">Button with small space</a>
<br/>
<a href="href" class="btn space-top">Button with default space</a>
<br/>
<a href="href" class="btn space-top-large">Button with large space</a>

Layout

Layouts

Two column center

.l-containerused with child .l-content-leftand .l-content-rightcreates the two column layout used on most pages.

Top container - 12 columns
Left container - 8 columns
Right container - 4 columns ++
Bottom container - 12 columns
<div class="l-container sg-visualize-grid">
  <div class="l-content-top">Top container - 12 columns</div>
  <div class="center-wrapper l-content-center">
    <div class="l-content-left">Left container - 8 columns</div>
    <div class="l-content-right">Right container - 4 columns ++</div>
  </div>
  <div class="l-content-bottom">Bottom container - 12 columns</div>
</div>

Grid

Grid is similar to Gallery, but it fits best when there is content on one row on large screens.

Grid stack

.grid-stackwith child .grid-item Can be used in 12 and 8 column contexts

<div class="grid-stack sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Grid two

.grid-twowith child .grid-item Can be used in 12 and 8 column contexts

column 1
column 2
<div class="grid-two sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
</div>

Grid three

.grid-threewith child .grid-item Can be used in 12 column context

column 1
column 2
column 3
<div class="grid-three sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
</div>

Grid four

.grid-fourwith child .grid-item Can be used in 12 column context

column 1
column 2
column 3
column 4
<div class="grid-four sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
</div>

Grid five

.grid-fivewith child .grid-item Can be used in 12 column context, but five does not align to 12 column columns.

column 1
column 2
column 3
column 4
column 5
<div class="grid-five sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
  <div class="grid-item">column 5</div>
</div>

Grid two equal height

.grid-two-cellcan be used when two columns need to be equal height. Optionally add .box-border-paddingto each .grid-itemto add a hairline border and space inside box.

Little text

More text

Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.

<div class="grid-two-cell">
  <div class="grid-item box-border-padding">
    <p>Little text</p>
  </div>
  <div class="grid-item box-border-padding">
    <p>More text</p>
    <p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget
      euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula
      eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
  </div>
</div>

Grid three equal height

.grid-three-cellis similar to .grid-two-cell, but with three columns.

Little text

More text

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.

Even more text

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.

Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.

<div class="grid-three-cell">
  <div class="grid-item box-border-padding">
    <p>Little text</p>
  </div>
  <div class="grid-item box-border-padding">
    <p>More text</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>
  </div>
  <div class="grid-item box-border-padding">
    <p>Even more text</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>
    <p>Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget
      euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula
      eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</p>
  </div>
</div>

Gallery is similar to Grid, but it fits best when there is more then one row on large screens.

.gallery-onewith child .grid-itemcreates a one column grid on large screens. It's 1 gutter space between each item.

column 1
column 2
column 3
<div class="gallery-one sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
</div>

.gallery-twowith child .grid-itemcreates a two column grid on large screens. It's 1 gutter space between each item.

column 1
column 2
column 3
column 4
<div class="gallery-two sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
</div>

.gallery-threewith child .grid-itemcreates a three column grid on large screens. It's 1 gutter space between each item.

It's best used in a 12 column context (full with).

column 1
column 2
column 3
column 4
column 5
column 6
<div class="gallery-three sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
  <div class="grid-item">column 5</div>
  <div class="grid-item">column 6</div>
</div>

.gallery-fourwith child .grid-itemcreates a four column grid on large screens. It's 1 gutter space between each item.

column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
<div class="gallery-four sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
  <div class="grid-item">column 5</div>
  <div class="grid-item">column 6</div>
  <div class="grid-item">column 7</div>
  <div class="grid-item">column 8</div>
</div>

.gallery-fivewith child .grid-itemcreates a five column grid on large screens. It's 1 gutter space between each item.

It's best used in a 12 column context (full with).

column 1
column 2
column 3
column 4
column 5
column 6
column 7
column 8
column 9
column 10
<div class="gallery-five sg-visualize-grid">
  <div class="grid-item">column 1</div>
  <div class="grid-item">column 2</div>
  <div class="grid-item">column 3</div>
  <div class="grid-item">column 4</div>
  <div class="grid-item">column 5</div>
  <div class="grid-item">column 6</div>
  <div class="grid-item">column 7</div>
  <div class="grid-item">column 8</div>
  <div class="grid-item">column 9</div>
  <div class="grid-item">column 10</div>
</div>

Containers

Student page equal height

Søk

Se alle emner
Fronter Time- og eksamensplan

Snarveier

Athens studentportal 
<div class="center-wrapper">
  <div class="grid-two-cell">
    <div class="grid-item box-border-padding widget-title-style-simple">
      <div class="panel-pane">
        <h2 class="pane-title">Søk</h2>
        <form class="with-link">
          <div class="field-label-wrap">
            <label for="input-text" class="visuallyhidden">Søk</label>
            <div class="inset-btn">
              <input type="search" id="input-text" placeholder="Søk i emner" class="input-grey" />
              <button type="submit" class="btn-search">
                <span class="visuallyhidden">Søk</span>
              </button>
            </div>
            <a href="" class="more-link">Se alle emner</a>
          </div>
        </form>
      </div>
      <div class="panel-pane">
        <div class="clearfix">
          <div class="buttonrow-inline">
            <a class="btn-cta">
              <span class="fa fa-folder-open"></span>Fronter</a>
            <a class="btn-cta">
              <span class="fa fa-table"></span>Time- og eksamensplan</a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item box-border-padding widget-title-style-simple">
      <div class="panel-pane">
        <h2 class="pane-title">Snarveier</h2>
        <div class="linklist-arrow linklist-item">
          <ul class="list">
            <li>
              <a href="">Bachelor og master</a>
            </li>
            <li>
              <a href="">Forskerutdanning</a>
            </li>
            <li>
              <a href="">Etter- og videreutdanning</a>
            </li>
            <li>
              <a href="">Enkeltemner</a>
            </li>
            <li>
              <a href="">Øvrige studier</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="panel-pane">
        <div class="clearfix">
          <div class="buttonrow-inline">
            <a class="btn-cta">
              <span class="fa fa-external-link"></span>Athens studentportal</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Studies page equal height

Studieprogrammer innen fagområder

Studieprogrammer på ulike studienivå

Studieguiden Slik søker du opptak

Emner

Se alle emner

Akademisk kalender

<div class="center-wrapper">
  <div class="grid-two-cell">
    <div class="grid-item box-border-padding widget-title-style-simple">
      <div class="panel-pane">
        <h2 class="pane-title">Studieprogrammer innen fagområder</h2>
        <div class="pane-content">
          <div class="linklist-dropdown linklist-item js-list-dropdown">
            <ul class="list">
              <li>
                <a href="">Akvakultur, husdyr- og landbruksfag</a>
              </li>
              <li>
                <a href="">Lærer- og lektorutdanning</a>
              </li>
              <li>
                <a href="">Matematikk, natur- og realfag</a>
              </li>
              <li>
                <a href="">Samfunnsfag</a>
              </li>
              <li>
                <a href="">Teknologi, sivilingeniør og arkitektur</a>
              </li>
              <li>
                <a href="">Veterinærmedisin, dyrepleie og helsefag</a>
              </li>
              <li>
                <a href="">Økonomi og administrasjon</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="panel-pane">
        <h2 class="pane-title">Studieprogrammer på ulike studienivå</h2>
        <div class="linklist-arrow linklist-item">
          <ul class="list">
            <li>
              <a href="">Bachelor og master</a>
            </li>
            <li>
              <a href="">Forskerutdanning</a>
            </li>
            <li>
              <a href="">Etter- og videreutdanning</a>
            </li>
            <li>
              <a href="">Enkeltemner</a>
            </li>
            <li>
              <a href="">Øvrige studier</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="panel-pane">
        <div class="clearfix">
          <div class="buttonrow-inline">
            <a href="" class="btn-cta">
              <span class="fa fa-file-pdf-o"></span>Studieguiden</a>
            <a href="" class="btn-cta">
              <span class="fa fa-pencil"></span>Slik søker du opptak</a>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-item box-border-padding widget-title-style-simple">
      <div class="panel-pane">
        <h2 class="pane-title">Emner</h2>
        <form class="with-link">
          <div class="field-label-wrap">
            <label for="input-text" class="visuallyhidden">Søk</label>
            <div class="inset-btn">
              <input type="search" id="input-text" placeholder="Søk i emner" class="input-grey" />
              <button type="submit" class="btn-search">
                <span class="visuallyhidden">Søk</span>
              </button>
            </div>
            <a href="" class="more-link">Se alle emner</a>
          </div>
        </form>
      </div>
      <div class="panel-pane">
        <h2 class="pane-title">Akademisk kalender</h2>
        <ul class="calendar-list">
          <li href="href" class="calendar-item">
            <a href="href">
              <time datetime="datetime" class="date">30
                <span>feb</span>
              </time>
              <p class="title">Lorem ipsum dolor</p>
              <p class="desc">Sed auctor nibh eu arcu feugiat lorem ipsum dolor sit amet</p>
            </a>
          </li>
          <li href="href" class="calendar-item">
            <a href="href">
              <time datetime="datetime" class="date">02
                <span>Mar</span>
              </time>
              <p class="title">Lorem ipsum dolor that has a bit longer title</p>
              <p class="desc">Sed auctor nibh eu arcu feugiat lorem ipsum dolor sit amet</p>
            </a>
          </li>
          <li href="href" class="calendar-item">
            <a href="href">
              <time datetime="datetime" class="date">15
                <span>Apr</span>
              </time>
              <p class="title">Lorem ipsum dolor</p>
              <p class="desc">Sed auctor nibh eu arcu feugiat</p>
            </a>
          </li>
          <div class="view-calendar">
            <div class="view-footer">
              <p class="widget-more-link">
                <a href="#">Se alle kalenderoppføringer</a>
              </p>
            </div>
          </div>
        </ul>
      </div>
    </div>
  </div>
</div>

Component

Field Label

Field block label
Field content
Field inline label
Field content
Field content
<div class="field field-label-above">
  <div class="field-label">Field block label</div>
  <div class="field-items">
    <div class="field-item even">Field content</div>
  </div>
</div>
<div class="field field-label-inline">
  <div class="field-label">Field inline label</div>
  <div class="field-items">
    <div class="field-item even">Field content</div>
    <div class="field-item odd">Field content</div>
  </div>
</div>

Teaser

Teaser adjacent

.teaser-adjacentwith children elements .title, .descand .readmore 

<div class="l-container">
  <div class="l-content-left">
    <article class="teaser-adjacent">
      <a href="">
        <img src="http://www.nmbu.no/sites/default/files/styles/artikkel-liste/public/lundefuglen.jpg" />
      </a>
      <h1 class="title">
        <a href="">Åpent møte om "Verdsetting av naturen"</a>
      </h1>
      <div class="desc">
        <p>Professor ved Handelshøyskolen, Ståle Navrud og professor ved Institutt for internasjonale miljø- og utviklingsstudier,
          Arild Vatn, skal innlede...</p>
        <a href="" class="readmore">Les mer</a>
      </div>
    </article>
  </div>
</div>

Teaser stack

.teaser-stackwith child elements .title, .desc, and .readmore. Will usually live inside a smaller container like .grid-two> .grid-item 

<div class="l-container">
  <div class="l-content-left">
    <div class="grid-two">
      <div class="grid-item">
        <article class="teaser-stack">
          <img src="http://www.nmbu.no/sites/default/files/styles/forskningsartikler_instituttforside/public/norges-foerste-oljefelt1_large.jpg"
          class="img" />
          <h1 class="title">
            <a href="">Åpent møte om "Verdsetting av naturen"</a>
          </h1>
          <div class="desc">
            <p>Professor ved Handelshøyskolen, Ståle Navrud og professor ved Institutt for internasjonale miljø- og utviklingsstudier,
              Arild Vatn, skal innlede...</p>
            <a href="" class="readmore">Les mer</a>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

Teaser stack - Large

.teaser-stack--largeinherits most styles from .teasser-stack, but it has some typographic adjustments.

It should not be put into a small container like .teaser-stack.

<div class="l-container">
  <div class="l-content-left">
    <article class="teaser-stack--large">
      <img src="http://www.nmbu.no/sites/default/files/styles/forskningsartikler_instituttforside/public/norges-foerste-oljefelt1_large.jpg"
      class="img" />
      <h1 class="title">
        <a href="">Åpent møte om "Verdsetting av naturen"</a>
      </h1>
      <div class="desc">
        <p>Professor ved Handelshøyskolen, Ståle Navrud og professor ved Institutt for internasjonale miljø- og utviklingsstudier,
          Arild Vatn, skal innlede...</p>
        <a href="" class="readmore">Les mer</a>
      </div>
    </article>
  </div>
</div>

Message banner

.msg-bannerContains title and text from wysiwyg editor.

Maecenas scelerisque

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.

Magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

Les mer om maecenas her 

<div class="l-container">
  <div class="msg-banner">
    <h1 class="title">Maecenas scelerisque</h1>
    <div class="body">
      <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>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>
        <a href="" class="readmore">Les mer om maecenas her</a>
      </p>
    </div>
  </div>
</div>

Hero banner square

.hero-banner-squareis based on .hero-bannerwhich got the base style used on this and the future .hero-banner-landscapeversion. Most styles are specific to the widget, but the .topic-teaserare seperated to it's own component.

NOTE: The .textboxelement will only be visible on larger screens.

Fortsatt mulig å bli student

Ledige studieplasser 

<div class="hero-banner-square">
  <div class="img-wrapper">
    <img src="https://cldup.com/K22aEWPQeJ.jpg" />
    <div class="img-text">
      <p>Fortsatt mulig å bli student</p>
      <p>
        <a href="href">Ledige studieplasser</a>
      </p>
    </div>
  </div>
  <div class="textbox">
    <ul class="gallery-topic list-reset">
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Bioøkonomi</h3>
          <p>Biogass, avfall og ressurs</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Dyr</h3>
          <p>Veterinærmedisin
            <br/>Husdyr</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Landskap</h3>
          <p>Areal
            <br/>Arkitektur</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Mat</h3>
          <p>Landbruk
            <br/>Akvakultur</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Miljø</h3>
          <p>Klima
            <br/>Energi</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Planter</h3>
          <p>Skog
            <br/>Korn</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Teknologi</h3>
          <p>Biovitenskap
            <br/>Realfag</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Økonomi</h3>
          <p>Samfunn
            <br/>Utviling</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Hero banner landscape

.hero-banner-landscapeis a version of front page banner. See comment on Hero banner square

Fortsatt mulig å bli student

Ledige studieplasser 

<div class="hero-banner-landscape">
  <div class="img-wrapper">
    <img src="https://cldup.com/xilKxPHgC2.jpg" />
    <div class="img-text">
      <p>Fortsatt mulig å bli student</p>
      <p>
        <a href="href">Ledige studieplasser</a>
      </p>
    </div>
  </div>
  <div class="textbox">
    <ul class="gallery-topic list-reset">
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Bioøkonomi</h3>
          <p>Biogass, avfall og ressurs</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Dyr</h3>
          <p>Veterinærmedisin
            <br/>Husdyr</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Landskap</h3>
          <p>Areal
            <br/>Arkitektur</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Mat</h3>
          <p>Landbruk
            <br/>Akvakultur</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Miljø</h3>
          <p>Klima
            <br/>Energi</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Planter</h3>
          <p>Skog
            <br/>Korn</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Teknologi</h3>
          <p>Biovitenskap
            <br/>Realfag</p>
        </a>
      </li>
      <li class="topic-teaser grid-item">
        <a href="href">
          <h3 class="title">Økonomi</h3>
          <p>Samfunn
            <br/>Utviling</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Add .mod-banner-large-onlyto only show .textboxon larger screens. The class needs to be inserted at a higher level then .textbox.

Misc

Hyphen separator

.hyphenadds a top offset hypen on the left side of attached element. It's commonly used on section titles, but can also be added to other elements. On smaller screens it creates a top border and spacing

A random element

 
<ple>
  <div class="grid-three sg-visualize-grid hyphen">
    <div class="grid-item">
      <p>A random element</p>
    </div>
  </div>
</ple>

.linkboxwith child .linkbox-item. The parent class desides how each item will look like, and there is a variant .linkbox-large-textthat have larger text.

Background image, description, black text and dark background filter is optional.

Commonly used on of the link box widgets

CERAD - Centre for Environmental Radioactivity
Studere i utlandet?

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida

Foods of Norway
Smådyrklinikken
Smådyrklinikken 
<div class="l-container">
  <div class="gallery-three linkbox">
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <span class="text">CERAD - Centre for Environmental Radioactivity</span>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <span class="text black">Studere i utlandet?</span>
        </a>
        <div class="desc">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida</p>
        </div>
      </div>
    </div>
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
          />
          <span class="text">Foods of Norway</span>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <img src="http://www.nmbu.no/sites/default/files/styles/lenkebokser_med_bilde/public/Fotoarkivet/NMBU-040837.jpg"
          />
          <span class="text">Smådyrklinikken</span>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <img src="http://www.nmbu.no/sites/default/files/styles/lenkebokser_med_bilde/public/Fotoarkivet/NMBU-040837.jpg"
          />
          <span class="text bg-dark">Smådyrklinikken</span>
        </a>
      </div>
    </div>
  </div>
</div>

Link box large text

.linkbox-large-textss the same as linkbox, but with larger text.

CERAD - Centre for Environmental Radioactivity
Foods of Norway 
<div class="l-container">
  <div class="gallery-three linkbox-large-text">
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <span class="text">CERAD - Centre for Environmental Radioactivity</span>
        </a>
      </div>
    </div>
    <div class="grid-item">
      <div class="linkbox-item">
        <a href="" class="link">
          <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
          />
          <span class="text">Foods of Norway</span>
        </a>
      </div>
    </div>
  </div>
</div>

Fact box

.factbox-itemwith optional img and white text color. Default color is black.

64studieprogram

5000studenter

<div class="l-container">
  <div class="gallery-four factbox">
    <div class="grid-item">
      <div class="factbox-item">
        <p class="text">
          <span class="data">64</span>studieprogram</p>
      </div>
    </div>
    <div class="grid-item">
      <div class="factbox-item">
        <div class="img">
          <img src="https://infinit.io/link/Frank_Gjertsen/SavzuVV.jpg" />
        </div>
        <p class="text">
          <span class="data">5000</span>studenter</p>
      </div>
    </div>
  </div>
</div>

.linklistis used to create a list of links. It's commonly used in Link list widget.

<div class="l-container">
  <div class="l-content-left">
    <div class="linklist linklist-item">
      <ul class="list">
        <li>
          <a href="">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Link liste with title is the same as without, but a title with class .titleis added as a child to .linklist-item

Fakultet for samfunnsvitenskap

<div class="l-container">
  <div class="l-content-left">
    <div class="linklist linklist-item">
      <h3 class="title">Fakultet for samfunnsvitenskap</h3>
      <ul class="list">
        <li>
          <a href="">Handelshøyskolen</a>
        </li>
        <li>
          <a href="">Internasjonale miljø- og utviklingsstudier</a>
        </li>
        <li>
          <a href="">Landskapsplanlegging</a>
        </li>
      </ul>
    </div>
  </div>
</div>

.linklist-arrowis based upon .linklist, but with additional border between links and with a arrow on the right side. .linklist-arrowclass is added with .linklist-itemor as a parent class.

Studieprogrammer på ulike studienivå

<div class="l-container">
  <div class="l-content-left">
    <div class="linklist-arrow linklist-item">
      <h3 class="title">Studieprogrammer på ulike studienivå</h3>
      <ul class="list">
        <li>
          <a href="">Bachelor og master</a>
        </li>
        <li>
          <a href="">Forskerutdanning</a>
        </li>
        <li>
          <a href="">Etter- og videreutdanning</a>
        </li>
        <li>
          <a href="">Enkeltemner</a>
        </li>
        <li>
          <a href="">Øvrige studier</a>
        </li>
      </ul>
    </div>
  </div>
</div>

.linklist-metais based upon .linklist, but with additional border between links and meta information wrapped in spanelements after span.item-title 

<div class="linklist-meta linklist-item">
  <ul class="list">
    <li>
      <a href="">
        <span class="item-title">Agroecology</span>
        <span>Master of science</span>
        <span>2 years</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="item-title">Animal Breeding and Genetics</span>
        <span>Master of science</span>
        <span>2 years</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="item-title">Anvendt robotikk - teknologi (sivilingeniør)</span>
        <span>Master</span>
        <span>5 år heltid</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="item-title">Aquaculture</span>
        <span>Master of science</span>
        <span>2 years</span>
      </a>
    </li>
    <li>
      <a href="">
        <span class="item-title">Aquatic Food Production - Safety and Quality (AQFood)</span>
        <span>Master of science</span>
        <span>2 years</span>
      </a>
    </li>
  </ul>
</div>

.linklist-dropdownis based upon .linklist, but with additional script that collaps the list. .linklist-dropdownclass is added with .linklist-itemor as a parent class, and .js-list-dropdownis added together with .linklist-item.

Studieprogrammer innen fagområder

<div class="l-container">
  <div class="l-content-left">
    <div class="linklist-dropdown linklist-item js-list-dropdown">
      <h3 class="title">Studieprogrammer innen fagområder</h3>
      <ul class="list">
        <li>
          <a href="">Akvakultur, husdyr- og landbruksfag</a>
        </li>
        <li>
          <a href="">Lærer- og lektorutdanning</a>
        </li>
        <li>
          <a href="">Matematikk, natur- og realfag</a>
        </li>
        <li>
          <a href="">Samfunnsfag</a>
        </li>
        <li>
          <a href="">Teknologi, sivilingeniør og arkitektur</a>
        </li>
        <li>
          <a href="">Veterinærmedisin, dyrepleie og helsefag</a>
        </li>
        <li>
          <a href="">Økonomi og administrasjon</a>
        </li>
      </ul>
    </div>
  </div>
</div>

.linklist-dropdown.oulineis a outline version of Link list dropdown.

Studieprogrammer innen fagområder

<div class="l-container">
  <div class="l-content-left">
    <div class="linklist-dropdown outline linklist-item js-list-dropdown">
      <h3 class="title">Studieprogrammer innen fagområder</h3>
      <ul class="list">
        <li>
          <a href="">Akvakultur, husdyr- og landbruksfag</a>
        </li>
        <li>
          <a href="">Lærer- og lektorutdanning</a>
        </li>
        <li>
          <a href="">Matematikk, natur- og realfag</a>
        </li>
        <li>
          <a href="">Samfunnsfag</a>
        </li>
        <li>
          <a href="">Teknologi, sivilingeniør og arkitektur</a>
        </li>
        <li>
          <a href="">Veterinærmedisin, dyrepleie og helsefag</a>
        </li>
        <li>
          <a href="">Økonomi og administrasjon</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Tree accordion

<ul class="tree-accordion">
  <li class="loaded closed">
    <div class="link-wrapper">
      <a data-mmtid="80" href="/om" class="icon">
        <span class="placeholder">&nbsp;</span>
      </a>
      <a data-mmtid="80" href="/om">Administrasjon</a>
    </div>
    <ul>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="1898" href="/om/sidebar">sidebar</a>
        </div>
      </li>
    </ul>
  </li>
  <li class="loaded loading opened">
    <div class="link-wrapper">
      <a data-mmtid="80" href="/om" class="icon">
        <span class="placeholder">&nbsp;</span>
      </a>
      <a data-mmtid="80" href="/om">Om NMBU</a>
      <a href="" class="readmore">Mer</a>
    </div>
    <ul>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="1898" href="/om/sidebar" class="icon">
            <span class="placeholder">&nbsp;</span>
          </a>
          <a data-mmtid="1898" href="/om/sidebar">sidebar</a>
        </div>
      </li>
      <li class="loaded opened">
        <div class="link-wrapper">
          <a data-mmtid="1861" href="/om/fakulteter" class="icon">
            <span class="placeholder">&nbsp;</span>
          </a>
          <a data-mmtid="1861" href="/om/fakulteter">Fakulteter og institutter</a>
          <a href="href" class="readmore">Mer</a>
        </div>
        <ul>
          <li class="opened loaded">
            <div class="link-wrapper">
              <a data-mmtid="1879" href="/om/fakulteter/miljotek" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="1879" href="/om/fakulteter/miljotek">Fakultet for milj&oslash;vitenskap og teknologi (Milj&oslash;tek)</a>
              <a href="href" class="readmore">Mer</a>
            </div>
            <ul>
              <li class="opened loaded">
                <div class="link-wrapper">
                  <a data-mmtid="18006" href="/om/fakulteter/miljotek/om" class="icon">
                    <span class="placeholder">&nbsp;</span>
                  </a>
                  <a data-mmtid="18006" href="/om/fakulteter/miljotek/om">Om Milj&oslash;tek</a>
                  <a href="href" class="readmore">Mer</a>
                </div>
                <ul>
                  <li class="loaded closed">
                    <div class="link-wrapper">
                      <a data-mmtid="3814" href="/om/fakulteter/miljotek/om/Fakultetsstyret" class="icon">
                        <span class="placeholder">&nbsp;</span>
                      </a>
                      <a data-mmtid="3814" href="/om/fakulteter/miljotek/om/Fakultetsstyret">Fakultetsstyret</a>
                    </div>
                    <ul>
                      <li class="is-leaf">
                        <div class="link-wrapper">
                          <a data-mmtid="17058" href="/om/fakulteter/miljotek/om/Fakultetsstyret/styremoter-2015" class="icon">
                            <span class="placeholder">&nbsp;</span>
                          </a>
                          <a data-mmtid="17058" href="/om/fakulteter/miljotek/om/Fakultetsstyret/styremoter-2015">Styrem&oslash;ter 2015</a>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li class="opened loaded">
                    <div class="link-wrapper">
                      <a data-mmtid="18010" href="/om/fakulteter/miljotek/om/idf" class="icon">
                        <span class="placeholder">&nbsp;</span>
                      </a>
                      <a data-mmtid="18010" href="/om/fakulteter/miljotek/om/idf">Info- og dr&oslash;ftingsm&oslash;ter</a>
                      <a href="href" class="readmore">Mer</a>
                    </div>
                    <ul>
                      <li class="is-leaf">
                        <div class="link-wrapper">
                          <a data-mmtid="18011" href="/om/fakulteter/miljotek/om/idf/2015" class="icon">
                            <span class="placeholder">&nbsp;</span>
                          </a>
                          <a data-mmtid="18011" href="/om/fakulteter/miljotek/om/idf/2015">2015</a>
                        </div>
                      </li>
                      <li class="hidden-entry is-leaf">
                        <div class="link-wrapper">
                          <a data-mmtid="18012" href="/om/fakulteter/miljotek/om/idf/2014" class="icon">
                            <span class="placeholder">&nbsp;</span>
                          </a>
                          <a data-mmtid="18012" href="/om/fakulteter/miljotek/om/idf/2014">2014 .</a>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="loaded closed">
        <div class="link-wrapper">
          <a data-mmtid="2383" href="/om/universitetsstyret" class="icon">
            <span class="placeholder">&nbsp;</span>
          </a>
          <a data-mmtid="2383" href="/om/universitetsstyret">Universitetsstyret</a>
        </div>
        <ul>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="1910" href="/om/universitetsstyret/styremedlemmer" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="1910" href="/om/universitetsstyret/styremedlemmer">Styremedlemmer</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="2384" href="/om/universitetsstyret/styremoter" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="2384" href="/om/universitetsstyret/styremoter">Styrem&oslash;ter</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="2812" href="/om/universitetsstyret/m_teplan_2014" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="2812" href="/om/universitetsstyret/m_teplan_2014">M&oslash;teplan 2014</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="9560" href="/om/universitetsstyret/moteplan-2015" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="9560" href="/om/universitetsstyret/moteplan-2015">M&oslash;teplan 2015</a>
            </div>
          </li>
        </ul>
      </li>
      <li class="closed">
        <div class="link-wrapper">
          <a data-mmtid="1888" href="/om/universitetsledelsen" class="icon">
            <span class="placeholder">&nbsp;</span>
          </a>
          <a data-mmtid="1888" href="/om/universitetsledelsen">Universitetsledelsen</a>
        </div>
      </li>
      <li class="loaded closed">
        <div class="link-wrapper">
          <a data-mmtid="8240" href="/om/adm" class="icon">
            <span class="placeholder">&nbsp;</span>
          </a>
          <a data-mmtid="8240" href="/om/adm">Administrasjon</a>
        </div>
        <ul>
          <li class="opened loaded">
            <div class="link-wrapper">
              <a data-mmtid="15177" href="/om/adm/fr" class="icon">
                <span class="placeholder">&nbsp;</span>
              </a>
              <a data-mmtid="15177" href="/om/adm/fr">Felles ressurssenter</a>
            </div>
            <ul>
              <li class="opened loaded">
                <div class="link-wrapper">
                  <a data-mmtid="15178" href="/om/adm/fr/dokumentsentret" class="icon">
                    <span class="placeholder">&nbsp;</span>
                  </a>
                  <a data-mmtid="15178" href="/om/adm/fr/dokumentsentret">Dokumentsentret</a>
                </div>
                <ul>
                  <li class="is-leaf">
                    <div class="link-wrapper">
                      <a data-mmtid="15180" href="/om/adm/fr/dokumentsentret/offentlig-journal" class="icon">
                        <span class="placeholder">&nbsp;</span>
                      </a>
                      <a data-mmtid="15180" href="/om/adm/fr/dokumentsentret/offentlig-journal">Offentlig journal</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="10349" href="/om/adm/fa">Forskningsavdelingen</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="12932" href="/om/adm/it">IT-avdelingen</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="363" href="/om/adm/ka">Kommunikasjonsavdelingen</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="48" href="/om/adm/poa">Personal- og organisasjonsavdelingen</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="10348" href="/om/adm/sevu">Senter for etter- og videreutdanning</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="10350" href="/om/adm/sa">Studieavdelingen</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="11057" href="/om/adm/ta">Teknisk avdeling</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="10657" href="/om/adm/biblioteket">Universitetsbiblioteket</a>
            </div>
          </li>
          <li class="closed">
            <div class="link-wrapper">
              <a data-mmtid="11366" href="/om/adm/okonomi">&Oslash;konomiavdelingen</a>
            </div>
          </li>
        </ul>
      </li>
      <li class="loaded closed">
        <div class="link-wrapper">
          <a data-mmtid="5084" href="/om/utvalg">Utvalg</a>
        </div>
        <ul>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="5086" href="/om/utvalg/forskningsutvalget">Forskningsutvalget</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="5087" href="/om/utvalg/lmu">L&aelig;ringsmilj&oslash;utvalget</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="5085" href="/om/utvalg/studieutvalget">Studieutvalget</a>
            </div>
          </li>
          <li class="hidden-entry is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="5182" href="/om/utvalg/amu">Arbeidsmilj&oslash;utvalget.</a>
            </div>
          </li>
        </ul>
      </li>
      <li class="loaded closed">
        <div class="link-wrapper">
          <a data-mmtid="2076" href="/om/ledige-stillinger">Ledige stillinger</a>
        </div>
        <ul>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="2218" href="/om/ledige-stillinger/sidebar">(new page)</a>
            </div>
          </li>
          <li class="is-leaf">
            <div class="link-wrapper">
              <a data-mmtid="2221" href="/om/ledige-stillinger/statens-pensjonskasse">Statens pensjonskasse</a>
            </div>
          </li>
        </ul>
      </li>
      <li class="closed">
        <div class="link-wrapper">
          <a data-mmtid="17038" href="/om/miljoarbeidet">Milj&oslash;arbeidet</a>
        </div>
      </li>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="17768" href="/om/orgkart">Organisasjonskart (pdf)</a>
        </div>
      </li>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="16320" href="/om/strategi">Strategidokument (pdf)</a>
        </div>
      </li>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="6681" href="/om/aarsrapporter">&angst;rsrapporter</a>
        </div>
      </li>
      <li class="is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="17885" href="/om/erasmus">Erasmus charter for h&oslash;yere utdanning</a>
        </div>
      </li>
      <li class="closed">
        <div class="link-wrapper">
          <a data-mmtid="10960" href="/om/valg">Valg ved NMBU</a>
        </div>
      </li>
      <li class="closed">
        <div class="link-wrapper">
          <a data-mmtid="2793" href="/om/historier">Historier</a>
        </div>
      </li>
      <li class="closed hidden-entry">
        <div class="link-wrapper">
          <a data-mmtid="10815" href="/om/biblioteket">Biblioteket .</a>
        </div>
      </li>
      <li class="hidden-entry is-leaf">
        <div class="link-wrapper">
          <a data-mmtid="1891" href="/om/parkeringskart">parkeringskart .</a>
        </div>
      </li>
    </ul>
  </li>
  <li class="loaded closed">
    <div class="link-wrapper">
      <a data-mmtid="80" href="/om" class="icon">
        <span class="placeholder">&nbsp;</span>
      </a>
      <a data-mmtid="80" href="/om">Rektoratet</a>
    </div>
  </li>
  <li class="loaded closed">
    <div class="link-wrapper">
      <a data-mmtid="80" href="/om" class="icon">
        <span class="placeholder">&nbsp;</span>
      </a>
      <a data-mmtid="80" href="/om">Fakulteter og institutter</a>
    </div>
  </li>
</ul>

Calendar

<time datetime="datetime" class="date">30
  <span>feb</span>
</time>

Calendar list

.calendar-listList of events including day, month and title.

<ul class="calendar-list">
  <li href="href" class="calendar-item">
    <a href="href">
      <time datetime="datetime" class="date">30
        <span>feb</span>
      </time>
      <h3 class="title">Lorem ipsum dolor</h3>
      <div class="field field-label-hidden">
        <div class="field-label"></div>
        <div class="field-items">
          <div class="field-item">Konferanse</div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Sted</div>
        <div class="field-items">
          <div class="field-item">Økonomibygningen</div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Kl.</div>
        <div class="field-items">
          <div class="field-item">11:15</div>
        </div>
      </div>
    </a>
  </li>
  <li href="href" class="calendar-item">
    <a href="href">
      <time datetime="datetime" class="date">02
        <span>Mar</span>
      </time>
      <h3 class="title">Lorem ipsum dolor that has a bit longer title</h3>
      <div class="field field-label-hidden">
        <div class="field-label"></div>
        <div class="field-items">
          <div class="field-item">
            <p>Test is scheduled to this date</p>
          </div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Sted</div>
        <div class="field-items">
          <div class="field-item">Økonomibygningen</div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Kl.</div>
        <div class="field-items">
          <div class="field-item">11:15</div>
        </div>
      </div>
    </a>
  </li>
  <li href="href" class="calendar-item">
    <a href="href">
      <time datetime="datetime" class="date">15
        <span>Apr</span>
      </time>
      <h3 class="title">Lorem ipsum dolor</h3>
      <div class="field field-label-hidden">
        <div class="field-label"></div>
        <div class="field-items">
          <div class="field-item">Konferanse</div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Sted</div>
        <div class="field-items">
          <div class="field-item">Økonomibygningen</div>
        </div>
      </div>
      <div class="field field-label-inline">
        <div class="field-label">Kl.</div>
        <div class="field-items">
          <div class="field-item">11:15</div>
        </div>
      </div>
    </a>
  </li>
  <div class="view-calendar">
    <div class="view-footer">
      <p class="widget-more-link">
        <a href="#">Se alle kalenderoppføringer</a>
      </p>
    </div>
  </div>
</ul>

Profile preview

.profile-previewgot three columns .col-1, .col-2and .col-3. Content inside the columns are .img, .name, ul.contact-infoand ul.reference.

<article class="profile-preview">
  <div class="col-1">
    <div class="img">
      <a>
        <img src="https://infinit.io/link/Frank_Gjertsen/3m7jSJH.png" />
      </a>
    </div>
    <h1 class="name">
      <a href="href">Karianne Elise Nordmann</a>
    </h1>
    <p class="position">Stillingstittel</p>
  </div>
  <div class="col-2">
    <ul class="contact-info">
      <li>Tel. 67 56 64 87</li>
      <li>Mob. 934 52 632</li>
      <li>
        <a href="mailto:karianne.elise.nordmann@nmbu.no">karianne.elise.nordmann@nmbu.no</a>
      </li>
    </ul>
  </div>
  <div class="col-3">
    <ul class="reference">
      <li>
        <a href="href">Fakultet for veterinærmedisin og biovitenskap</a>
      </li>
    </ul>
  </div>
</article>
<article class="profile-preview">
  <div class="col-1">
    <div class="img">
      <a>
        <img src="https://infinit.io/link/Frank_Gjertsen/xB6bLUw.png" />
      </a>
    </div>
    <h1 class="name">
      <a href="href">Nina Elisabethsson</a>
    </h1>
    <p class="position">Stillingstittel</p>
  </div>
  <div class="col-2">
    <ul class="contact-info">
      <li>Tel. 67 56 64 87</li>
      <li>Mob. 934 52 632</li>
      <li>
        <a href="mailto:nina.elisabethsson@nmbu.no">nina.elisabethsson@nmbu.no</a>
      </li>
    </ul>
  </div>
  <div class="col-3">
    <ul class="reference">
      <li>
        <a href="href">Institutt for kjemi, biotekniologi og batvitenskap</a>
      </li>
    </ul>
  </div>
</article>
<article class="profile-preview">
  <div class="col-1">
    <div class="img">
      <a>
        <img src="https://infinit.io/link/Frank_Gjertsen/KQ7Fb8r.png" />
      </a>
    </div>
    <h1 class="name">
      <a href="href">Stein Moe</a>
    </h1>
    <p class="position">Stillingstittel</p>
  </div>
  <div class="col-2">
    <ul class="contact-info">
      <li>Mob. 934 52 632</li>
      <li>
        <a href="mailto:stein.moe@nmbu.no">stein.moe@nmbu.no</a>
      </li>
    </ul>
  </div>
  <div class="col-3">
    <ul class="reference">
      <li>
        <a href="href">Kommunikasjonsavdelingen</a>
      </li>
    </ul>
  </div>
</article>

.quicklinksis set up with three links in a ul. A magnifying class is automaticly added on a :beforeelement.

<div class="quicklinks">
  <ul>
    <li>
      <a href="href">Finn studieprogram</a>
    </li>
    <li>
      <a href="href">Finn enkeltelementer</a>
    </li>
    <li>
      <a href="href">Finn ansatte</a>
    </li>
  </ul>
</div>

Widget

.linkboxis parent for each linkbox-item. widget-titleand widget-introis optional widget elements on linkbox widget.

Forskning ved sentrene

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.

<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-left">
      <div class="panel-pane">
        <div class="gallery-two linkbox">
          <h2 class="widget-title">Forskning ved sentrene</h2>
          <div class="widget-intro">
            <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.</p>
          </div>
          <div>
            <div class="grid-item">
              <div class="linkbox-item">
                <a href="" class="link">
                  <span class="text">CERAD - Centre for Environmental Radioactivity</span>
                </a>
              </div>
            </div>
            <div class="grid-item">
              <div class="linkbox-item">
                <a href="" class="link">
                  <span class="text">Foods of Norway</span>
                </a>
              </div>
            </div>
            <div class="grid-item">
              <div class="linkbox-item">
                <a href="" class="link">
                  <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                  />
                  <span class="text">CENBIO - Bioenergy Innovation Center, FME</span>
                </a>
              </div>
            </div>
            <div class="grid-item">
              <div class="linkbox-item">
                <a href="" class="link">
                  <span class="text">Andre sentre og satsninger</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Link box large text widget

Forskningsprosjekter
Forskningsgrupper
Forskningslaboratorier
Finn en ekspert 
<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-left">
      <div class="gallery-two linkbox-large-text hyphen">
        <div class="wrapper">
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <span class="text">Forskningsprosjekter</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
              </a>
              <span class="text">Forskningsgrupper</span>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <span class="text">Forskningslaboratorier</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <span class="text">Finn en ekspert</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Link box large text three columns widget

Forskerfinansiering
Forskermobilitet
Publiserings-ABC
Forskningsetikk
Rårdgivning og juridisk bistand
Forskningsutvalget (FU) 
<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-bottom">
      <div class="gallery-three linkbox-large-text">
        <div class="wrapper">
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Forskerfinansiering</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Forskermobilitet</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Publiserings-ABC</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Forskningsetikk</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Rårdgivning og juridisk bistand</span>
              </a>
            </div>
          </div>
          <div class="grid-item">
            <div class="linkbox-item">
              <a href="" class="link">
                <img src="http://nmbu.joubel.com/sites/default/files/styles/lenkebokser_med_bilde/public/lenkebose-test-korn.jpg"
                />
                <span class="text">Forskningsutvalget (FU)</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.linklistis set into a two column gallery grid and a .widget-title

Publikasjoner ved NMBU

<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-left">
      <div class="panel-pane">
        <div class="gallery-two linklist">
          <h2 class="widget-title">Publikasjoner ved NMBU</h2>
          <div>
            <div class="grid-item linklist-item">
              <ul class="list">
                <li>
                  <a href="">Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</a>
                </li>
              </ul>
            </div>
            <div class="grid-item linklist-item">
              <ul class="list">
                <li>
                  <a href="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                </li>
              </ul>
            </div>
            <div class="grid-item linklist-item">
              <ul class="list">
                <li>
                  <a href="">Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.linklistis set into a two column gallery grid and a .widget-title. It also have a .titlefor each list group.

Forskning ved instituttene

<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-left">
      <div class="panel-pane">
        <div class="gallery-two linklist">
          <h2 class="widget-title">Forskning ved instituttene</h2>
          <div>
            <div class="grid-item linklist-item">
              <h3 class="title">Fakultet for samfunnsvitenskap</h3>
              <ul class="list">
                <li>
                  <a href="">Handelshøyskolen</a>
                </li>
                <li>
                  <a href="">Internasjonale miljø- og utviklingsstudier</a>
                </li>
                <li>
                  <a href="">Landskapsplanlegging</a>
                </li>
              </ul>
            </div>
            <div class="grid-item linklist-item">
              <h3 class="title">Fakultet for miljøvitenskap og teknologi</h3>
              <ul class="list">
                <li>
                  <a href="">Matematiske realfag og teknologi</a>
                </li>
                <li>
                  <a href="">Miljøvitenskap</a>
                </li>
                <li>
                  <a href="">Naturforvaltning</a>
                </li>
              </ul>
            </div>
            <div class="grid-item linklist-item">
              <h3 class="title">Fakultet for veterinærmedisin og biovitenskap</h3>
              <ul class="list">
                <li>
                  <a href="">Basalfag og akvamedisin</a>
                </li>
                <li>
                  <a href="">Husdyr- og akvakulturvitenskap</a>
                </li>
                <li>
                  <a href="">Kjemi, bioteknologi og matvitensap</a>
                </li>
                <li>
                  <a href="">Mattrygghet og infeksjonsbiologi</a>
                </li>
                <li>
                  <a href="">Plantevitenskap</a>
                </li>
                <li>
                  <a href="">ProdMed</a>
                </li>
                <li>
                  <a href="">Sports- og familiedyrmedisin</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.linklist-publicationis visually similar to regular Link list, but markup is different. Layout can be set to different gallery columns.

Publikasjoner ved NMBU

<div class="l-container">
  <div class="center-wrapper">
    <div class="l-content-left">
      <div class="panel-pane">
        <div class="gallery-two">
          <h2 class="widget-title">Publikasjoner ved NMBU</h2>
          <ul class="linklist-publication">
            <li class="linklist-item grid-item">
              <h3 class="title">
                <a href="href">NFEKCIJA OVACA SA Strongyloides papillosus – UTICAJ INTENZITETA PARAZITSKE INFEKCIJE I TERAPIJE ALBENDAZOLOM
                  NA ODREĐENE BIOHEMIJSKE PARAMETRE U KRVI OVAC</a>
              </h3>
              <p>
                <strong class="label">Forfattere:</strong>Dimitrijević, B., Jezdimirović, Milanka, Bacić, D., Savić, Mila, Jezdimirović, N., Vegara,
                Mensur</p>
              <p>
                <strong class="label">I tidsskrift:</strong>Veterinarski Glasnik, issn: 0350-2457</p>
              <p>
                <strong class="label">Dato registrert:</strong>11-06-2015</p>
            </li>
            <li class="linklist-item grid-item">
              <h3 class="title">How planners' use and non-use of expert knowledge affect the goal achievement potential of plans: Experiences
                from strategic land-use and transport planning processes in three Scandinavian cities</h3>
              <p>
                <strong class="label">Forfattere:</strong>Tennøy, Aud, Hansson, Lisa, Lissandrello, Enza, Næss, Petter</p>
              <p>
                <strong class="label">I tidsskrift:</strong>
                <a href="href">Lenke til Progress in Planning, issn: 0305-9006</a>
              </p>
              <p>
                <strong class="label">Dato registrert:</strong>11-06-2015</p>
            </li>
            <li class="linklist-item grid-item">
              <h3 class="title">
                <a href="href">Justice in an Unequal Relationship? Negotiations Between the Quilombo Bombas and the Upper Ribeira State
                  Touristic Park, Brazil</a>
              </h3>
              <p>
                <strong class="label">Forfattere:</strong>Thorkildsen, Kjersti</p>
              <p>
                <strong class="label">I tidsskrift:</strong>
                <a href="href">Lenke til Society &amp; Natural Resources, issn: 0894-1920</a>
              </p>
              <p>
                <strong class="label">Dato registrert:</strong>11-06-2015</p>
            </li>
            <li class="linklist-item grid-item">
              <h3 class="title">
                <a href="href">Reflections on evolving water management institutions and institutional bricolage: a case of irrigation schemes
                  in Iringa Rural and Kilombero districts, Tanzania</a>
              </h3>
              <p>
                <strong class="label">Forfattere:</strong>Mosha, D.B., Vedeld, Pål Olav, Kajembe, G.C., Tarimo, A.K.P.R., Katani, J.Z.</p>
              <p>
                <strong class="label">I tidsskrift:</strong>
                <a href="href">Lenke til Water Policy, issn: 1366-7017</a>
              </p>
              <p>
                <strong class="label">Dato registrert:</strong>10-06-2015</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Button row

Button row - Widget F

.buttonrowA group of button links on a grid.

Campus Ås
Campus Adamstuen
Ledige stillinger 
<div class="l-container">
  <div class="l-content-top">
    <div class="grid-four-buttonrow buttonrow">
      <div class="grid-item">
        <a href="" class="btn-cta">Campus Ås</a>
      </div>
      <div class="grid-item">
        <a href="" class="btn-cta">Campus Adamstuen</a>
      </div>
      <div class="grid-item">
        <a href="" class="btn-cta">Ledige stillinger</a>
      </div>
    </div>
  </div>
</div>

Button row inline

.buttonrow-inline

Fronter Time- og eksamenspland 
<div class="l-container">
  <div class="l-content-top">
    <div class="buttonrow-inline">
      <a href="" class="btn-cta">
        <span class="fa fa-folder-open"></span>Fronter</a>
      <a href="" class="btn-cta">
        <span class="fa fa-calendar"></span>Time- og eksamenspland</a>
    </div>
  </div>
</div>

Message banner

Message banner - Widget G

.msg-bannerShould be placed withing .l-content-topto get right position and padding.

Maecenas scelerisque

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.

Magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

Les mer om maecenas her 

<div class="l-container">
  <div class="l-content-top">
    <div class="msg-banner">
      <h1 class="title">Maecenas scelerisque</h1>
      <div class="body">
        <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>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>
          <a href="" class="readmore">Les mer om maecenas her</a>
        </p>
      </div>
    </div>
  </div>
</div>

User reference

Handpicked user reference - Widget N

.widget-user-referencecombines .widget-title, .profile-previewand .widget-more-link. .widget-titlecan be with or without a link.

Ekspertise

Se flere personer 

<div class="l-container">
  <div class="l-content-center">
    <div class="panel-pane">
      <div class="widget-user-reference">
        <h2 class="widget-title">
          <a href="href">Ekspertise</a>
        </h2>
        <div>
          <article class="profile-preview">
            <div class="col-1">
              <div class="img">
                <a>
                  <img src="https://infinit.io/link/Frank_Gjertsen/3m7jSJH.png" />
                </a>
              </div>
              <h1 class="name">
                <a href="href">Karianne Elise Nordmann</a>
              </h1>
              <p class="position">Stillingstittel</p>
            </div>
            <div class="col-2">
              <ul class="contact-info">
                <li>Tel. 67 56 64 87</li>
                <li>Mob. 934 52 632</li>
                <li>
                  <a href="mailto:karianne.elise.nordmann@nmbu.no">karianne.elise.nordmann@nmbu.no</a>
                </li>
              </ul>
            </div>
            <div class="col-3">
              <ul class="reference">
                <li>
                  <a href="href">Fakultet for veterinærmedisin og biovitenskap</a>
                </li>
              </ul>
            </div>
          </article>
          <article class="profile-preview">
            <div class="col-1">
              <div class="img">
                <a>
                  <img src="https://infinit.io/link/Frank_Gjertsen/xB6bLUw.png" />
                </a>
              </div>
              <h1 class="name">
                <a href="href">Nina Elisabethsson</a>
              </h1>
              <p class="position">Stillingstittel</p>
            </div>
            <div class="col-2">
              <ul class="contact-info">
                <li>Tel. 67 56 64 87</li>
                <li>Mob. 934 52 632</li>
                <li>
                  <a href="mailto:nina.elisabethsson@nmbu.no">nina.elisabethsson@nmbu.no</a>
                </li>
              </ul>
            </div>
            <div class="col-3">
              <ul class="reference">
                <li>
                  <a href="href">Institutt for kjemi, biotekniologi og batvitenskap</a>
                </li>
              </ul>
            </div>
          </article>
          <article class="profile-preview">
            <div class="col-1">
              <div class="img">
                <a>
                  <img src="https://infinit.io/link/Frank_Gjertsen/KQ7Fb8r.png" />
                </a>
              </div>
              <h1 class="name">
                <a href="href">Stein Moe</a>
              </h1>
              <p class="position">Stillingstittel</p>
            </div>
            <div class="col-2">
              <ul class="contact-info">
                <li>Mob. 934 52 632</li>
                <li>
                  <a href="mailto:stein.moe@nmbu.no">stein.moe@nmbu.no</a>
                </li>
              </ul>
            </div>
            <div class="col-3">
              <ul class="reference">
                <li>
                  <a href="href">Kommunikasjonsavdelingen</a>
                </li>
              </ul>
            </div>
          </article>
        </div>
        <p class="widget-more-link">
          <a href="href">Se flere personer</a>
        </p>
      </div>
    </div>
  </div>
</div>

Video

Video widget

.video-widgetexpand to it's parent width. It holds the video in a div.videoand text withing a div.desc.

When it's in a grid-twoon a larger screen, the text will have some space on each side.

NMBU er universitetet som skal sikre morgendagens livsgrunnlag. Vi er studiestedet for deg som ønsker å bidra til endringer innen miljø og bærekraftig utvikling.

<div class="grid-two">
  <div class="grid-item">
    <div class="video-widget">
      <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/oh8V4Mmz-QY?rel=0&amp;amp;showinfo=0" frameborder="0"
        allowfullscreen="allowfullscreen"></iframe>
      </div>
      <div class="desc">
        <p>NMBU er universitetet som skal sikre morgendagens livsgrunnlag. Vi er studiestedet for deg som ønsker å bidra til
          endringer innen miljø og bærekraftig utvikling.</p>
      </div>
    </div>
  </div>
</div>

Video banner

.banner-videois similar to video-widget, but it also got title and style for .readmorelink.

On large screens the video itself will expand on each side.

<div class="banner-video">
  <div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oh8V4Mmz-QY?rel=0&amp;amp;showinfo=0" frameborder="0"
    allowfullscreen="allowfullscreen"></iframe>
  </div>
  <div class="title">Opplev NMBU</div>
  <div class="desc">
    <p>NMBU er universitetet som skal sikre morgendagens livsgrunnlag. Vi er studiestedet for deg som ønsker å bidra til endringer
      innen miljø og bærekraftig utvikling.</p>
    <a href="href" class="readmore">Finn ditt studie på NMBU</a>
  </div>
</div>

Drupal components

Block menu

<ul class="menu">
  <li class="expanded hidden-entry">
    <a href="/tema">Alle tema .</a>
    <ul class="menu">
      <li class="leaf">
        <a href="/tema/biookonomi">Bioøkonomi</a>
      </li>
      <li class="expanded here">
        <a href="/tema/dyr" class="active">Dyr</a>
        <ul class="menu">
          <li class="leaf">
            <a href="/tema/dyr/artikler">Artikler dyr</a>
          </li>
          <li class="leaf">
            <a href="/tema/dyr/eksperter">Eksperter dyr</a>
          </li>
          <li class="leaf">
            <a href="/tema/dyr/forskning-dyr">Forskning dyr</a>
          </li>
        </ul>
      </li>
      <li class="leaf">
        <a href="/tema/landskap">Landskap</a>
      </li>
      <li class="leaf">
        <a href="/tema/mat">Mat</a>
      </li>
      <li class="leaf">
        <a href="/tema/miljo">Miljø</a>
      </li>
      <li class="leaf">
        <a href="/tema/planter">Planter</a>
      </li>
      <li class="leaf">
        <a href="/tema/teknologi">Teknologi</a>
      </li>
      <li class="leaf">
        <a href="/tema/ekonomi">Samfunn</a>
      </li>
    </ul>
  </li>
</ul>

Navigation

Prototype of new menu - Work in Progress

Innovasjon

<div class="proto-menu-v5">
  <div class="menu-relative-wrapper">
    <ul class="menu-relative level-first">
      <li class="menu-item">
        <a href="#">For forskere</a>
      </li>
      <li class="menu-item">
        <a href="#">Forskerutdanning</a>
      </li>
      <li class="menu-item">
        <a href="#">Disputaser</a>
      </li>
      <li class="menu-item active-leaf">
        <a href="#" class="active">Innovasjon</a>
      </li>
      <li class="menu-item">
        <a href="#">EU-finansiert forskning</a>
      </li>
      <li class="menu-item">
        <a href="#" title="Internasjonalt forskningssamarbeid">Internasjonalt forskningssamarbeid</a>
      </li>
      <li class="menu-item">
        <a href="#" title="Forskning, innovasjon og eksternt samarbeid">Forskning, innovasjon og eksternt samarbeid</a>
      </li>
      <li class="menu-item">
        <a href="#">Universitetsbiblioteket</a>
      </li>
      <li class="menu-item">
        <a href="#">Matsatsingen</a>
      </li>
      <li class="menu-item">
        <a href="#">English</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Bilderull</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Forskerutdanning (eld-gammel)</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Forskning NMBU</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Forskningsavdelingen</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Forskningsinfrastruktur</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Forskningsprosjekter ved NMBU</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Fra nvh.no/forskning</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Hva skjer?</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Temaer i forskningen</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Videresending - Rådgivning</a>
      </li>
    </ul>
    <p class="level-second-title">Innovasjon</p>
    <ul class="menu-relative level-second">
      <li class="menu-item">
        <a href="#">NMBU TTO</a>
      </li>
      <li class="menu-item">
        <a href="#" class="active">Innovasjonsstrategi</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Innovasjonssenter</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Investordag</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Makerspace</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Medarbeidere</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">NMBU TTO for studenter</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Næringsliv og samarbeid</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Student og entreprenørskap</a>
      </li>
      <li class="menu-item hidden">
        <a href="#">Student og gründer</a>
      </li>
    </ul>
  </div>
</div>