Skip to main content

Global styles

  • Roboto
  • Verdana
  • MaxLF-Regular
  • Open Sans
  • Georgia
  • Arial
  • Exo2
  • IBMPlexMono
  • Playfair Display
  • Fira Sans
  • Montserrat
  • Metropolis
  • Barlow
  • Poppins
  • Ice Cream Slant
  • ID00 Sans
  • ID00 Serif
  • Merriweather
  • Rubik
  • Alverata
  • Resolve
  • Resolve Nrw
  • DM Sans
  • Raleway
  • Bricolage Grotesque
  • Sora
  • Tropiline
  • Caveat
  • Flama
  • Inter
  • Lato
  • Mynerve

  • Inherits sizing from article body

  • Inherits sizing from H3

  • Small text transform

Component styles

  • Footer padding

Grid dynamic component

Grid options

  • Columns: 4--6--8--12
  • Spacer: 1--2
  • Off-set: 2--4--6--8

Background options

Most options can be used together, except for background color and background image

  • Framed content
  • Background color
  • Background image (has overlay when content is not framed)
  • Height
    • Fit content (content + padding)
    • Half-height (min 50vh)
    • Full-height (min 100vh)
  • Align center (content center)
  • Text align center

Element/component options

Title

  • Title & tags
  • Enlarge x1/x2

Rich-text

  • Enlarge x1/x2
  • 1 column / 2 columns

Image

  • Caption
  • Height
    • Auto height
    • Aspect ratios 1:1 (Square)
    • Aspect ratios 3:2 (Standard)
    • Aspect ratios 16:5 (Banner)

Button

  • Button filled
  • Button arrow

Margin-bottom

  • Auto: from mobile an down everything is stacked
  • Optional margin-bottom: from tabelt and up (col-mb--md-up)

Margin-top

If Dynamic grid is placed as the first component on the page and no image or baground is set then:

  • The section is given a margin-top: mt--small;
  • If title is set, it becomes an H1

Free grid - col-12

col-12: with body-text "column-count-2" & section background-color

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Image description

col-12: with body-text ".column-count-2 & background-image

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Image description

col-12: with body-text ".column-count-2, .framed--100-40" & background-image

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Image description

col-12: with image content & caption

Free grid - col-12 col-12

Section title-large

col-12: with body-text ".column-count-2

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

col-12: with content title-large

col-12: with body-text & text-center

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Button filled

Free grid - col-12 col-5 offset-1 col-6 & reversed

Section title-large

Image description

Auto height

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Button filled

col-12: with content title-large

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

This is a link

Button filled
Image description

Aspect ratios 3:2(Standard or new default)

col-12: with content title & section background-color

Image description

Aspect ratios 1:1 (Square)

col-6: with body-text & content-center option

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

This is a link

col-12: with content title

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Image description

Aspect ratios 16:5 (Banner)

Free grid - col-4 offset-2 col-6

col-4: with content title-large - A very long title to display how a long title looks like

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eos accumsan pharetra.

col-4: with content title & section background-color

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eos accumsan pharetra.

This is a link

Free grid - offset-2 col-8 offset-2

Topic of the year

col-8: with tag, content title-large & background color

Image description
Topic of the week

col-8: with tag, content title-large, background-image, overlay & full-height

Image description
Topic of the month

Framed content(how the design is) - col-8: with tag, content title-large, background-image, framed--100-40 & full-height

with body-text x 1.5 (.p--x1-5) - En stigende opmærksomhed på lederes adfærd og moral skaber et pres hos ledere. Men det kan faktisk betale sig at involvere dine medarbejdere i dine svære følelser, siger to erhvervspsykologer.

Image description
Topic of the month

Framed content(how it has been implemented in back-end) -col-8: with tag, content title-large, background-image, framed--100-40 & full-height

with body-text x 1.5 (.p--x1-5) - En stigende opmærksomhed på lederes adfærd og moral skaber et pres hos ledere. Men det kan faktisk betale sig at involvere dine medarbejdere i dine svære følelser, siger to erhvervspsykologer.

Image description

col-8: with body-text x 2 (.p--x2), background-image & overlay - En stigende opmærksomhed på lederes adfærd og moral skaber et pres hos ledere. Men det kan faktisk betale sig at involvere dine medarbejdere i dine svære følelser, siger to erhvervspsykologer.

Image description

col-8: with body-text x 2 (.p--x2), background-image, overlay & section background color - En stigende opmærksomhed på lederes adfærd og moral skaber et pres hos ledere. Men det kan faktisk betale sig at involvere dine medarbejdere i dine svære følelser, siger to erhvervspsykologer.

col-8: with body-text, height-50vh, text-center & section background-color - Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

This is a link

Free grid - offset-3 offset-1 col-8

col-3: with content title & background-color

col-8: body-text "column-count-2". Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Free grid - offset-3 offset-1 col-4 col-4

col-3: content title

Image description
Image description

Free grid - col-4 col-4 col-4

Image description
Image description
Image description

Free grid - Random grid test

Image description
Image description
Image description

col-4: with title-large - A very long title to display how a long title looks like

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eos accumsan pharetra.

col-12: title

col-6: with body-text

Dignissim magna in, dignissim lacus. Mauris id sollicitudin eros, in aliquam lectus. Donec turpis elit, ultrices in aliquam sed, porttitor eu massa. Integer ac ex ac eros accumsan pharetra. Nam vitae libero ac lacus pharetra venenatis. Vestibulum vel nisl accumsan lacus tristique laoreet. Suspendisse varius volutpat tortor, eu scelerisque diam euismod.

Mauris id sollicitudin eros, in aliquam lectus. 20 20 20 20

Heading h2

More text

  • Mauris id sollicitudin eros, in aliquam lectus.intext link
  • Dignissim magna in, dignissim lacus.

Heading h3

  1. Mauris id sollicitudin eros, in aliquam lectus.intext link
  2. Dignissim magna in, dignissim lacus.
Image description

Aspect ratios 16:5 (Banner)