Body content components - Vic Gov digital guide

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.
• Embedding an online form: (OpenForms form) into your content

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

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.

---

Anchor links (Show table of contents)

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

As an editor, you have the option to display a list of:

• Heading 2s only
• both Heading 2 and Heading 3 in a nested listed

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.

---

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).

Once the accordion is live, it will show a button for 'Open all' and 'Close all' in the front end.

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 (and Navigation automated)

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:

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).

---

Navigation featured (and Navigation featured automated)

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)

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. 

---

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.

We have 6 image options to choose from.

Create a Call to action card

You need to add the following:

• Title (mandatory)
• Description (mandatory)
• Feature image (mandatory)
• URL (mandatory)
• Link text (mandatory)

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 or long amount of detail. This includes a WYSIWYG section where you can include formatting like links, bullet points and styling

Embedding an online form

You can create an online form using our approved online forms tool, OpenForms.

Once the online form has been created, you can embed this form on your landing page.

To embed the online form, select 

Paste the OpenForms link into the Form link field:

Once the link has been added and published, the online form embed will appear in the front end.