Website library

Everything you need to look like us

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: 
How to cloud insurance.io

Colors

Primary

Cloud insurance green

#3cc7b3
16px
24px
White
Not legible
Pass
Primary
Not legible
Not legible
Black
Pass
Pass

Cloud Insurance dark green

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

Cloud Insurance light green

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

Accent

Cloud Insurance accent

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

Neutral

Cloud Insurance white

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

Cloud Insurance black

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

Typography

We use Open Sans as our main typeface

Headings

Open sans - 3 / 2,5 / 2 em

H1 Display

Open sans - 2 / 2,3 / 2 em

H1 Regular

Open sans - 2 / 1,8 / 1,6 em

H2 Display

Open sans - 1,5 / 1,4 / 1,3 em

H2 Regular

Open sans - 1,2 em

H3 Regular

Open sans - 1 em

H4 Regular

Paragraphs

This is the slogan size

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 CI-icon font, do not use icons to illustrate anything other than the name.
Eg: do not ci-icon-send as a plane illustration.

Use: 
Webflow: Copy the icons direct in to a text element with the class ci-icon.
CI Admin: Use the designated name as css class.

ci-icon-home
ci-icon-policies
ci-icon-claims
ci-icon-customer

ci-icon-campaign
ci-icon-send
ci-icon-code
ci-icon-archive
ci-icon-arrow-left
ci-icon-arrow-right
ci-icon-balance
ci-icon-bookmark
ci-icon-cancel
ci-icon-chevron-down
ci-icon-chevron-left
ci-icon-chevron-right
ci-icon-chevron-up
ci-icon-copy-to-clipboard
ci-icon-date
ci-icon-deactivated
ci-icon-delete
ci-icon-download
ci-icon-edit
ci-icon-help
ci-icon-inbox
ci-icon-check
ci-icon-warning
ci-icon-info
ci-icon-insights
ci-icon-label
ci-icon-link
ci-icon-linked-person
ci-icon-reports
ci-icon-list
ci-icon-log-off
ci-icon-log-on
ci-icon-log
ci-icon-mail
ci-icon-map-pin
ci-icon-message
ci-icon-money
ci-icon-note
ci-icon-person
ci-icon-print
ci-icon-redo
ci-icon-refresh
ci-icon-new-or-add
ci-icon-remove-or-subtract
ci-icon-search
ci-icon-settings
ci-icon-show-document
ci-icon-meh
ci-icon-sad
ci-icon-smile
ci-icon-pause
ci-icon-start
ci-icon-stop
ci-icon-upload
ci-icon-uploaded
ci-icon-view
ci-icon-waiting
ci-icon-fist
ci-icon-high-five
ci-icon-wave

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

Scroll trough section

No code

Vi benytter brukervennlige tjenester som kan læres av alle, og som ikke involverer koding. Dette betyr at selv om vi står for bygging av din webside, vil du selv kunne oppdatere og redigere innhold.

Les fordelen med no code.

Vi leier tjenester

Hver av disse abonementstjenestene har store produktteam som hele tiden oppdaterer, vedlikeholder og legger til nye funksjonaliteter. Dermed har vi flere 100 utviklere i ryggen som jobber hver dag for din nettside.

Integrering > Utvikling

Med integrasjoner kan vi bygge nesten hva som helst, uten å måtte utvikle og vedlikeholde egen kode. Billigere for deg, enklere for oss.

Se hvilke integrasjonene vi tilbyr.