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.

Dekker tannhelseforsikringen behandlinger utført i utlandet?

Forsikringen dekker tannbehandling i Norge, samt akuttbehandling i Sverige og Danmark. Forsikringen dekker ikke behandling og/eller utbedringer/reparasjoner av behandling utført i land utenfor Skandinavia.

Dekker tannhelseforsikringen reklamasjon på tidligere behandlinger?

Forsikringen dekker ikke reklamasjon på tidligere behandling, eller det som omfattes av tannlegens behandlingsgaranti. Det samme gjelder behandlinger som omfattes av tannlegers ansvarsdekning eller kan dekkes av Norsk Pasientskadeerstatning.

Dekker tannhelseforsikringen regulering?

Forsikringen dekker ikke tannregulering og øvrig behandling knyttet til dette.