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

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

Cards

Promotion cards

""

Promotion card: display style 'Thumbnail'

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

""

Promo card: display style 'Profile'

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

Promo card: display style 'Highlight'

The highlight display style is a coloured gradient across the top.

Promo card: display style '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: display style 'Thumbnail'

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

Navigation card: display style 'Featured'

Navigation cards fill the full width of the content area. They will always stack vertically.

Navigation card: display style 'No image'

This nav card has display style ste to 'No image'

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. 1 January 2021 to 1 January 2031

    Event title 1

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

  2. 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 dates

Card sorting options

Content collection (new version in release 1.58)

Optional description.

This sample content collection displays footer pages. Content source is set to manual and pages have been manually added. The cards that display depend on what is selected and also what is tagged to this particular website. Display options is set to card and not to show images.

The CTA destination link may not display due to the page being tagged to a different site.

  • Accessibility

    Accessibility information about this website. We endeavour to conform to level AA of the W3C Web Content Accessibility Guidelines 2.2.

  • Disclaimer

    Legal disclaimer information for vic.gov.au websites

  • Copyright

    Copyright information for this website.
Access the disclaimer page (CTA link text)

Content collection - 1.58 basic example

This content collection is set up with Content source automatic and no filters applied in Refine content so it works on multiple sites. Displaying list view and 6 items. No CTA link.

  • Website privacy

    Information about privacy - what information we collect and why.

    Updated: 1 Apr 2026

  • Accessibility

    Accessibility information about this website. We endeavour to conform to level AA of the W3C Web Content Accessibility Guidelines 2.2.

    Updated: 17 Feb 2026

  • Disclaimer

    Legal disclaimer information for vic.gov.au websites

    Updated: 17 Feb 2026

  • Copyright

    Copyright information for this website.

    Updated: 17 Feb 2026

  • Standing down a Councillor

    A councillor may be stood down while their behaviour as a councillor is under investigation or if they have been charged with a serious offence.

    Updated: 31 July 2025

  • Fact sheet: Authorisation of materials

    Electoral material, such as an advertisement, handbill, pamphlet or notice that contains electoral matter, requires authorisation.

    Updated: 9 Dec 2025

Compact card collection (Ripple = Category grid)

  • ""
  • ""
  • ""
  • ""

  • Avocado (This is the image name)

    This is the image's caption

  • Berries

  • Lime

  • Strawberries

Complex image

Complex image title

Timelines

Timeline title (optional in component)

  • Fitzroy Street Tram Stop, Architect: Tract Consultants, Photography: Emma Cross

    Entry 1 title

    26 December 2021 to 28 April 2030

    Summary – this is the entry description.

  • timeline swatch pink

    Entry 2 title

    Text - dates can also be entered here instead of the from/to field

    Summary – this is the entry description.

  • Entry 3 title

    10,000BC to next Wednesday

    Summary – this is the entry description.

Statistics grid

Statistic heading 1
Statistic body 1
Statistic heading 2
Statistic body 2 Statistic body 2 Statistic body 2 Statistic body 2
$3,000,000
Don't use with under 2 or over 8 statistics
One more longer statistic
Descriptive label this one should fill the mobile width
22%
A statistics grid can act as a summary to help users view multiple related pieces of content.

Data

Data table

LanguageCodeRight-to left?Font
Acholi
Code
ach
Right-to left?
N
Font
X
Albanian
Code
sq
Right-to left?
N
Font
X
Bosnian
Code
bs
Right-to left?
N
Font
X
Cook Islands Maori (Rarotongan)
Code
mi
Right-to left?
N
Font
X
Croatian
Code
hr
Right-to left?
N
Font
X

Basic text

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

Here's an internal link.(opens in a new window)

Here's an external link.(opens in a new window)

Headings styles - this is heading 2

This is a heading 3

Heading 4

Heading 5

Quote styles

Block quote

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 ACGovernor of Victoria.

Callout styles

Single-paragraph callout

This paragraph has the Callout style applied to it (via Callout dropdown). 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

Embedded videos

Vimeo

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

Sample vimeo video
View transcript

YouTube

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

Single digital presence training video
View transcript

Documents for download

(The first 2 have 'Display last update date' checkbox ticked.)

Sample doc embedded on SDP testing pages (docx)
Word 23.1 KB
Updated 9 Apr 2025
(opens in a new window)
Sample doc embedded on SDP testing pages (PDF)
PDF 49.17 KB
Updated 5 Apr 2023
(opens in a new window)
Sample doc embedded on SDP testing pages (xlsx)
Excel 10.17 KB
(opens in a new window)

Basic tables

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


Drupal forms

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.

This is the basic HTML element. Same same but different from the Advanced HTML/Text element?

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:

You should use this element to collect email addresses, as it apply an automatic validation and will reject any answer that doesn't follow a typical email format (e.g. ___@____.____)

This is a text field element with Input masks set to Zip code and Minlength and Maxlength set to 4. Counter is set to None.

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

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.

Element option selected 'Select2'. Displays selected items separated by a comma in the field when dropdown is closed.

Radios: Want to know more about Drupal forms?(Required)
What's your favourite fruit?(Required)

Sample multi-step form

Step 1 of 4

Your contact details

Communities

Updated

""

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.
Back to top