Helper Classes

There are a few helper CSS classes to simplify common tasks.

.boxed

Add the "boxed" class to a page layout or page to create a boxed layout with space left and right on larger devices.

.full-width

Add "full-width" class to a page layout or page to create a layout that extends to maximum screen size on all devices.

.light

Add ”light” to an element to change text color to white.

.intro

Creates a larger font-size.

.hero-text-xxl, .hero-text-xl, .hero-text-lg, .hero-text-md, .hero-text-sm

Creates responsive text of different sizes (meant to be used in conjunction with hero sections).

.bg-tint tint-*

Adds one of the predefined background-colors or gradients to an article or module.

.tint-*

Adds one of the predefined background-colors or gradients to an element.

.space-top10, .space-top20, .space-top30, .space-top40, .space-top50

Adds extra space at the top of an element (in pixels).

.space-bottom10, .space-bottom20, .space-bottom30, .space-bottom40, .space-bottom50

Adds extra space at the bottom of an element (in pixels).

.radius3, .radius5, .radius10

Add ”radius3”, "radius5" or "radius10" class to give an element a border radius of 3px, 5px or 10px. Class will be inherited by elements lower in hierarchy, p.e. if you add "radius10" to an article, all elements in this article will have a radius of 10px.

.round

Add "round" to an image element to create a circular image.

.border

Adds a border of 1px to an element.

.hide-controls

Add class "hide-controls" to the slider start element to hide the slider controls.

.divider-top

Creates an inset shadow divider at the top of an element.

.divider-top-bottom

Creates an inset shadow divider at the top and the bottom of an element.

.divider-bottom

Creates an inset shadow divider at the bottom of an element.