
On this page:
- Basic text
- Headings styles - this is heading 2
- This is a heading 3
- Quote styles
- Block quote
- Indented quote
- Callout styles
- Single paragraph callout
- WYSIWYG callout
- List formatting and nesting
- Numbered list
- Bulleted list
- Horizontal line
- Buttons
- Embedded media
- Image
- Video
- Documents for download
- Tables
- Examples
- Lists with multiple levels
- More resources
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 anchor to a heading lower down on this page.
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">.
How to apply
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).
List formatting and nesting
Numbered list
- Select your text and click on the numbered list icon.
- When you have a numbered list, you can click the indent icon to push selected list items to the next level down.
- Second level numbered list (should be lower case alpha)
- donec egestas ultricies
- neque in elementum (should be lower case roman)
- Fusce blandit
- magna magna (should be ???)
- 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.
- mi at ipsum egestas (style: square)
- Morbi dictum feugiat
- odio, nec volutpat
- diam tristique
- vel. Suspendisse dui dui, cursus eleifend ipsum id, pelle
- ntesque dictum sapien
- luctus tellus at (style: circle)
- 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'.
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
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 screenVideo
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
2016-17 consultancies valued at $10,000 or greater
DPC Annual Report 2016-17
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
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 guide.
Column 1 | Column 2 | Column 3 has quite a long heading | Column 4 $000 |
---|---|---|---|
Row 1 content | row 1 content | You can use right-click to access table commands, such as deleting or inserting rows. Note that you should set the first row as header for tables with headings (which pretty much all tables should have) - this displays the table header with correct formatting and is also important for accessibility.
| 1,234,567 |
Row 2 content | row 2 content | Merging cells affects accessibility so is not recommended. | 384 |
Row 3 content | row 3 content | asymmetrical beard. Waistcoat photo booth synth drinking vinegar gastropub. Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee. | 568,658 |
x | y | z | zz |
This table has the first column set as the header
(Right-click anywhere in the table in the CMS and choose Table properties.)
Column 1 (as header) | xxxxx | yyyyy | zzzzz |
---|---|---|---|
Next heading | x | y | z |
Next heading 2 | x | y | z |
Next heading 3 | x | y | z |
Next heading 4 | x | y | z |
This table has both the first column and the first row set as headers
Column 1 (as header) | column 2 | column 3 | column 4 |
---|---|---|---|
Next heading | x | y | z |
Next heading 2 | x | y | z |
Next heading 3 | x | y | z |
Next heading 4 | x | y | z |
This table has neither first column nor first row set as a header
Use sparingly as this can be an accessibility issue.
wwwww | xxxxx | yyyyy | zzzzz |
w | x | x | z |
w | x | x | z |
w | x | x | z |
w | x | x | z |
Lists with multiple levels
The Style Manual says to avoid using a multilevel 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
Reviewed 02 May 2023