South yarra home

normal text

START basic text stuff

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:

• bolded or italicised text formatting
• headings
• hyperlinks and 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.

Blockquote – used for direct speech

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

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.

Advanced formatting options for lists

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

Different list item markers

Disc:

• Oranges
• Apples
• Bananas
• Grapes

Circle:

• Oranges
• Apples
• Bananas
• Grapes

Square:

• Oranges
• Apples
• Bananas
• Grapes

Numbers:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Uppercase letters:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Lowercase letters:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Uppercase Roman numerals:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Lowercase Roman numerals:

1. Oranges
2. Apples
3. Bananas
4. Grapes

Combination lists

1. Apples
   • Pink lady
   • Fuji
   • Granny smith
2. Oranges
3. Bananas
   1. Lady finger
   2. Cavendish
   3. Plantain
4. Grapes
   1. Muscat
   2. Sultana
   3. Shiraz

Controlled list counting

Use if you need to start a numbered list at a specific number, rather than 1.

50. Jessica
51. Richard
52. Marcella
53. Nadim

Buttons

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 between the options available.

Primary button

Secondary button

Embedded media

Image

An example of an image embedded with a caption.

ADD EXAMPLE

Video

An example of a video embedded with a transcript.

ADD EXAMPLE

Documents

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

ADD EXAMPLE

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.

ADD EXAMPLE

Tables

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

ADD EXAMPLE

First row set as the header

First column set as the header

Both set as headers

No headers

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

More resources

[jo to add image files into reference site for this section]

Images

Our guidelines for images in body text say:

landscape images should be 818px wide by 496px high

portrait images no larger than 400px high

Here I've tested what happens when you have an image that is 818px but at different heights - this shows that the images are being resized for display as the CMS is finding them too high.

Testing image sizing - is display of images 818px wide affected by its height?

800x200

800x400

800x500

800x600

800x800

Smaller images

When you're inserting an image in body content, the width is important because our front end displays the width according to the breakpoint (device screen size). Images should be 818px wide.

Here you can see the same image (150px x 150px) embedded and embedded as thumbnail. Try reducing the size of your window - you'll to see that the first one expands to fill the width of your screen (and becomes pixellated because it was a small image not intended to be displayed so large).

Here's an image 'embedded':

Here's the same image 'embedded as thumbnail':

Here's an image 'embedded with caption' (you can't have both thumbnail and caption):

Data table content component

The Data table component allows a table that is too wide to fit on a device (eg mobile) to display as 'stacked'.

Here I've used code in the cells to control alignment.

Code has to be put into < carets > with the wording as follows:

• Right aligned: <p align="right">text</p>
• Centre aligned: <p align="center">text</p>
• Horizontally top aligned: <p valign="top">text</p>
• Horizontally bottom aligned: <p valign="bottom">text</p>