A sample page showing formatting options in the basic text component (WYSIWYG)

Table of contents - above you can see a list of all the Heading 2s and Heading 3s on this page so users can easily scan the main headings and click to jump down to one.

Basic text

This is a basic text component. You use this to add and format body content.

You can include:

• links
• lists (bulleted and numbered)
• indented quotes (or callout)
• block text

Here's an internal link.

Here's an internal anchor link to a heading lower down on this page.

Here's an external link.

Headings styles - this 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 on the dropdown list.

This is a heading 3

For accessibility reasons, but also good user comprehension, headings must always be cascading. This means the next heading after a heading 2 must always be a heading 3. Never apply 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

Block quote

We have two block quote styles. Quotes are used to indicate direct speech. Block quotes can add visual interest to a news article or a case study, but don't overdo them.

This is the block quote with 2 lines of caption. To add this type of block quote, insert the cursor on a new line (paragraph) and click the 'page' icon.

Insert a block quote and then copy and paste to replace the default text with your text. You'll need to copy and paste the source line separately because that has different styling applied in the CSS.

Following is the default text that comes up when you insert a block quote with 2 lines of caption. The 2 lines is created using a line break (Shift + Enter).

Indented quote

The indented block quote style is less pronounced than the previous block quote. The text format stays 'Normal' and it doesn't include the quote mark design. It is essentially just indented text.

This indented quote 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.

Callout styles

Single paragraph callout

To apply this, select some text, click on the block styles dropdown next to the bold and italics buttons. Then click Callout. It doesn't display differently in the WYSIWYG, it just looks like body text so it can be hard to know when you or a previous editor has applied this style. In the source code this style is formatted via <p class="wysiwyg-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

This callout style should be used when you have:

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

You can select a chunk of content and apply this callout style and it will appear as one callout with a single coloured vertical line on the left and a single shaded 'box' behind the text. In the source code, this style is formatted via <div class="callout-wrapper">.

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
         1. magna magna (should be ???)
3. ut luctus nisl

Bulleted list

• ultricies vitae (style: black/grey dot)
• Quisque ut tortor laoreet
  • luctus tellus at (style: circle)
    • pretium dolor (style: square)
    • Maecenas efficitur
      • mi at ipsum egestas (style: square)
        • ullamcorper.
        • Maecenas
          • a lacus nisi.
    • Morbi dictum feugiat
    • odio, nec volutpat
    • diam tristique
  1. vel. Suspendisse dui dui, cursus eleifend ipsum id, pelle
  2. ntesque dictum sapien
• Fusce eleifend rhoncus orci vitae convallis. Maecenas eleifend ut nunc non commodo. Cras sapien augue, dignissim eu viverra at, placerat eget libero. In at nunc lectus. Curabitur felis libero, lacinia in augue sit amet, gravida congue urna. Nullam id maximus dolor.

Horizontal line

Following is a horizontal line. It's very seldom used on our sites because we use headings to signal a change in topic. It can be used to separate content or signal a break in content. It's more relevant in fiction and longer-form articles.

---

Buttons

Here are some buttons. To use them click the 'page' icon and choose a button. The words 'Primary button text' or 'Summary button text' will appear underlined in the body text. Rewrite the text to suit then right click to 'edit link'.

Primary button text

You can't paste text into a button, it deletes the link. Type what you need in the middle of the underlined text and then delete the original text from around it.

Primary button text > Primary Click here button text > Click here

Secondary button text

The secondary button is a different colour, that's all.

Embedded media

Image

The following is an example of an image embedded with a caption.

This is a caption typed into the Embed media screen

Video

The following is an example of a video embedded with a transcript.

Documents for download

And here are a couple of embedded documents. When you embed a document, the icon and file size are displayed:

DPC Annual Report 2017-18

docx 3.97 MB

2016-17 consultancies valued at $10,000 or greater

pdf 139.24 KB

DPC Annual Report 2016-17

pdf 4.11 MB

When you embed a document, you are able to display the date a file was last updated. This should be used when an important file is regularly updated so users can easily tell if there's a newer version.

To do this, you tick the checkbox 'Display last updated date' when embedding the file. (Note this displays the date the file was added to the CMS, not the date the owner saved an update.)

DPC Annual Report 2017-18

pdf 3.84 MB | Updated: 19 June 2019

Tables

Examples

Here's a table with the first row set as the header.

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

This table has the first column set as the header

(Right-click anywhere in the table in the CMS and choose Table properties.)

This table has both the first column and the first row set as headers

This table has neither first column nor first row set as a header

Use sparingly as this can be an accessibility issue.

Lists with multiple levels

The Style Manual says to avoid using a multilevel list but sometimes when we are reproducing content such as a part of legislation or ministerial directions, we need to match the formatting exactly. This is a bad content experience and hard to read and understand, so should only be used when we are required to reproduce a government document exactly as the source.

Here are some examples of list formats we need:

• 2 levels of ordered list (level 1 uses list item identifiers 1, 2, 3 and the level 2 ordered list uses list item identifiers i, ii, iii)
• ordered lists where the format is 1.1, 1.2, 1.3, 2.1 etc
• ability to set the level 1 ordered list identifier to be other than 1, 2, 3 - ie level 1 ordered list starts with lower case alphabetical (a, b, c) or lower case roman (i, ii, iii)
• ability to continue list numbering after a heading or additional paragraph
• combination of ordered and unordered (level 1 is ordered and within this level 2 is bullets or vice versa)

More resources