Website library

Everything you need to look like Norsk Tannhelseforsikring

All the classes and components here are the source of truth for our website, make a change to this document and it will apply to the entire website. Guidelines to working on the website can be found in this document.

Colors

Primary

Turkis 1

#2ab5b9
16px
24px
White
Pass
Pass
Primary
Not legible
Not legible
Black
Not legible
Pass

Turkis 2

#55c4c7
16px
24px
White
Not legible
Pass
Primary
Not legible
Not legible
Black
Pass
Pass

Turkis 3

#94dadc
16px
24px
White
Not legible
Not legible
Primary
Not legible
Not legible
Black
Pass
Pass

Accent

Beige 1

#D9D9BF
16px
24px
White
Not legible
Not legible
Primary
Not legible
Pass
Black
Pass
Pass

Neutral

White

#fafafa
16px
24px
White
Not legible
Not legible
Primary
Pass
Pass
Black
Pass
Pass

Black

#141e1e
16px
24px
White
Pass
Pass
Primary
Not legible
Pass
Black
Not legible
Not legible

Typography

We use Avenir LT PRO as our main typeface

Headings

Avenir - 3 / 2,5 / 2 em

H1 Display

Avenir - 2 / 2,3 / 2 em

H1 Regular

Avenir - 2 / 1,8 / 1,6 em

H2 Display

Avenir - 1,5 / 1,4 / 1,3 em

H2 Regular

Avenir - 1,2 em

H3 Regular

Avenir - 1 em

H4 Regular

Paragraphs

This is the slogan size

This is a featured paragraph, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

This is a normal paragraph, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Icons

Here is a overview of the icon font, do not use icons to illustrate anything other than the name.

Use: Copy the icons direct in to a text element with the class icon-font.

Right now there are two icon fonts, we have updated with a new set of icons but have note replaced all the old ones yet. Rule of thumb; For all new features use "icon_font_cloud_insurance", and replace "icon_font" when you meet them.

Class: icon_font_cloud_insurance

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

Class: icon_font (To be depricated) 

Grid

Classes

2_column_grid
3_column_grid
4_column_grid
5_column_grid

Notes

no_gutters class can be aplyed to all grids and will remove both vertical and horizontal gutters.

Buttons

Buttons are categorized by actions. Buttons are used whenever the user can interact or change path on the website.
‍Each variation has intention and should be used sparingly.

General

DefaultCall to actionSecondary action
Classes

button default
button cta
button secondary_action

Notes

All buttons start with the button class, and here you can change font, corner radius etc.

Disabled

DefultCall to actionCall to action outlined
Classes

button disabled

Notes

All buttons use the same disabled class

Cards

A static card

This is some text inside of a div block.

A card that is clickable

This is some text inside of a div block.
Classes

card
card clickable

Notes

The only differentiator is the hover and click animation

FAQ

Gathers data directly from the FAQ collection in the CMS. Create a new FAQ here and it will automatically be updated on the page.

Er det egenandel ved skadebehandling?

Symbol for åpning og lukking av FAQ

Egenandel kan variere ut ifra hvilken forsikringsavtale du har. Sjekk ditt forsikringsbevis for nærmere informasjon.

Fant du ikke svar på spørsmålet ditt?

Symbol for åpning og lukking av FAQ

Du kan kontakte Kundeservice på telefon 22 83 54 00 eller logge inn med BankID for å få tilgang til vårt telefonnummer.

Kan jeg få rådgivning for andre enn meg selv?

Symbol for åpning og lukking av FAQ

Ja, du kan be om rådgivning for barn under 15 år eller barn du er verge for.