Skip to content

Banner13.10.5

The banner is used as a form of internal advertising for our products or for selling points.


$ npm i @if-design-system/banner@13.10.5

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Edit this section

Usage

Type 1

Claims banner

Type 2

Splash banner

Type 3

Share banner

Mobile versions

Type 1

Claims banner

Type 2

Splash banner

Type 3

Share banner

Edit this section

Anatomy

Claims banner
  1. Banner
  2. Narrow container
  3. Text
Splash banner
  1. Banner
  2. Image (optional)
  3. Text
Edit this section

Specs

Claims banner
Splash banner
Share banner
Edit this section

Implementation

<div class="if banner claims">
  <div class="if container">
    <span class="if title">Har du råkat ut för en skada eller olycka?</span>
    <a class="if standalone" href="/asdsd">Till skadeanmällan</a>
  </div>
</div>
<div class="if banner splash">
  <div class="if content">
    <img
      src="https://www.libero.no/globalassets/libero-club21/liberoklubben-logotyp-se-dk-no-lila-retina-new22_177kb.png"
      class="if image"
    />
    <div class="if description">
      <p>
        Visste du att du har en massa fördelar via Liberoklubben?
      </p>
      <p>
        <a class="if standalone" href="/asd">Til Liberoklubben</a>
      </p>
    </div>
  </div>
</div>
<div class="if banner share">
  <div class="if content">
    <ul class="if">
      <li class="if facebook"><a class="if" href="https://wwww.google.com">Share on Facebook</a></li>
      <li class="if linkedin"><a class="if" href="https://wwww.google.com">Share on LinkedIn</a></li>
      <li class="if twitter"><a class="if" href="https://wwww.google.com">Share on Twitter</a></li>
    </ul>
  </div>
</div>
Edit this section

Contact us