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.

Global common classes

The following classes can be applied to content objects, articles, blocks, and components.

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

Content Object

Apply the following classes to the content object.

The following classes target the _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 _classes property / Page Classes text area.

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

Base class	Optional classes	Description
header-color		The first class of two required to apply a solid background colour to the page header element. Combine with one of the optional classes to apply the respective background colour e.g. header-color background. Note: the optional 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 colours by adding another entry here.
	transparent-light	Sets the background colour of the header to transparent and changes the font colour to @font-color. Useful for displaying text over a light background image.
	transparent-dark	Sets the background colour of the header to transparent and changes the font colour to @font-color-inverted. Useful for displaying text over a dark background image.
	background	Sets the background colour of the header to use the variable @background (default is black) and changes the font colour to use the variable @background-inverted (default is white). These variables can be changed in the _colors.less file.

Block

Apply the following classes to 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

Apply the following classes to the component's _classes property / Classes text area.

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 can be used for any component.

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

Media

The following custom 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 custom 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

Apply the following classes to the component item's _classes property / Classes text area.

Hotgraphic item

The following custom classes are specific to the items within a Hotgraphic component.

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.