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) unless otherwise stated.

Global common classes

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

Base class	Chain class	Description	Released
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.	v5.5.0
	transparent-light	Sets the background color of the targeted element to transparent and changes the font color to black. Useful for displaying text over a light background image.	v5.5.0
	transparent-dark	Sets the background color of the targeted element to transparent and changes the font color to white. Useful for displaying text over a dark background image.	v5.5.0
	black	Sets the background color of the targeted element to black and changes the font color to white.	v5.5.0
	background	Sets the background color of the targeted element 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.	v5.5.0
	white	Sets the background color of the targeted element to white and changes the font color to black.	v9.8.3

Content Object - contentObjects.json (Framework) / page (Authoring Tool)

The following class target the contentObject's _htmlClasses property / HTML Classes text area. These classes exclusively target the page and should not affect the menu item.

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

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

Class	Description	Released
hide-page-header	Hides the page header on the page.	v5.2.0

Base class	Chain classes	Description	Released
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 black. 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.	v5.2.0
	black	Sets the background color of the page header to black and changes the font color to white.	v8.1.1
	transparent-light	Sets the background color of the page header to transparent and changes the font color to @font-color. Useful for displaying text over a light background image.	v5.2.0
	transparent-dark	Sets the background color of the page header to transparent and changes the font color to @font-color-inverted. Useful for displaying text over a dark background image.	v5.2.0
	background	Sets the background color of the page 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.	v5.2.0

Block - blocks.json (Framework) / block (Authoring Tool)

The following classes can be applied to blocks.

Class	Description	Released
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.	v5.1.0
extend-container	Extend width of block to max page width (default is 1440px) This class is mutually exclusive with the extend-content-container and will take preference if combined.	v5.0.0
extend-content-container	Extend width of block to 70rem (default is 1120px). This class is mutually exclusive with the extend-container.	v5.5.0

Component - components.json (Framework) / component (Authoring Tool)

The following classes can be applied to components.

Columns

Breakpoints are assigned from the smallest screen resolution to the widest until they reach the max content width value. Multiple column classes with different breakpoint selectors can be defined on a singular menu item (contentObject) or component to change the layout responsively. The column number assigned to a menu item or component is configurable and can be any number between 1 and 12 with 12 equaling full width. The application of columns overrides the component _layout (Framework) and left / right / full width (Authoring Tool) configuration. It is advisable for beginners not to exceed a combined total of 12 columns for all components within a block for each breakpoint.

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

col-[size]-[n]

Selector	Description
[size]	Defines the screen size that the number of columns apply to
[n]	Defines the number of columns the menu item/component will occupy

e.g.

col-md-8 col-lg-4

In this example, a component would display at 100% below the medium breakpoint. On a screen size larger than 760px the component display at a width of 8 columns or 66.66% (100% = 12 columns. 100/12 * 8 = 66.66%). On a screen size larger than 900px the larger column class will override the smaller column class and instead display the component with a width of 4 columns or 33.33%.

Common

The following classes can be applied to components.

Base class	Chain classes	Description	Released
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	v6.1.0
	black	Sets the background color of the component header to black and changes the font color to white.	v6.1.0

Media

The following classes can only be applied to the Media component.

Class	Description	Released
invert-play-icon	Inverts the media player play icon from white to black.	v5.2.0
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.	v5.6.0

Narrative

The following classes can only be applied to the Narrative component.

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

Component Item

The following classes can be applied to component items.

Hotgraphic item

The following classes can only be applied to the Hotgraphic component item.

Class	Description	Released
hide-desktop-image	Hide the hotgraphic pop up image on desktop.	Hotgraphic v5.0.0
hide-popup-image	Hide the hotgraphic pop up image for all screen sizes.	Hotgraphic v5.1.1

Content

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

Class	Description	Released
hide-on-desktop	Wrap content with this custom class to hide content above the medium breakpoint.	v6.1.0
hide-on-mobile	Wrap content with this custom class to hide content below the medium breakpoint.	v6.1.0
figure-quote	Add to a <figure> element to apply the Vanilla quote styling - see the semantic HTML wiki page for more information.	v9.0.0
aside-pull-quote	Add to an <aside> element to apply the Vanilla pull quote styling.	v9.0.0
is-bold	Applies a bold visual style to the wrapped text content. It is recommend to only apply this class to <span> elements	v9.0.0
is-italic	Applies an italic visual style to the wrapped text content. It is recommend to only apply this class to <span> elements	v9.0.0

Hide examples

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>

Visual style examples

Alter text to be visually bold

<span class='is-bold'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

Alter text to be visually italicised

<span class='is-italic'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>