Applying Style to text

To ensure the text is consistent across the entire module, we have created many text Style options that are cohesive among each other and provide a variety of options to choose from. These styles have pre-defined padding, font and colours. The default text Style across the module is called narrative.

All Styles can be adjusted by the Design team to match the brand guidelines.

Kindly note that you need Edit content permission to access the Content editor.

We can apply different Styles to text by selecting one from the Styles dropdown. Here, we can find the most commonly used Styles.

Below is the list of text Style classes as they appear by default. They can be assigned to text manually like this:

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

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	An option of light-coloured, centred, bold text and coloured background.
example-color1-body	An option of dark-coloured text and coloured background.
example-color2-title	An option of light-coloured, centred, bold text and coloured background.
example-color2-body	An option of dark-coloured text and coloured background.
example-color3-title	An option of light-coloured, centred, bold text and coloured background.
example-color3-body	An option of dark-coloured text and coloured background.
example-color4-title	An option of light-coloured, centred, bold text and coloured background.
example-color4-body	An option of dark-coloured text and coloured background.
label	Dark-coloured, centred text and no background.
label-reversed	Light-coloured, centred text and no background.
label-large	Larger dark-coloured, centred text and no background.
label-large-reversed	Larger light-coloured, centred text and no background.
mcq-question	Dark-coloured text and no background. Use this Style for the question in Multiple Choice Questions.
mcq-option	Dark-coloured text and no background. Use this Style for the options in Multiple Choice Questions.
mcq-explanation	Dark-coloured text and no background. Use this Style for the explanation in Multiple Choice Questions.
user-instruction	Dark-coloured text and no background. Use it for user instructions across the module, as it is designed to appear different from the regular/narrative text.
highlight	`<div class="narrative">This is an example text with <span class="highlight">highlight</span> in the middle.</div>` Yellow text highlighter.
highlight-positive	`<div class="narrative">This is an example text with <span class="highlight-positive">highlight positive</span> in the middle.</div>` Green text highlighter.
highlight-negative	`<div class="narrative">This is an example text with <span class="highlight-negative">highlight negative</span> in the middle.</div>` 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 and grey background.
notepad-body	Dark-coloured text and grey background.
sidebar-title	An option of light-coloured, centred, bold text and coloured background.
sidebar-body	An option of dark-coloured text and grey background.
guidance-title	An option of light-coloured, centred, bold text and coloured background.
guidance-body	An option of dark-coloured text and grey background.
regulation-title	An option of light-coloured, centred, bold text and coloured background.
regulation-body	An option of dark-coloured text and grey background.
verticalgap-small	Adds a small gap between text.
verticalgap-default	Adds a regular gap between text.
verticalgap-large	Adds a large gap between text.
assessment-instruction	Dark-coloured, indented text and no background.
assessment-question	Dark-coloured text and light grey background. Use this Style for the question in assessment Multiple Choice Questions.
assessment-option	Dark-coloured text and no background. Use this Style for the options in assessment Multiple Choice Questions.
assessment-explanation	Dark-coloured text and light grey background. Use this Style for the explanation in assessment Multiple Choice Questions.
assessment-scenario	Dark-coloured text with no padding and no background.
summary-leader	An option of light-coloured text and coloured background
newspaper-container	`<div class="newspaper-container">` `<div class="newspaper-title">Text</div>` `<div class="newspaper-body">Text</div>` `<div class="newspaper-date">Text</div>` `</div>` This class adds a border around the text placed inside of it.
newspaper-container-financial	This class adds a border around and a coloured background behind the text placed inside of it.
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	`<div class="speech-bubble left">Text</div>` An option of a light-coloured text and a coloured background with a triangle, imitating a speech bubble. We can change the position of the triangle by replacing "left" with up, down or right.
speech-bubble2	`<div class="speech-bubble2 left">Text</div>` An option of a light-coloured text and a coloured background with a triangle, imitating a speech bubble. We can change the position of the triangle by replacing "left" with up, down or right.
dialogue1	`<div class="narrative dialogue1"><strong>Manager:</strong> "Why? Has the regulator asked to see these?"</div>` Adds a vertical, coloured line in front of the text. Used in addition to another class that styles text, e.g., narrative. Change the class number for four available options, e.g., dialogue4.
speech-color1	An option of light-coloured text and coloured background.
speech-color2	An option of dark-coloured text and coloured background.