Teaser

Teaser

Teaser usally have title, text and link. It could also include icon on top. It should live in a narrow container.

<div class="grid--three bg-light">
  <article class="grid__item teaser">
    <span class="icon icon-logo-symbol teaser__icon"></span>
    <h1 class="teaser__title">Ledige stillinger</h1>
    <p class="teaser__text">Søk på konkrete stillinger vi ønsker å fylle</p>
    <a href="" class="btn teaser__btn outline">Se ledige stillinger</a>
  </article>
  <article class="grid__item teaser">
    <a href="">
      <span class="icon icon-logo-symbol teaser__icon"></span>
      <h1 class="teaser__title">Ledige stillinger</h1>
      <p class="teaser__text">Søk på konkrete stillinger vi ønsker å fylle</p>
      <footer class="teaser__footer">
        <span class="teaser__link">Se ledige stillinger</span>
      </footer>
    </a>
  </article>
</div>

Teaser img

Teaser with image. The image scales on :hover and :focus to make a similar effect as hero banner. Optionally add content in a <a> tag.

Arbeidssted & Moderne kontorer

<div class="grid--four">
  <article class="teaser-img grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">Arbeidssted &amp; Moderne kontorer</h1>
      </div>
    </a>
  </article>
  <article class="teaser-img grid__item">
    <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
    <div class="teaser__text-wrapper">
      <h1 class="teaser__title">Arbeidssted &amp; Moderne kontorer</h1>
    </div>
  </article>
</div>

Teaser img overlay

Similar to Teaser img, but with text above the image.

<div class="grid--three">
  <article class="teaser-img--overlay grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x250" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">For ambisiøse utviklere</h1>
        <p class="teaser__text">Vi trenger utviklere som vil <span class="highlight">erobre verden</span></p>
      </div>
    </a>
  </article>
  <article class="teaser-img--overlay grid__item">
    <a href="">
      <div class="teaser__img"><img class="" src="http://placehold.it/400x400" alt=""></div>
      <div class="teaser__text-wrapper">
        <h1 class="teaser__title">For ambisiøse utviklere</h1>
        <p class="teaser__text">Vi trenger utviklere som vil <span class="highlight">erobre verden</span></p>
      </div>
    </a>
  </article>
</div>

Teaser quote

Quote style for teaser. Used on news and employee stories. Can be used with title or blockquote.

Arbeidet er samfunnsnyttig, og at jeg får se resultat

Annette Lund Lillegaard UX Leder 
<div class="grid--three">
  <article class="grid__item teaser-quote">
    <a href="">
      <h2 class="teaser__title">Sykehus med elektronisk pasientjournal 80% mer effektive ifølge ny rapport</h2>
      <p class="teaser__link">Les hele saken på D:mag</p>
    </a>  
  </article>
  <a href="" class="grid__item teaser-quote">
    <blockquote>
      <p class="teaser__title">Arbeidet er samfunnsnyttig, og at jeg får se resultat</p>
      <cite class="citation">Annette Lund Lillegaard <span class="position">UX Leder</span></cite>
    </blockquote>
  </a>
</div>