Styles

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.

Colors

Primary

Yellow

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

Secondary

Blue

#194be1
16px
24px
White
Pass
Pass
Primary
Not legible
Pass
Black
Not legible
Not legible

Green

#008c8b
16px
24px
White
Pass
Pass
Primary
Not legible
Not legible
Black
Pass
Pass

Red

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

Dark Red

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

Neutral

White

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

Black 900

#090e0b
16px
24px
White
Pass
Pass
Primary
Pass
Pass
Black
Not legible
Not legible

Black 600

#090e0b
16px
24px
White
Pass
Pass
Primary
Pass
Pass
Black
Not legible
Not legible

Black 300

#090e0b
16px
24px
White
Pass
Pass
Primary
Pass
Pass
Black
Not legible
Not legible

Typography

We use the variable font DM Sans as our main typeface. It can be found here Google Fonts

Headings

DM Sans

Mega 1

DM Sans

Title 1

DM Sans

Title 2

DM Sans

Title 3

DM Sans

Title 4

DM Sans
Title 5

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

All icons that can be used on the page.

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


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             


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

Grid

Notes

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

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.

Nostrum Autem

Aut similique quis minima aut consequatur ut. Aut rerum et facere ea veritatis est eum autem corrupti. Impedit ipsa dolore ut. Ut facilis aspernatur nesciunt reprehenderit aspernatur vel minima aspernatur. Veniam sequi debitis vel pariatur. Blanditiis aut occaecati perspiciatis iusto totam voluptatibus.

Perferendis Id Odit Voluptatibus

Et eos ea dolores accusantium cupiditate molestiae. Voluptatum dolores asperiores ab nulla nisi molestiae. Aperiam modi perspiciatis sequi.

Occaecati Qui Officiis Architecto

Ut facilis aspernatur nesciunt reprehenderit aspernatur vel minima aspernatur. Veniam sequi debitis vel pariatur. Blanditiis aut occaecati perspiciatis iusto totam voluptatibus.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Contact form

(Helt uforpliktende)
Meldingen din er mottatt. Vi vil kontakte deg så fort som mulig, mer eller mindre det er lunsj.
Vi tuller ikke med lunsjen.
Dette er flaut... skjemaet ser ikke ut til å funger. Om du sender meg en melding 948 67 375 skal du få et flakslodd.