Hero
Hero elements are large banners, that are usually found on the landing page of a web site or similar user interface.
Table of Contents
Edit this section, Opens in new windowOverview
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.
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.
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!
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-sizeandbackground-position, is set correctly depending on breakpoints
Modifiers
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.
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!
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-sizeandbackground-position, is set correctly depending on breakpoints
Behaviours
Modifiers
No image
Villaförsäkring
Reverse
If you want to flip the images on mobile only, use .if.hero.reverse.
Entry
A hero with wider content for entry forms, with title, text, buttons and an image
Bilforsikring
Vi ordner oppsigelse av forsikringen for deg!
Column
If you want the hero to be a column on tablet portrait mode, you can use the .column-class.
You can also use the reverse class with .column:
Anatomy
Husforsikring
Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!
- Content
- Image (optional)
Specs
Husforsikring
Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!
Bilforsikring
Vi ordner oppsigelse av forsikringen for deg!
Anatomy
Husforsikring
Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!
Hero
- Content
- Image (optional)
Specs
Husforsikring
Trygge rammer for dig og din familie med en husforsikring. Få 10% rabat, når du handler online!