JavaScript is required

Sample of all SDP components

This is the introduction text. It sits directly under the page title and gives an overview of what's on the page.

Top links

Call-to-action link test
Aboriginal flagTorres Strait Islander flag

The Victorian Government acknowledges Aboriginal Traditional Owners of Country throughout Victoria and pays respect to their cultures and Elders past and present.

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

Basic text

The basic text component is for inserting body content. This gives you the WYSIWIG (what you see is what you get) window, where you can:

  • format headings, paragraphs, lists, quotes and callouts
  • add links and buttons
  • insert images and other media.

Read our guides on using the basic text component on the Digital Victoria Help Centre.

See how things look on a live website on our Sample page: Basic text component formatting options.

Accordion (standard)

Numbered accordion

Cards

There are several card options that can be used for different purposes.

Promotion cards

Promotion cards are portrait-style (vertical) cards to link to other pages. They're often used on homepages and landing pages to display the site's main sections or subpages but can also link to external websites.

The first example has a thumbnail image and the second has a profile image. They can also be used with no image.

A 'no image' promo card

This card has display style set in the CMS to 'No image' which on Ripple is called 'Standard'.

""

A 'thumbnail' promotion card

This card has display style set in the CMS to 'Thumbnail' which on Ripple is called 'Image full bleed'.

""

A 'profile' promotion card

This card has display style set in the CMS to 'Profile' which on Ripple is called 'Avatar'.

A 'highlight' promo card

This card has display style set in the CMS to 'Highlight' which on Ripple is called 'Highlight'.

Navigation cards are landscape-style (horizontal) cards to link to other pages. They highlight programs we support or link to pages with related topics.

The first example has a thumbnail image and the second has a featured image. They can also be used with no image.

Navigation card title

This is the summary. Give a brief, clear description of the link destination. NOTE: this navigation card has the Card display style set as 'Thumbnail' (must have an image)

How to add a navigation card

Instructions for adding navigation cards. NOTE: this navigation card has the Card display style set as 'Featured' (must have an image)

How to add a navigation card

NOTE: this navigation card has the Card display style set as 'No image'

Call to action cards

A call to action (CTA) card is similar to a navigation or promotion card but with a button included. It is an invitation for your user to do something. It should be eye-catching and use active language.

The first example is a card CTA and the second is a banner CTA.

""

Learn how to add CTAs

Learn how to get the best use out of the call to action component. It displays as a large box when used on a page with a sidebar and a banner style when used on a page with no sidebar.

Read the guide

Key dates

The key dates component can be used to promote several important dates in a grid format. It is still under development and can be difficult to use.

Learn how to add key dates cards.

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.

See a key dates card on our home page

Card sorting options

As well as adding cards individually, there some components can be configured to display groups of cards:

  • Card carousel
  • Content collection
  • Compact card collection

Card carousels are a useful way to add a lot of cards without overcrowding a page. They can be set to auto-populate with news or events or you can manually add cards of your choice.

Read our guide to learn how to add card carousels(opens in a new window).

Card carousel (title optional in component)

Content collection

This is the content collection component. It can be configured to display results

  • in a grid or list view
  • 3, 6 or 9 cards
  • only pages tagged to specific sites, site-sections and topics.

Compact card collection

Use the compact card collection to build a collection of clickable cards with an icon.

This is the title of the compact card collection

Images

The image gallery is built in the Custom block library. Find out how to build image galleries.

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

  • Avocado (This is the image name)

    This is the image's caption

  • Berries

  • Lime

  • Strawberries

Complex image

The complex image component is used to present complicated graphical information like charts and graphs. Accessibility standards require these kinds of images to include a text alternative. You can also provide downloadable data for graphs.

Read our guide to learn how to add complex images(opens in a new window).

Complex image title

Timelines

The timeline component is used to arrange short 'blocks' of information in a linear chronological format.

Read our guide to learn how to add timelines.

Timeline title (optional in component; functions as H2)

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

    Entry 1 title

    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.

Data

We have a few components for displaying data, including

  • Data table
  • Data driven component
  • Statistics grid

Data table

Unlike simple tables, which you build in the basic text component and which are best suited for tables containing text, the data table component is responsive - that means it automatically stacks your table by column or row on smaller screens, such as mobile phones.

Read our guide to learn how to add data tables(opens in a new window).

Heading of column 1Heading of column 2Heading of column 3Heading of column 4
Heading of column 1
Data Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Heading of column 2
Data Quisque sed dolor auctor arcu venenatis suscipit non dignissim velit.
Heading of column 3
Data Cras facilisis lorem diam, quis venenatis tortor elementum vel.
Heading of column 4
Data Cras ornare rhoncus dolor ac sollicitudin.
Heading of column 1
Data row 2
Heading of column 2
Data row 2
Heading of column 3
Data row 2
Heading of column 4
Data row 2
Heading of column 1
1,000,000
Heading of column 2
2,000,000
Heading of column 3
3,000,000
Heading of column 4
4,000,001

Statistics grid

Below is an example of the statistics grid component.

This is the statistic heading
This is the statistic body.
70
Apples
150
Oranges
10
Pears

Form

For more information on how to create or request forms, read the Process for new content.vic.gov.au webforms(opens in a new window) page on SDP.

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)

More resources

Sample of all SDP components - with no sidebar

This example page shows all of the components that can be used with the landing page template, with all sidebar content removed/turned off so you can see how the elements display on a full-width page.

Sample page: Basic text component formatting options

This page shows examples of the formatting options available using the basic text component.

Working in governmentGovernmentNot-for-profit groups

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