Style Guide

hero__heading

Typo, Links & Buttons

Rich Text Block
H1
H2
H3
H4
H5
H6
Paragraph
List items
Figure
Image
Figure Caption

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings
  • The rich text element allows you to create and format headings

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder
This is a placeholder image.
Normal links
All Links

Links look-a-like

link
button
Læs mere
button
button--white
button
button--white
button--Large
button
button--large
button--Small
button
button--small
button--Tiny
button
button--tiny
Prochimp ikon

Colors

is--background-primary
is--background-secondary
is--background-black
is--background-dark-gray
is--background-gray
is--background-light-gray
is--background-success
is--background-alert
is--background-white

is--text-primary

is--text-primary

is--text-secondary

is--text-secondary

is--text-black

is--text-black

is--text-primary

is--text-dark-gray

is--text-gray

is--text-gray

is--text-light-gray

is--text-light-gray

is--text-success

is--text-success

is--text-alert

is--text-alert

is--text-white

is--text-text-white

Components

input-text
input-text
input-text
input-text--textarea
button
button--large
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Tab 1
Tab 2
Tab 3

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

3 Columns with cards

grid-3

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card with Image
a.card

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card with Image
a.card

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card with Image
a.card

Shadows

.is--shadow

.is--shadow

.is--hover

Splide Slides

splide__arrow
svg__arrow-left
svg__arrow-right

HTML Buttons

Image Classes

.sizer .sizer__img

.sizer.sizer--4-3 .sizer__img

.sizer.sizer--1-1 .sizer__img

.sizer.sizer--round .sizer__img

Grids Classes

2 Column Grid

grid-2
grid-2__item
grid-2__item
grid-2__item
grid-2__item

3 Column Grid

grid-3
grid-3__item
grid-3__item
grid-3__item
grid-3__item
grid-3__item
grid-3__item

4 Column Grid

grid-4
grid-4__item
grid-4__item
grid-4__item
grid-4__item
grid-4__item
grid-4__item
grid-4__item
grid-4__item

The Space Classes

Spacer 0.5
spacer-0.5
Spacer 1
spacer-1
Spacer 3
spacer-3
Spacer 4
spacer-4
Spacer 6
spacer-6
Spacer 8
spacer-8

Layout – Symbels

Here 70 - Image
Here 70 - Color
Here Wide - Image
Here Wide - Color
Split - Text & Image
Split - Image & Text

Hero 70 - Image

Pro tation audiam.

Here 70 - Image

Hero 70 - Color

Pro tation audiam.

Here 70 - Color

Hero Wide - Image

Pro tation audiam.

Here Wide - Image

Hero Wide - Color

Pro tation audiam.

Here Wide - Color

Text & Image

Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? Who are you calling spook, pecker-wood. Doc, Doc. Oh, no. You're alive. Bullet proof vest, how did you know, I never got a chance to tell you. About all that talk about screwing up future events, the space time continuum.

Full Split - Text & Image

Image & Text

Listen, this is very important, I forgot my video camera, could you stop by my place and pick it up on your way to the mall? Who are you calling spook, pecker-wood. Doc, Doc. Oh, no. You're alive. Bullet proof vest, how did you know, I never got a chance to tell you. About all that talk about screwing up future events, the space time continuum. Oh no, don't touch that. That's some new specialized weather sensing equipment. Hey, hey, I've seen this one, I've seen this one. This is a classic, this is where Ralph dresses up as the man from space.

Full Split - Image & Text

Grids

Text block with button

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam sagittis sapien vitae libero fringilla, et dictum.

Button Text

Text block

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam sagittis sapien vitae libero fringilla, et dictum.

grid-2
Split - Image Square
Split - Block with Button
Split - Image Square
Split - Block with Rich Text

Split

Text block with button

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam sagittis sapien vitae libero fringilla, et dictum.

Button Text

Text block

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam sagittis sapien vitae libero fringilla, et dictum.

split-2
Split - Image Square
Split - Block with Button
Split - Image Square
Split - Block with Rich Text
Footer