Typography

H1 Dada Grotesk Medium 40pt

H2 Dada Grotesk Book 28pt

H3 Dada Grotesk Medium 28pt

H4 Dada Grotesk Book 22pt

H5 Dada Grotesk Book 18pt
H6 Section Header Arial Bold 15pt

P Body Arial Regular 15pt. ipsum dolor sit amet, consectetur adipiscing elit. Quisque vestibulum, nibh pellentesque vestibulum mattis, lacus tortor posuere nulla, vel sagittis risus mauris ac tortor. Vestibulum et lacus a tellus sodales iaculis id vel dui. Etiam euismod lacus ornare risus egestas dignissim. Fusce mattis justo vitae congue varius. Suspendisse auctor dapibus ornare. Praesent venenatis lacus a sem interdum tempor et vitae magna. Aenean vel consectetur odio. Curabitur malesuada scelerisque massa varius volutpat.

Variations

Header with .negative

Header with .highlighted

Header with .border

Header with .border.highlighted

Header as a link

Colors

Icons

Font awesome (.fa)
Font awesome
Hero pin icons (.hpi)

Lists

  1. This
  2. is
  3. a long sentence wrapping multiple lines, within
  4. an
  5. ordered
  6. list
  • This
  • is
  • an
  • unordered
  • list
  • This
  • is
  • a
  • .list-chevron
  • list
.list-highlighted
.list-highlighted.list-icons
.slash-list
.slash-list.list-negative
.list-horizontal
.list-horizontal.list-negative
.tab-list

Alerts

Driftsmelding Lorem ipsum dolor sit!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Buttons

Small buttons (.btn)
Small button Small button with too much text
Button with icon
Small button
.btn.btn--transparent
Small button
.btn.btn--dark
Logg in
.btn.btn--dark.btn--transparent
Bestill tolk 02451
Round buttons (.round-btn)
 Round button
Round button
Round button
Round button
Round button
Round button
Round button
Round button
Round button
Pin buttons (.pin-btn)
Sweden
Big pin buttons (.pin-btn .pin-btn--big)
HERO Mottak
HERO Kompetanse
HERO Tolk

Mid-sections

Mid-section (.mid-section)

Negative heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
Mid-section dark (.mid-section .mid-section--dark)

Negative heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
Mid-section w/ nested columns

Guide til nærmiljøet

Se flere >
Mid-section combo

Negative heading

Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Negative heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do tempor ut labore et dolore magna aliqua.

Button

Contact cards

Jane Roe
Jane Roe Longname
Teamleder kundesenter
Jane Roe
Jane Roe
Teamleder kundesenter
Jane Roe
Jane Roe
Teamleder kundesenter
Jane Roe
Jane Roe
Teamleder kundesenter
Jane Roe
Jane Roe
Teamleder kundesenter
Jane Roe
Jane Roe Longname
Teamleder kundesenter
Jane Roe
Jane Roe
Teamleder kundesenter
Jane Roe
Teamleder kundesenter
Jane Roe
Teamleder kundesenter
Jane Roe Longname
Teamleder kundesenter

News boxes

21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Les mer
21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Les mer
21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Les mer
21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Les mer
21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Les mer
Newx box
21/10/5015
H4 Section Header Dada Book 22pt

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Les mer

Form

H4 Spørsmål?

Bilde til id-kort:

Tables .table (responsive .rtable)

Akse Land Toppmåned 2015 Desember 2015 Januar 2015 Februar 2015
1 Finland 10815 1830 (17%) –
2 Norge 8665 1030 (12%) 390 (5%)
3 Sverige 39060 13840 (35%) 4165 (11%)
4 Nederland 10120 3515 (35%) 2660 (26%)
5 Italia 11195 6115 (56%) 7500 (67%)
6 Belgia 6830 5240 (77%) 2840 (42%)
7 Tyskland 60360 48275 (80%) 52085 (86%)
8 Danmark 5030 2670 (53%) –
# Names Number ID Phone Company Words
1 Taylor 39 16071012-0882 1-751-124-1216 Massa Non PC nisi magna sed dui. Fusce aliquam, enim nec tempus scelerisque,
2 Barclay 86 16311201-3028 1-290-375-1770 Urna Vivamus Institute sem, consequat nec, mollis vitae, posuere at, velit. Cras lorem
3 Germane 38 16310120-6492 733-6135 Ullamcorper Eu Euismod Corp. Aenean sed pede nec ante blandit viverra. Donec tempus, lorem
4 Deanna 14 16181005-5291 1-957-463-6723 Ipsum Institute a felis ullamcorper viverra. Maecenas iaculis aliquet diam. Sed diam
5 Candace 64 16280430-6583 1-255-895-2681 Eu Tellus LLP pede, ultrices a, auctor non, feugiat nec, diam. Duis mi
6 Sawyer 78 16920623-3398 1-891-396-9531 Massa Industries ut, sem. Nulla interdum. Curabitur dictum. Phasellus in felis. Nulla
7 Nicole 77 16950711-5195 567-7650 Cras Convallis Convallis Corporation a felis ullamcorper viverra. Maecenas iaculis aliquet diam. Sed diam
8 Kiara 15 16490517-6337 613-4294 Molestie Sodales Limited facilisis facilisis, magna tellus faucibus leo, in lobortis tellus justo
9 Timothy 6 16590221-2009 247-9816 Dictum Ltd ridiculus mus. Proin vel arcu eu odio tristique pharetra. Quisque
10 Edan 7 16091114-7445 911-8290 Placerat Velit Associates erat eget ipsum. Suspendisse sagittis. Nullam vitae diam. Proin dolor.
11 Larissa 76 16560804-9614 1-228-332-3055 Ipsum Donec Sollicitudin Consulting ut quam vel sapien imperdiet ornare. In faucibus. Morbi vehicula.
12 Jaden 62 16150117-9897 617-3909 Orci Foundation Morbi non sapien molestie orci tincidunt adipiscing. Mauris molestie pharetra
13 Jeremy 3 16311127-3730 1-418-407-0779 Pretium Inc. quis, pede. Praesent eu dui. Cum sociis natoque penatibus et
14 Lucy 18 16911110-1839 459-6563 Sed Diam LLC quam a felis ullamcorper viverra. Maecenas iaculis aliquet diam. Sed
15 Kennan 38 16840329-5812 102-9950 Ipsum Industries libero at auctor ullamcorper, nisl arcu iaculis enim, sit amet
16 Rebekah 91 16600523-7869 380-0459 Nec Orci Corporation dapibus id, blandit at, nisi. Cum sociis natoque penatibus et
17 September 32 16991117-5082 1-329-229-5519 Molestie Sed Id PC dictum mi, ac mattis velit justo nec ante. Maecenas mi
18 Ferris 13 16691229-3732 1-448-319-5357 Facilisis Foundation lobortis quam a felis ullamcorper viverra. Maecenas iaculis aliquet diam.
19 Danielle 47 16920704-5221 1-837-508-6890 Lectus Convallis Est Limited dolor. Nulla semper tellus id nunc interdum feugiat. Sed nec
20 Melyssa 66 16751112-2488 1-396-970-6810 Lacus Institute faucibus id, libero. Donec consectetuer mauris id sapien. Cras dolor
21 Jena 48 16100318-6937 1-820-237-2094 Sit Amet Diam Limited senectus et netus et malesuada fames ac turpis egestas. Fusce
22 Erasmus 63 16220514-8592 1-644-502-1213 A Tortor Nunc Inc. nunc sed libero. Proin sed turpis nec mauris blandit mattis.
23 Nichole 40 16590125-9472 1-209-327-3811 Lacus Company Class aptent taciti sociosqu ad litora torquent per conubia nostra,
24 Judith 43 16450601-9266 538-1139 Molestie LLC risus. Donec nibh enim, gravida sit amet, dapibus id, blandit
25 Burton 39 16160104-0593 1-826-699-2840 Ut Tincidunt Institute sodales purus, in molestie tortor nibh sit amet orci. Ut

Utilities

Helper classes
  • .no-margins
  • .list-unstyled
Text utilities

.text-left

.text-center

.text-right

.text-left-sm

.text-center-sm

.text-right-sm

.text-left-md

.text-center-md

.text-right-md

.text-left-lg

.text-center-lg

.text-right-lg

Additional classes: .text-justify, .text-nowrap

.text-lowercase

.text-uppercase

.text-capitalize

Grid extensions

.row.row--center-vertically lorem

This class is quirky, use with care! Requires content (text) to fill atleast one of the columns, to determine the widht of the columns.

Spacing (.spacing)
Row with 40px spacing (.spacing)
Regular row
Row with 40px spacing (.spacing)
Regular row
Container with 50px spacing (.spacing.spacing--big)
Container with 50px spacing (.spacing.spacing--big) and Row with 40px spacing (.spacing)
Row with 40px spacing top (.spacing.spacing--top)
Row with 40px spacing bottom (.spacing.spacing--bottom)