Applying Style to text | Skillcast Support Hub

To keep text consistent across your entire module, a range of pre‑defined text Styles is available. These Styles come with built‑in padding, fonts and colours, ensuring a cohesive look throughout the content. The default Style applied to new text is narrative. If needed, our Design team can adjust these Styles to match your organisation’s brand guidelines.

Using Text Styles

You can apply a Style by selecting one from the Styles dropdown in the editor.

These are the most commonly used Styles and can also be applied manually, for example:

<div class="narrative">Example text.</div>

Style Class Reference Table

The table below lists all Style classes and how they look by default.

Style class	How does it look?
narrative	Dark-coloured text and no background. This is the default text Style.
narrative-reversed	Light-coloured text and no background.
narrative-additional	Light-coloured text and dark background.
narrative-large	Larger dark-coloured text and no background.
narrative-reversed-large	Larger light-coloured text and no background.
example-color1-title	Light-coloured, centred, bold text with coloured background.
example-color1-body	Dark-coloured text with coloured background.
example-color2-title	Light-coloured, centred, bold text with coloured background.
example-color2-body	Dark-coloured text with coloured background.
example-color3-title	Dark-coloured, centred, bold text with coloured background.
example-color3-body	Dark-coloured text with coloured background.
example-color4-title	Dark-coloured, centred, bold text with coloured background.
example-color4-body	Dark-coloured text with coloured background.
label	Dark-coloured, centred text and no background.
label-reversed	Light-coloured, centred text with coloured background.
label-large	Larger dark-coloured, centred text and no background.
label-large-reversed	Larger light-coloured, centred text with coloured background.
mcq-question	Dark-coloured text and no background. Use for Multiple Choice Question (MCQ) text.
mcq-option	Dark-coloured text and no background. Use for MCQ answer options.
mcq-explanation	Dark-coloured text and no background. Use for MCQ explanations.
user-instruction	Dark-coloured text and no background. Use for instruction text that should stand out from narrative.
highlight	Yellow text highlighter.
highlight-positive	Green text highlighter.
highlight-negative	Red text highlighter.
warning	Light-coloured text and bright background.
citation	Dark-coloured, right-aligned, italic text and no background.
notepad-title	Dark-coloured text with grey background.
notepad-body	Dark-coloured text with grey background.
sidebar-title	Light-coloured, centred, bold text with coloured background.
sidebar-body	Dark-coloured text with grey background.
guidance-title	Light-coloured, centred, bold text with coloured background.
guidance-body	Dark-coloured text with grey background.
regulation-title	Light-coloured, centred, bold text with coloured background.
regulation-body	Dark-coloured text with grey background.
verticalgap-small	Adds a small vertical gap.
verticalgap-default	Adds a default vertical gap.
verticalgap-large	Adds a large vertical gap.
assessment-instruction	Dark-coloured, indented text and no background.
assessment-question	Dark-coloured text on light grey background. Use for assessment question text.
assessment-option	Dark-coloured text and no background. Use for assessment options.
assessment-explanation	Dark-coloured text on light grey background. Use for assessment explanations.
assessment-scenario	Dark-coloured text with no padding and no background.
summary-leader	Light-coloured text with coloured background.
newspaper-container	Adds a border around the content placed inside.
newspaper-container-financial	Adds a border and coloured background behind content.
newspaper-title	Larger dark-coloured text and no background.
newspaper-body	Dark-coloured text and no background.
newspaper-date	Smaller dark-coloured text and no background.
speech-bubble	Light-coloured text with coloured background and triangle pointer (left, up, down or right).
speech-bubble2	Light-coloured text with coloured background and triangle pointer (left, up, down or right).
dialogue1–dialogue4	Adds a vertical coloured line next to the text. Use together with another text Style such as narrative.
speech-color1	Light-coloured text and coloured background.
speech-color2	Dark-coloured text and coloured background.

Conclusion

You can now apply a wide range of Styles to ensure your module’s text remains structured, consistent and visually engaging. If you need support or your permissions seem incorrect, contact your Customer Success Manager by selecting Send us a message via the help icon on your portal, or by emailing [email protected].