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.

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.

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.
Free grid - col-12 col-5 offset-1 col-6 & reversed
Section title-large

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.
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.

Aspect ratios 3:2(Standard or new default)
col-12: with content title & section background-color

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.
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.

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
Free grid - offset-2 col-8 offset-2
col-8: with tag, content title-large & background color

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.

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.
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.
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


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



Free grid - Random grid test



col-4: with title-large - A very long title to display how a long title looks like
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
- Mauris id sollicitudin eros, in aliquam lectus.intext link
- Dignissim magna in, dignissim lacus.

Aspect ratios 16:5 (Banner)