Teaser

Teaser

Teaser usally have title, text and link. It could also include icon on top. It should live in a narrow container. The example below shows with and without wrapping anchor tag <a>.

<div class="grid--three">
  <article class="grid__item teaser">
    <span class="icon icon-group-plus xlarge teaser__icon"></span>
    <h1 class="teaser__title">Ledige stillinger</h1>
    <p>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-group-plus xlarge teaser__icon"></span>
      <h1 class="teaser__title">Ledige stillinger</h1>
      <p>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 news

DIPS har vunnet pris

DIPS har vunnet pris som årets mest respekterte under VIRKE konferansen 2014

Nå er d:mag nr 2/2014 her!

Årets andre utgave av d:mag er nå på vei i posten og den er også å finne elektronisk.

<div class="list-teaser teaser-news grid-list">
  <div class="list__item list__item--first">
    <img src="http://placehold.it/600x350&text=...">
    <h2 class="list__title"><a href="#">DIPS har vunnet pris</a></h2>
    <p class="list__desc">DIPS har vunnet pris som årets mest respekterte under VIRKE konferansen 2014</p>
  </div>
  <div class="list__item">
    <img src="http://placehold.it/600x350&text=...">
    <h2 class="list__title"><a href="#">Nå er d:mag nr 2/2014 her!</a></h2>
    <p class="list__desc">Årets andre utgave av d:mag er nå på vei i posten og den er også å finne elektronisk.</p>
  </div>
</div>

Teaser quote

Quote style for teaser. Used on news and employee stories with same foundation, but used with .teaser__link or .citation.

  • .teaser__title can be any header element or paragraph.
  • Works with and without wrapper <a> link

Sintef med nye teknologiske gjennombrudd

Les hele saken på D:mag

Arbeidet er samfunnsnyttig og jeg får se resultat

Annette Lund Lillegaard UX Leder

Arbeidet er samfunnsnyttig og jeg får se resultat

Annette Lund Lillegaard UX Leder 
<div class="grid--three">
  <a href="" class="teaser-quote grid__item">
    <blockquote>
      <h2 class="teaser__title">Sintef med nye teknologiske gjennombrudd</h2>
      <footer class="teaser__footer">
        <span class="teaser__link">Les hele saken på D:mag</span>
      </footer>
    </blockquote>  
  </a>
  <a href="" class="teaser-quote grid__item">
    <blockquote>
      <h2 class="teaser__title">Arbeidet er samfunnsnyttig og jeg får se resultat</h2>
      <cite class="citation">Annette Lund Lillegaard <span class="position">UX Leder</span></cite>
    </blockquote>
  </a>
  <div class="teaser-quote grid__item">
    <blockquote>
      <h2 class="teaser__title">Arbeidet er samfunnsnyttig og jeg får se resultat</h2>
      <cite class="citation">Annette Lund Lillegaard <span class="position">UX Leder</span></cite>
    </blockquote>
  </div>
</div>