Basic text component
How to add and use the Basic text component. This component has a toolbar that allows you to format your text as well as add headings, hyperlinks, buttons, images and other types of media.
To see how the various formatting options display on the front-end, check out our sample page.
On this page:
Text formatting
The first 3 options in the WYSIWYG (“What you see is what you get”) toolbar:
bold your text
italicise your text
add strikethrough styling to your text
We follow the Australian Government Style Manual’s guidance on using italics, which is to use it sparingly as it can affect readability. The main use case is for titles of stand-alone works, legal cases and Acts.
Callout styles
We follow the Australian Government Style Manual’s guidance on using callouts, which is to use them sparingly and only for supporting content and not the main text.
There are 2 callout styling options in the toolbar:
The Single paragraph callout is the option in the Styles dropdown menu.
The WYSIWYG callout is the capital C button.
See an example of both types on our sample page.
Single paragraph callout
This callout style works best with short text, ideally a single paragraph. You can use it to highlight important or interesting content (like you see in printed magazines). It will indent the text, add a larger and bolder font, and apply a shaded line down the left side of the paragraph.
To apply this formatting:
highlight your text
click on the Styles dropdown menu next to the strikethrough option
click Callout.
The formatting isn’t visible in the back-end so it can be hard to know when you or a previous editor has applied this style, but you can look in the source code for <p class="wysiwyg-callout">.
WYSIWYG callout
This callout style has a different look but its main feature is that you can add headings and multiple paragraphs, list formatting and inline links.
On the front-end the text appears within a coloured box with a vertical line on the left.
To apply this callout:
Format your content as you want with paragraph breaks, headings, lists etc.
Select the whole block of text that you want to apply the callout style to.
Click the capital C icon on your toolbar (just next to the table icon).
In the back-end this formatting will show a faint grey line next to the text. In the source code, this style is formatted using <div class="callout-wrapper">.
Superscript and subscript
A superscript or subscript is a number, figure, symbol or indicator that is smaller than the normal line of type and is set either slightly above it (superscript, e.g. 1) or below it (subscript, e.g. 1).
Buttons
Buttons should be used for strong calls to action.
To insert a button:
Move your cursor to a new paragraph.
Click the icon that looks like a document with text on it and says “Templates” if you hover over it (between Media and the subscript option).
Choose the primary button option, unless this is the 2nd button you're adding in a paragraph and then choose the secondary button option.
Click Insert. A button with the text "Primary button text" will appear in the Basic text component.
To edit the button text, click the button and start deleting the text. You have to leave at least one letter, otherwise the whole button will be deleted. Type the text you want to use, and then delete that other letter.
Button text should be kept short and action-oriented, e.g. “Apply now”.
To add the URL, click the button and then click the pencil icon. In the top Link URL field, it’s possible to add an internal link (by typing in the page title) or external link (must include https://www. at the start).
Make sure to click the green tick to apply the link to the button.
See an example of the primary and secondary buttons on our sample page.
Iframe
The icon in the toolbar is in between the capital C (callout) and Media, and includes a heart, music note, camera and lightning bolt symbols. It says “Embedded content” if you hover over it.
Click the icon, and then choose “Iframe” from the dropdown menu to bring up the settings and options for embedding your Iframe.
More instructions and information can be found in these related guides:
Media – embed documents, images and videos
The icon in the toolbar says “Media”, and when you click on it a pop-up window for the CMS media library will appear. You can search in the library for files that have already been uploaded, or upload new documents, images and videos directly in this window.
Note: Audio files are not supported in the CMS.
More instructions and information about uploading and using media can be found in these related guides:
Hyperlinks
Read more about how to add, edit and remove hyperlinks in our how-to guide: Add a hyperlink to a webpage, email address or phone number.
Lists
See examples of all the possible ways to format lists on our sample page.
Bullet or number lists
Create lists in your text by highlighting the line and selecting one of the list icons (either bulleted or numbered) in the WYSIWYG toolbar.
Use numbered lists for instructions that need to be followed in order. Use bulleted lists where the order of the items is not important.
Nested lists
The Style Manual says to avoid using a multilevel list but for some situations, such as reproducing legislation or ministerial directions, you may need to match the formatting exactly. This can often be hard to read though, so should only be done sparingly.
To create levels within a list, you can use the Tab key on your keyboard, or the indent buttons on the toolbar. (These buttons are not able to be selected until you have added list formatting and your cursor is placed on the list item you want to indent.)
Apply list formatting to the whole list.
Then select the list items you want to indent and click the indent button or the Tab key on your keyboard. You can also select items and choose the numbered list button to change from bulleted to numbered.
Read more and see examples of advanced options in our how-to guide: Advanced formatting for nested and complex lists.
Quotes
We have two quote styles:
An indendented style that can add visual interest to a news article or a case study.
A style that used to indicate direct speech from a person.
See an example of both types on our sample page.
Block quote – an indented section of text
This style is applied by clicking on the quotation mark symbol (says “Block quote” if you hover over it) in the toolbar.
In the back-end, you’ll see a grey vertical line appear.
On the front-end, the text stays as 'Normal' and doesn't include the quote mark design, but does add both a left and right indent.
Blockquote – used for direct speech
This should be used for quotes from a person. This styling indents the quote and displays it in a larger, bolder font with large grey double quote marks around it. If you have a source, this goes on a new line below and is indented as well.
To format a block quote:
Place your cursor in the Body content area where you want your quote to appear.
Click on the Template icon and select the Blockquote option and click the Insert button. Some dummy text will appear with 2 lines for a caption underneath.
Highlight the template text and paste in your own over it.
Paste your caption text in separately as it has different styling applied in the CSS.
Tables
We have 2 options for adding a table to your content:
the table option in the Basic text component toolbar (instructions below)
Basic text component – table option
In the Basic text component, look for the Table icon.
Clicking on this icon will let you set up a basic table with anywhere between 10 rows and 10 columns. The table will appear in the Basic text component.
Clicking on a cell in the table will give you options to:
edit the columns by adding some, deleting some, selecting the whole column or making the column the header
edit the rows by adding some, deleting some, selecting the whole column or making the column the header
merge cells or split cells
add a caption
Clicking the icon that appears to the top-left when hovering over the table will highlight the whole table and let you delete it.
Clicking either of the two “return” icons (look like arrows pointing left) at the top or bottom of the table, will add a paragraph break either above or below the table.
Here’s an example of a table with 2 columns, 4 rows and headers in the first row:
See more examples of how the basic table can display on our sample page.
Advanced settings for tables
To apply advanced settings to your table, read our how-to guide: Tables: Column width, alignment and merging cells
Heading styles
The option to apply or change heading styles is the dropdown menu that will most likely say “Paragraph”. If you hover over it, it will say “Heading”.
It will display the heading size if you have selected text that already has a style applied to it.
Read our how-to guide for more guidance on headings: Apply heading styles in the Basic text component
Source code
The Source button will let you view the source code of the text – this means that the formatting won’t be visible, but will instead show as HTML tags. For example, bold text will show as <strong>.
It can be useful to view the source code if you want to copy and paste all the text into a different Basic text component, as it will ensure all the formatting transfers across.
Select the Source button again to revert back to the formatted display.
Related articles