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.