Custom Classes

The Vanilla theme comes with a host of custom classes that can be used to customise and differentiate one theme from another.

Content Object

Apply the following classes to the content object.

HTML

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.

Page

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

Class	Description
hide-page-header	Hides the page header on the page
header-color	Sets up the header solid background colour mixin. Combine with one of the following classes e.g. header-color background. Note: the following class must be a predefined variable. Mixin can be extended to include client colours. Can be set for menu and/or page header.
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
align-vert-center	Aligns the blocks child components centrally on the vertical axis.
align-vert-bottom	Aligns child components to the bottom of the parent block on the vertical axis.
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).
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
block-color	Sets up the block solid background colour mixin. Combine with one of the following classes e.g. block-color black. Note: the following class must be a predefined variable. Mixin can be extended to include client colours.
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.

Component

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

Media

Class	Description
invert-play-icon	Inverts the media player play icon from white to black

Component Item

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

Accordion item

Class	Description
align-image-left	Aligns the image to the left of the body text on desktop, defaults to underneath on smaller screens.
align-image-right	Aligns the image to the right of the body text on desktop, defaults to underneath on smaller screens.

Hotgraphic item

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