Sample page: Basic text component formatting options

This page shows examples of the formatting options available using the basic text component.

The Basic text component is where you add the main body content for your page.

The toolbar in this component can be used to add:

  • bold or italics formatting
  • headings
  • hyperlinks
  • buttons
  • lists
  • quotes and callouts
  • basic tables
  • embedded media (images, videos and documents)
  • iFrames

Below are examples of some of the commonly used formatting options. For instructions on how to apply these options in the CMS, read our user guides on the Digital Victoria Help Centre.

Heading styles

The above heading is Heading 2. To apply a heading you simply need to put your cursor anywhere in the heading and click the dropdown labelled 'Normal'. Choose from the styles in the dropdown list.

Heading 3

For accessibility reasons as well as to help user comprehension, headings should be heirarchical. This means initial headings on a page should be Heading 2 size, and any subheadings should be Heading 3. Never start with a Heading 3 on the page, or add a heading 4 after a heading 2.

Heading 4

Never skip a heading level just because you like the way it looks. This creates an accessiblity issue.

Heading 5

If you're using heading 5s your content probably needs a restructure!

Quote styles

We have two quote styles, labelled as "block quote" and "blockquote" in the toolbar.

Block quote – an indented section of text

This example is created using the icon with the double quotes on it (rollover label is 'block quote'). It displays with both a left and right indent.

Blockquote – used for direct speech

This is the block quote with 2 lines of caption, to indicate a quote directly attributed to a person.

Her Excellency the Honourable Linda Dessau ACGovernor of Victoria.

Callout styles

Single paragraph callout

This paragraph has the Callout style applied to it. Use it to highlight short pieces of text. It doesn't allow line breaks, headings or lists and it can be difficult to read large passages in this style. It only displays well for a single paragraph.

WYSIWYG callout


When to use

This callout style should be used when you have:

  • more than one paragraph
  • additional formatting, such as headings, lists and hyperlinks.

List formatting and nesting

Numbered list

  1. Select your text and click on the numbered list icon.
  2. When you have a numbered list, you can click the indent icon to push selected list items to the next level down.
    1. Second level numbered list (should be lower case alpha)
    2. donec egestas ultricies
      1. neque in elementum (should be lower case roman)
      2. Fusce blandit
  3. ut luctus nisl

Bulleted list

  • First level list style displays as a black/grey dot
  • Quisque ut tortor laoreet
    • second level displays as an en dash
      • third level also displays as an en dash
      • this level is hard to comprehend
      • so only use if you have to exactly replicate legislation
  • Fusce eleifend rhoncus orci vitae convallis. Maecenas eleifend ut nunc non commodo.

Advanced formatting options for lists

Read our guide for the html code to use to apply these settings.


There are 2 button options: primary and secondary. The only difference between them is the colour.

If using 2 buttons in the same section on a page, use the primary button first and then the secondary button to differentiate them.

Primary button

Secondary button

Embedded media


An example of an image embedded with a caption.

This is a caption typed into the Embed media screen


An example of a video embedded with a transcript.


When you embed a document it will display an icon, the file type and file size.

DPC Annual Report 2017-18
PDF 3.84 MB
(opens in a new window)

You are also able to choose whether to display the date that the file was last updated. This should be used when an important file is regularly updated so users can easily tell that it's the latest version.

DPC Annual Report 2017-18
PDF 3.84 MB
(opens in a new window)


For tips on advanced table settings, see our data table component guide.

First row set as the header

This is the table caption
Column 1Column 2Column 3 has quite a long headingColumn 4
Row 1 contentrow 1 contentYou can right-click on the table to access options such as deleting or inserting rows.1,234,567
Row 2 contentrow 2 content
  • sometimes tables have lists
  • sometimes tables have lists
  • sometimes tables have lists
Row 3 contentrow 3 contentMerging cells affects accessibility so is not recommended.568,658

First column set as the header

This is the table caption
Column 1 (as header)xxxxxyyyyyzzzzz
Next headingxyz
Next heading 2xyz
Next heading 3xyz
Next heading 4xyz

Both set as headers

This is the table caption
Column 1 (as header)column 2column 3column 4
Next headingxyz
Next heading 2xyz
Next heading 3xyz
Next heading 4xyz

No headers

Use this option sparingly as this can be an accessibility issue.

This is the table caption