Custom Classes

Custom Classes

The Vanilla theme comes with a host of custom classes that can be used to customise and differentiate one theme from another. These custom classes can be added to either the _classes property (Framework) or the Classes text area (Authoring Tool).

Global common classes

The following classes target the _classes property / Classes text area and can be applied to content objects, articles, blocks, and components.

Base class	Chain class	Description
bg-color		The first class of two required to apply a solid background color to the targeted element. Combine with one of the chain classes to apply the respective background color e.g. bg-color black or bg-color background. Note: the chain class must be a predefined variable. The bg-color mixin can be extended to include custom colors by adding another entry here.
	transparent-light	Sets the background color of the block to transparent and changes the font color to black. Useful for displaying text over a light background image.
	transparent-dark	Sets the background color of the block to transparent and changes the font color to white. Useful for displaying text over a dark background image.
	black	Sets the background color of the block to black and changes the font color to white.
	background	Sets the background color of the block to use the variable @background (default is black) and changes the font color to use the variable @background-inverted (default is white). These variables can be changed in the _colors.less file.

Content Object

The following classes target the contentObject's _htmlClasses property / HTML Classes text area.

Class	Description
hide-nav-back-btn	Hides the navigation back button on the page.

The following classes target the contentObject's _classes property / Page Classes text area.

Class	Description
hide-page-header	Hides the page header on the page.

Base class	Chain classes	Description
header-color		The first class of two required to apply a solid background color to the page header element. Combine with one of the chain classes to apply the respective background color e.g. header-color background. Note: the chain class must be a predefined variable. Can be used for both the menu and / or the page header. The header-color mixin can be extended to include custom colors by adding another entry here.
	transparent-light	Sets the background color of the header to transparent and changes the font color to @font-color. Useful for displaying text over a light background image.
	transparent-dark	Sets the background color of the header to transparent and changes the font color to @font-color-inverted. Useful for displaying text over a dark background image.
	background	Sets the background color of the header to use the variable @background (default is black) and changes the font color to use the variable @background-inverted (default is white). These variables can be changed in the _colors.less file.

Block

The following classes target the block's _classes property / Classes text area.

Class	Description
reverse-desktop-order	Reverses the visual layout of the components above the medium breakpoint (default is 760px). e.g. Left layout components would still render first in the DOM order but visually appear on the right-hand side above the medium breakpoint. The components would vertically stack as per the DOM order below the breakpoint.
extend-container	Extend width of block to max page width (default is 1440px).
extend-content-container	Extend width of block to 70rem (default is 1120px).
remove-padding-top / remove-top-padding	Removes the top padding from block.
remove-padding-bottom / remove-bottom-padding	Removes the bottom padding from block.
reduce-padding-top	Reduce the blocks top padding by half.
reduce-padding-bottom	Reduce the blocks bottom padding by half.
increase-padding-top	Double the blocks top padding.
increase-padding-bottom	Double the blocks bottom padding.

Component

The following classes target the component's _classes property / Classes text area and can be used for any component.

Columns

Breakpoints are assigned from the smallest screen resolution to the widest until they reach the max width value. Multiple column classes can be defined on a singular component to change the layout responsively. The column number assigned to a component is configurable and can be any number between 1 and 12. It is advisable to not exceed a combined total of 12 columns for all components within a block for each breakpoint.

Class	Description
col-xs-8	On screens ranging from 0px to 520px the component fills 8 out of the 12 columns available.
col-sm-8	On screens ranging from 520px to 760px the component fills 8 out of the 12 columns available.
col-md-8	On screens ranging from 760px to 900px the component fills 8 out of the 12 columns available.
col-lg-8	On screens ranging from 900px to 1440px the component fills 8 out of the 12 columns available.
col-xl-8	On screens above 1440px the component fills 8 out of the 12 columns available.

Common

The following classes target the components _classes property / Classes text area and can be used for any component.

Base class	Chain classes	Description
comp-header-bg-color		The first class of two required to apply a solid background color to the component header specifically. Combine with one of the chain classes to apply the respective background color e.g. comp-header-bg-color black. Note: the chain class must be a predefined variable. The comp-header-bg-color mixin can be extended to include custom colors by adding another entry here
	black	Sets the background color of the component header to black and changes the font color to white.

Media

The following classes are specific to the Media component.

Class	Description
invert-play-icon	Inverts the media player play icon from white to black.
offset-media-controls	Offset control bar to display underneath the video element instead of overlaid. Useful for videos which contain subtitles or text within the bottom area of the video frame.

Narrative

The following classes are specific to the Narrative component.

Class	Description
items-are-full-width	Increases the width of the narrative elements to 100% in desktop view.

Component Item

The following classes target the component item's _classes property / Classes text area.

Hotgraphic item

The following classes are specific to the Hotgraphic component item's _classes property / Classes text area.

Class	Description
hide-desktop-image	Hide the hotgraphic pop up image on desktop.
hide-popup-image	Hide the hotgraphic pop up image for all screen sizes.

Content

The following classes should be used within the content area of a component and not target the component itself.

Class	Description
hide-on-desktop	Wrap content with this custom class to hide content above the medium breakpoint.
hide-on-mobile	Wrap content with this custom class to hide content below the medium breakpoint.

e.g.

Hide text content below the medium breakpoint

<span class='hide-on-mobile'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>Sed magna nibh, blandit id nibh eu, laoreet consequat nunc.

Hide text content above the medium breakpoint

Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class='hide-on-desktop'>Sed magna nibh, blandit id nibh eu, laoreet consequat nunc.</span>