Victoria government logo
coronavirus.vic.gov.au

Testing page for analytics

This page helps us test our Google Tag Manager implementation on all SDP components and features. It exists on all SDP websites.

This is an Introduction banner

This feature was created so that a webpage can have a hero image in the banner and then in this section you can include an intro sentence and feature links. These links display to the right.

yum yum choccie
yum yum choccie

Primary campaign

This is a primary campaign.

Primary campaign blocks sit at the top of the page, just under the header section and above the body content section.

How to build a primary campaign

On this page

Accordion

  • Use this component to create a scannable step-by-step list or checklist for users. Accordions are also a great way to break up bulky text. Use them where a page has a lot of content the user doesn’t need to see all at once.

  • Accordions have the same WYSIWIG window as the Basic text component. This means you still have the ability to:

    • format headings, paragraphs, quotes and callouts
    • add links, bullet points and buttons
    • insert images and other types of media.

  • Read our guide to learn how to add accordionsExternal Link .

Cards

Promotion cards

Promotion card title

This is the summary. Give a brief, clear description of the link destination. (This card is displaying with thumbnail image selected.)

How to add a promotion card

Instructions for adding promotion cards. (This card is displaying with profile-style image selected.)

Promotion card with no image

This is what a promotion card looks like when it has no image selected and the link is an absolute link (added via URL instead of a node link).

Navigation card title

This is the summary. Give a brief, clear description of the link destination.

How to add a navigation card

Instructions for adding navigation cards.

Call to action title

Description of the CTA – what is the user clicking on and why?

CTA button - 'Do it!'

Key dates

Key calendar dates

1 January 2021 to 1 January 2031

Event title 1

This is the summary, give a brief description of the key date.

1 February 2021 to 1 February 2031

Event title 2

This is the summary, give a brief description of the key date.

Learn how to add key datesExternal Link

Card sorting options

Latest events

What's on

Latest events guide

Learn how to add latest events
See all events
A visual example of the latest events component.

Complex image

Complex image title

Complex image title
Download Complex image title

Timelines

News
18 March 2021

Event launch for the City of Melbourne’s Open Innovation Competition 2021
News
17 June 2019

Respect Victoria elder abuse campaign launched

Data

Data table

Data driven component

Data driven component (title optional in component)

Description – this is to give a brief explanation of your data driven component.

Forms

OpenForms

Click here to view form.

Drupal form

Drupal form title

This is the Advanced HTML form element.

You can add text and apply formatting such as:

  • headings
  • hyperlinks
  • bullet point or numbered lists.

Use this element to give your users information or instructions.

Use this when you want or expect to be given a short answer, such as a person's name. 
Use this when you want or expect users to provide a longer answer, such as describing their complaint or feedback. The field is bigger and scrollable. 

It is recommended to put a word or character limit on this field. For example: Character limit is 500.
Use this when you want to collect only numbers. You can set the minimum and maximum range, e.g. only allow a number between 1 and 10 to be accepted by the field. 

You can't set a minimum or maximum "string" of numbers, such as a maximum of 13 numerals (for phone number collection). 
 

Radio buttons should be used when you only want a single answer provided. For example: Yes or No questions. 

This element has some conditional logic applied to the answers. Test it out by choosing Option 1, and then changing to Option 2.

Option 1

You selected option 1, which is why you are seeing this text field! Choose option 2 for a different response.

Option 2

You selected option 2, which is why you are seeing this text field! Conditional logic is useful for creating different pathways through the form, giving users different questions or information based on their answers.

Select element
Select

The Select element should be used when you have a longer list of options for people to select from, and display these as radio buttons would be too long. 

Users can only select one option.

There's a handy guide for that. Read our guide on SDP webforms.

Have a lovely day!

This element is a single checkbox, and should be used for circumstances such as asking the user to confirm their understanding or provide consent. 

Privacy statement element

The Department of Government Services (DGS) collects your personal information on behalf of [DEPT/ORG] and discloses that information to [DEPT/ORG] for the purpose of [XX]. If you choose not to provide all or part of the information required, we may not be able to contact you or action your request.

If you have any questions about how your personal information will be handled or would like to gain access to your personal information, you can contact [DEPARTMENT/ORG] on [PHONE] or [EMAIL].

We're using the services of Drupal 9 to administer this form. The information that you provide is stored by the Department of Government Services (DGS) on the Microsoft Azure infrastructure in Sydney, Australia.

For more information on our handling of any personal information, please refer to our privacy pageExternal Link .

Basic text

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

Headings styles - this is heading 2

This is a heading 3

Heading 4

Heading 5

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

Her Excellency the Honourable Linda Dessau AC
Governor of Victoria.

Indented quote

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

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

How to apply

To apply this callout:

  1. Format your content as you want with paragraph breaks, headings, lists etc.
  2. Select the whole block of text that you want to apply the callout style to.
  3. Click the capital C icon on your toolbar (just next to the table icon).

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

Buttons

Primary button text

Secondary button text

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 - Vimeo and YouTube

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

View transcript

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

View transcript
Single digital presence training video

Documents for download

Sample doc embedded on SDP testing pages (docx)
docx 23.1 KB
Sample doc embedded on SDP testing pages (PDF)
pdf 49.17 KB
Sample doc embedded on SDP testing pages (xlsx)
xlsx 10.17 KB

Basic tables

Column 1 (as header)column 2column 3column 4
Next headingxyz
Next heading 2xyz
Next heading 3xyz
Next heading 4xyz


Reviewed 11 October 2023

Vic Gov digital guide

    Related links

    What's next?

    Contact us (title optional)

    Name Department

    1 Treasury Pl, Melbourne, VIC 3002
    Mobile/home/office (optional) 0412 345 678
    someone@email.com.au
    vic.gov.au
    @VicGovAu
    @victoriapolice
    @victorian-government

    Secondary campaign

    This is a secondary campaign.

    Secondary campaign blocks sit at the bottom of a page just above the blue fat footer and extend to full-screen width.

    How to build a secondary campaign.
    Was this page helpful?