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.

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. From v9.37.0 each chain class also has a prefixed variant e.g. bg-color bg-black. The prefixed variant can be safely combined with a header-color class on the same article or block without the two conflicting. Note: when applied to an article or block, bg-color cascades into child blocks and components, recoloring their titles and links to the inverted font color. Apply it to the most specific element you intend to style to avoid unexpected coloring of descendants. (The page header / menu area is unaffected; use header-color for that.) 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

The following classes apply a solid background color to the header of a menu item, page, article, or block (the header title / subtitle / body / instruction area), without coloring the rest of the element. As of v9.37.0 the header-color mixin works on article and block headers; previously it was limited to menu and page headers.

Base class	Chain classes	Description	Released
header-color		The first class of two required to apply a solid background color to the 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. From v9.37.0 each chain class also has a prefixed variant e.g. header-color header-black. The prefixed variant can be safely combined with a bg-color class on the same article or block without the two conflicting. The header-color mixin can be extended to include custom colors by adding another entry here.	menu/page: v5.2.0 article/block: v9.37.0
	black	Sets the background color of the header to black and changes the font color to white.	v8.1.1
	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.	v5.2.0
	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.	v5.2.0
	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.	v5.2.0

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

To apply a background color to the page header, use the header-color classes documented under Global common classes.

The following classes can be applied to articles.

Class	Description	Released
extend-container	Extend width of child blocks to max page width. Only required when used alongside block-level column classes for greater flexibility with page layout — see Columns for details.	v9.33.0

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 (720px by default). 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

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

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

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

The following classes can be applied to component items.

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

Column classes can be applied at menu item, block, or component level to control layout width responsively across breakpoints.

• Menu item support added in v9.3.0
• Component support added in v6.0.0
• Block support added in v9.33.0

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), block, or component to change the layout responsively. The column number assigned is configurable and can be any number between 1 and 12, with 12 equalling full width. The application of column classes 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.

The breakpoint widths shown in the tables below are the framework defaults and are configurable per course, see How breakpoints work.

Tip for Authoring Tool users: Column classes can be applied in the AAT, however the AAT enforces a maximum of 2 components per block and the layout system only recognises three positions (full, left, right). This means block-level column layout is not currently supported in the AAT. Column classes are most useful in the AAT at menu item and component level (max 2 components per block). This is particularly effective for breaking up the default full-width or 50/50 layout — for example, staggering component widths to create more diverse layouts, or increasing text width alongside imagery.

In the examples below, the trailing number sets how many of the 12 available columns the element fills, applied at the listed breakpoint and above. A larger breakpoint class overrides a smaller one.

Class	Breakpoint (default min width)	Description
col-sm-1	small (0px)	Fills 1 of 12 columns (8%)
col-md-3	medium (720px)	Fills 3 of 12 columns (25%)
col-lg-4	large (960px)	Fills 4 of 12 columns (33%)
col-xl-6	xlarge (1280px)	Fills 6 of 12 columns (50%)

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/block/component will occupy

For example:

col-md-8 col-lg-4

In this example, a component would display at 100% below the medium breakpoint.

At the medium breakpoint and above (720px by default), the component displays at a width of 8 columns or 66.66% (100% = 12 columns. 100/12 * 8 = 66.66%).

At the large breakpoint and above (960px by default) the larger column class will override the smaller column class and instead display the component with a width of 4 columns or 33.33%.

When applying column classes to a block, the optional article class extend-container can be added to the parent article to extend width of child blocks to max page width. See Article for details.

Column margin classes can be applied at menu item, block, or component level to offset (indent) an element from the start or end of its container, measured in columns. These are logical properties: margin-start indents from the left in LTR languages and from the right in RTL languages; margin-end is the inverse.

The column number assigned can be any value between 0 and 12. Combine with column classes to create staggered or offset layouts (e.g. an 8-column component indented 2 columns from the start). All column margin classes were added in v9.18.0.

The breakpoint widths below are the framework defaults and are configurable per course, see How breakpoints work.

In the examples below, the trailing number sets how many columns the element is indented, applied at the listed breakpoint and above. margin-start-* indents from the start edge, margin-end-* from the end.

Class	Breakpoint (default min width)	Description
margin-start-sm-1	small (0px)	Indents 1 column from the start
margin-start-md-2	medium (720px)	Indents 2 columns from the start
margin-start-lg-3	large (960px)	Indents 3 columns from the start
margin-start-xl-4	xlarge (1280px)	Indents 4 columns from the start
margin-end-sm-1	small (0px)	Indents 1 column from the end
margin-end-md-2	medium (720px)	Indents 2 columns from the end
margin-end-lg-3	large (960px)	Indents 3 columns from the end
margin-end-xl-4	xlarge (1280px)	Indents 4 columns from the end

margin-start-[size]-[n] / margin-end-[size]-[n]

Selector	Description
[size]	Defines the screen size that the margin applies to (sm, md, lg, xl)
[n]	Number of columns (0-12) the menu item/block/component is indented from the start or end

For example:

col-md-8 margin-start-md-2

In this example, a component displays at 100% below the medium breakpoint. At the medium breakpoint and above (720px by default), the component occupies 8 columns and is indented 2 columns from the start, leaving 2 columns of space on the end.

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 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>

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>

Several Vanilla classes respond to screen width: the column and column-margin classes, plus reverse-desktop-order, hide-on-desktop, and hide-on-mobile. They use four named breakpoints, small, medium, large, and xlarge, each defined as a minimum screen width. A class targeting a breakpoint applies at that width and above, and a larger breakpoint overrides a smaller one.

The pixel width of each breakpoint is set per course in config.json under screenSize, so the exact widths depend on your course. The current framework defaults are small 0px, medium 720px, large 960px, and xlarge 1280px. These defaults changed in core v6.36.0 / framework v5.31.2; courses built on earlier versions may use different widths.