vicinspectorate.vic.gov.au

Testing page for RTL

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.

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

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

Call to action cards

Learn how to add CTAs

The call to action component is a valuable tool. Learn how to get the best use out of it.

Read the guide

Key dates

Card sorting options

Latest events

A visual example of the latest events component.

Complex image

Complex image title

Complex image title
Download Complex image title

Timelines

News

News listing

News listing (title optional in component)

    Data

    Data table

    Data driven component

    Forms

    OpenForms

    Drupal form

    Drupal form title

    This is an advanced HTML/text field.

    It has 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.

    Use it to give your users information or instructions.

    This is a text field. Use this to ask for the participant's name, organisation, etc.
    Advanced address
    State
    Select
    Checkbox description.
    Radio buttons are best for multiple choice questions.
    • You have selected option 1, which is why you are seeing this text field. Choose option 2 for a different response.
    • You have selected option 2, which is why you are seeing this text field. This is useful for creating decision trees where the information or follow-up questions need to be tailored to the user's previous answers.
    Need to know more about Drupal forms?
    Select
    • Then you're all done, have a lovely day.


    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

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

    Documents for download

    Basic tables

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

    y

    z
    Next heading 2 x y z
    Next heading 3 x

    y

    z
    Next heading 4 x y z


    Reviewed 19 January 2022

    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?