Skip to content

Hero13.10.5

Hero elements are large banners, that are usually found on the landing page of a web site or similar user interface.


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

Edit this section

Overview

Hero elements are large banners, that are usually found on the landing page of a web site or similar user interface. It's purpose is to draw the users attention but also to in one grand display attempt to inform the user immediately of the type of content he/she will find when browsing around.

Edit this section

Variations

Type Purpose
Hero This variation is used for the top part of a page.
Edit this section

Hero

Husforsikring

Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!

Usage

With studio image

Husforsikring

Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!

With live image (video)

Det oknepiga försäkringsbolaget

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

It is up to the content managers / developers to fit the live image correctly.

<section class="if hero">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading largest">Det oknepiga försäkringsbolaget</h1>
      <p class="if text lead">
        Skaffa rätt skydd för ditt hem och dina saker
      </p>
      <button type="button" class="if button primary large">Hitta försäkring</button>
    </div>
    <div class="if image live">
      <video
        style="position:relative; left: -32%;"
        class="if video"
        loop="true"
        muted="true"
        autoplay
        preload="auto"
        src="https://if-brand-static-cdn.azureedge.net/videos/studio/If_studio-mov_BA-Private.mp4"
      ></video>
    </div>
  </div>
</section>

With Quick Facts

Villaförsäkring

Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.

  • Huskollen ingår
  • Nyvärde hemelektronik
  • Köp online - få 10% rabatt!
<section class="if hero">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading largest">Villaförsäkring</h1>
      <p class="if text lead">
        Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr eller lånar, byggnaderna och tomten.
      </p>
      <ul class="if quick-facts list">
        <li class="if quick-fact">
          Huskollen ingår
        </li>
        <li class="if quick-fact">
          Nyvärde hemelektronik
        </li>
        <li class="if quick-fact">
          Köp online - få 10% rabatt!
        </li>
      </ul>
      <button type="button" class="if button primary large">Beräkna pris</button>
    </div>
    <div class="if image studio" style="background-image: url(https://v.imgi.no/nbtacvz4uu-MOODBOARD/2042);"></div>
  </div>
</section>

Custom focus point

A standard hero with title, lead text and a cta. The image is a studio image with a custom focus point.

Det oknepiga försäkringsbolaget

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

Image sizing

Lifestyle images use 50% of the viewport width on larger screens, and a 16:9 ratio on smaller screens.

Studio images uses 50% (45% if it is a column hero) of the hero container width, and a 21:9 ratio on smaller screens.

Tips

  • The focus point is not set in the design system, it is set via predefined classes by the content managers
  • Make sure the focus point, that is background-size and background-position, is set correctly depending on breakpoints
Lifestyle image
Studio image

Behaviours

Modifiers

No image

Villaförsäkring

<section class="if hero">
  <div class="if container">
    <div class="if content no-image"></div>
  </div>
</div>
Reverse

If you want to flip the images on mobile only, use .if.hero.reverse.

<section class="if hero reverse"></section>
Entry

A hero with wider content for entry forms, with title, text, buttons and an image

Only to be used for web entry forms and with studio images!

Bilforsikring

Vi ordner oppsigelse av forsikringen for deg!

<section class="if hero entry"></section>
Column

If you want the hero to be a column on tablet portrait mode, you can use the .column-class.

<section class="if hero column"></section>

You can also use the reverse class with .column:

<section class="if hero reverse column"></section>

Anatomy

Husforsikring

Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!

Hero

  1. Content
  2. Image (optional)

Specs

Husforsikring

Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!

Hero

Bilforsikring

Vi ordner oppsigelse av forsikringen for deg!

Entry form hero

Implementation

This is the default html implementation of the hero. Different features/modifiers implementation is found under relevant sections.

<section class="if hero">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading large">Husforsikring</h1>
      <p class="if text lead">
        Trygge rammer for dig og din familie med en husforsikring.
        <strong class="if">Få 10% rabat, når du handler online!</strong>
      </p>
      <div class="if input-wrapper">
        <button type="button" class="if button primary large">Beregn pris</button>
        <button type="button" class="if button text large">Sammenlign vores boligforsikring</button>
      </div>
    </div>
    <div
      class="if image"
      style="width: 100%; background-image: url('https://v.imgi.no/53mnnxlu76-MOODBOARD/2042');"
    ></div>
  </div>
</section>
Edit this section
Contact us