vic_logo

Body content components - Vic Gov digital guide

Instructions on using all the content components available in the Body Content section, including navigation cards and calls to action.

When you're editing a page and you have the Body Content tab open, you can choose from the following components:

  • Anchor links: displays all H2s used on a page, at the top of the page.
  • Show table of contents: tick the checkbox to display anchor links to each Heading 2 on the page.
  • Basic text: used to add body content, quotes, images, links, buttons; see Format basic text / WYSIWYG .
  • Accordion: a layout to hide/reveal chunks of content; used for guides or checklists.
  • Navigation cards: (Navigation, Navigation featured, Navigation automated, Navigation featured automated).
  • Call to action: highlight and promote a user task within a topic area/website section.

The other items in the dropdown can only be used by site administrators on the vic.gov.au homepage. Please note: automated = internal link.

Screenshot of the Content components showing dropdown options

Technically you can copy in an alpha.vic.gov.au link into the non-automated cards, but we don't recommend it. If there is any change in the page title or if the page is deleted, your link will break. Using automated links for pages in alpha.vic.gov.au helps keep the site up to date.

Below you'll find instructions for adding and using these components.

See the Format basic text page for instructions on using this WYSIWIG component.


To insert an Anchor list, check the box at the top of the Body Content tab.

Once this is checked, the published page will have a list of all the ‘Heading 2s’ on the top of page. These are anchor links, which means the user can click an item in the ‘contents’ list and the link will jump them down to the position of that content on the page.

Screenshot of the Show table of contents checkbox

Accordion

Use the Accordion feature to create a scannable step-by-step list or checklist for users. It can also be used to conceal content where a page has a lot of content and the user doesn’t need to see it all at once (for example, General orders page; Annual reports page).

Screenshot of the Add an accordion section

Create an accordion

Leave the Accordion title field blank.

For the Accordion style you can choose Basic or Numbered. Numbered accordions should only be used for procedural-type instructions where the order of doing things is important.

In the Accordion content section:

Click the Add another component button to add another section in the accordion.&

Accordions should have at least 2 pieces of accordion content.

Accordion image dimensions

Landscape image: maximum 818 wide

Portrait image: maximum 400 high


Navigation cards highlight programs we support or link to related pages on external sites. Navigation cards are used widely on topic pages.

Navigation automated cards link to internal pages (nodes/any page in alpha.vic.gov.au), such subpages within a site section/subsite.

Navigation cards are rectangular horizontal and look like this:

Example of a navigation card used on a landing page of content

Create a Navigation card

Complete the following fields:

  • Title (mandatory)
  • Summary (mandatory)
  • Image (mandatory)
  • Link (mandatory)

Only use these on pages that contain a group of links to subpages or a topic page.

Create a Navigation automated card

Put your cursor in the Referred content field and start typing the title of the page you are linking to.

Pages that match what you have typed will appear in a list.

Click to select the correct one (or use your down arrow and enter key to select).

Screenshot showing the Add navigation card section
Screenshot showing the Add a navigation automated card section

Navigation featured and Navigation featured automated cards both display an image. The difference is in how the image is added and displayed.

Only use one navigation featured item on a page. The navigation featured should be first in a set of links.

Create a Navigation featured link

Complete the following fields:

  • Title (mandatory)
  • Summary (mandatory)
  • Image (mandatory)
  • Link (mandatory)
Screenshot showing the Add a navigation featured card interface

Create a navigation featured automated link

Put your cursor in the Referred content field and start typing the title of the page you are linking to. 

Pages that match what you have typed will appear in dynamic dropdown. 

Click to select the correct one (or use your down arrow and enter key to select).

For a Navigation featured automated link to display correctly, there must be an image in the destination page's Feature image section. 

Screenshot showing the Add a navigation featured automated card interface

Call to action

If there is no right sidebar content displaying, this will go full width; if you do have right sidebar content displaying, it will fit into the content section of the page. CHECK! ALWAYS SIDEBAR BECAUSE OF SOCIAL SHARING

We have 6 image options to choose from.

Screenshot showing the choice of six call to action images

Create a Call to action card

You need to add the following:

  • Title (mandatory)
  • Description (mandatory)
  • Feature image (mandatory)
  • URL (mandatory)
  • Link text (mandatory)
Screenshot showing the Add a call to action section

Timelines

Always start with a title for the timeline. For example Treaty timeline. Then add the title for each time period.

You then have the following options:

  • specific date range such as 20 March 1990 to 30 September 1990 OR use Text field for less specific dates such as March 1990
  • link if there's more detail on another webpage
  • Feature Image if you have one
  • Summary if you want to provide a short amount of detail

Reviewed 25 March 2019

Vic Gov digital guide