Basic text component

Owned by Hayley Stockall (Unlicensed)
Last updated: 12 Mar, 2024 by Marcella Marino
9 min read

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.

Basic text component toolbar (Claro theme)

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.

Both callout options in the Basic text toolbar.

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:

  1. highlight your text

  2. click on the Styles dropdown menu next to the strikethrough option

  3. 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:

  1. Format your content as you want with paragraph breaks, headings, lists etc.

  2. Select the whole block of text that you want to apply the callout style to.

  3. 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:

  1. Move your cursor to a new paragraph.

  2. 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).

  3. Choose the primary button option, unless this is the 2nd button you're adding in a paragraph and then choose the secondary button option. 

  4. Click Insert. A button with the text "Primary button text" will appear in the Basic text component.

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

    1. Button text should be kept short and action-oriented, e.g. “Apply now”.

  6. 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).

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

 

  1. Move your cursor to a new paragraph.

  2. Choose the 3rd-last icon in the bottom row of the toolbar. It looks like a document with text on it, and says “Insert template” if you hover over it.

  3. Choose the primary button option, unless this is the 2nd button you're adding in a paragraph and then choose the secondary button option. 

  4. Change that text to suit what you'd like the button to say, e.g. "Apply now". You can't paste text into the button as it will delete the link, so the easiest way to change the text is to put your cursor after the first letter, type your label, then use the delete and backspace buttons to delete the rest of the default text.

    1. Another way is to go into the source code and add the text into the relevant spot, but only do this if you're confident with navigating the source code.

  5. You also need to add the URL you'd like your button to link to:

    1. Place your cursor somewhere within the hyperlinked text and click on the Link icon in the toolbar or use the keyboard command for hyperlinks. 

    2. In the Edit Link pop-up box, delete ‘Primary-button-link’ in the URL field and start typing your destination link. If it’s an internal page, choices will show up for you to select the correct page. If it's external, make sure you add in the full URL including the https:// text at the start.

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

  1. Apply list formatting to the whole list. 

  2. 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:

  1. Place your cursor in the Body content area where you want your quote to appear.

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

  3. Highlight the template text and paste in your own over it.  

    1. 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:

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

 

​