singledigitalpresence.vic.gov.au

Sample of all 'landing page' content components

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

This is a body content component.

You can include:

  • links
  • lists (bulleted and numbered)
  • indented quotes (or callout)
  • block text

blah blah blah blah blah blah blah blah blah blah blah blah. Here's an inline link.

Heading 2

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole, health goth fixie kitsch squid kinfolk. Microdosing chartreuse vape yr mustache.

Heading 3

Venmo chia synth banjo skateboard. Pug pok pok artisan fanny pack kitsch butcher schlitz selfies messenger bag disrupt thundercats four loko leggings readymade +1.

Heading 4

Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee. Hell of vinyl tofu portland.

Heading 5

asymmetrical beard. Waistcoat photo booth synth drinking vinegar gastropub. Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee. 

Block quote

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole, health goth fixie kitsch squid kinfolk. Microdosing chartreuse vape yr mustache.

This is the block quote with 2 lines of caption, accessed via the 'document' icon. The following comes up when you insert the cursor and click the doc icon. We DON"T want the source line to display in all caps!

Her Excellency the Honourable Linda Dessau AC
Governor of Victoria

Keffiyeh tote bag hashtag snackwave shaman. Bicycle rights ennui marfa four dollar toast cornhole.

This indented quote is created using the icon with the double quotes on it (rollover label is 'block quote'). It does display as indented in the WYSIWYG but I suggest it be indented more on the right side. Trust fund migas offal salvia freegan. Swag hell of church-key, keytar waistcoat taxidermy flannel pug banh mi trust fund gentrify pickled.

Callout styles

Callout style - single paragraph

This paragraph has the 'callout' style applied to it. (It doesn't display as indented in the WYSIWYG; looks like body text). To apply this, select some text, click on the block styles dropdown next to the Bold and itals buttons. Then click callout. We should have a character limit or suggested limit as it looks bad when too long.

Currently callout style does not allow line breaks, headings, lists, it only displays well for a single paragraph.

Callout style - WYSIWYG

This callout style should be used when additional formatting is needed, such as headings and lists. You can select a chunk of content and apply this callout style and it will appear as one callout with a single vertical line on the left and a single 'box' of shading (whereas paragraph and line breaks on the single-paragraph callout make it display as two separate callouts.

How to apply

To apply this callout:

  1. Format your content as you want (with headings, lists etc).
  2. Select the whole block 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 

  1. Integer mattis
  2. tellus id libero
    1. dapibus mattis (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
  • ultricies vitae (styles grey circle)
  • Quisque ut tortor laoreet
    • luctus tellus at (styles TBC)
      • pretium dolor (styles TBC)
      • Maecenas efficitur
        • mi at ipsum egestas (styles TBC)
          • 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.

Following is a horizontal line.


Tables

Here's a table.

This is the table caption
Column 1 Column 2 Column 3 has quite a long heading Column 4
$000
Row 1 content row 1 content

You can use right-click to access table commands, such as deleting or inserting rows.

Merging cells affects accessibility so is not recommended.

Note that you should set the first row as header for tables with headings (which pretty much all tables should have) - this displays the table header with correct formatting and is also important for accessibility.

  • sometimes tables have lists
  • sometimes tables have lists
  • sometimes tables have lists
1,234,567
Row 2 content row 2 content

asymmetrical beard. Waistcoat photo booth synth drinking vinegar gastropub. Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee.

384
Row 3 content row 3 content

asymmetrical beard. Waistcoat photo booth synth drinking vinegar gastropub. Tilde pork belly gastropub, tacos heirloom cold-pressed trust fund cred iPhone listicle succulents pok pok twee.

568,658
x y z zz

Buttons

Here are some buttons (click page/doc icon and choose a button; a blank line is also inserted under the button):

Primary button text

The secondary button is a different colour, that's all

Secondary button text

Another heading 2 - embedded image

Following is an example of an image.

This is a caption typed into the Embed media screen

Documents for download

And here's an embedded document (automatically selects and displays icon and calculates and displays size):

Accordions

Now below is an accordion (inserted as a content component, not in body content).

This is what you put in the Accordion Title field (optional H2)

  • Item content (accordion) Wolf artisan neutra shaman, stumptown selfies four dollar toast woke hell of slow-carb deep v tacos fingerstache +1. Tofu whatever offal umami af street art affogato tumeric 90's hammock hoodie vexillologist chambray taxidermy hot chicken. Chambray man braid readymade brunch keytar, enamel pin fingerstache. Put a bird on it biodiesel schlitz aesthetic taiyaki. 

  • Item content (second accordion) Man braid cloud bread lo-fi shabby chic raclette irony ugh, artisan palo santo ethical sartorial pork belly. Hammock scenester messenger bag, master cleanse migas asymmetrical street art. Banh mi craft beer chartreuse, pop-up plaid tumblr hell of humblebrag.

    Heading 3

    Item content (second accordion) Man braid cloud bread lo-fi shabby chic raclette irony ugh, artisan palo santo ethical sartorial pork belly. Hammock scenester messenger bag, master cleanse migas asymmetrical street art. Banh mi craft beer chartreuse, pop-up plaid tumblr hell of humblebrag.

    Item content (second accordion) Man braid cloud bread lo-fi shabby chic raclette irony ugh, artisan palo santo ethical sartorial pork belly. Hammock scenester messenger bag, master cleanse migas asymmetrical street art. Banh mi craft beer chartreuse, pop-up plaid tumblr hell of humblebrag.

    Item content (second accordion) Man braid cloud bread lo-fi shabby chic raclette irony ugh, artisan palo santo ethical sartorial pork belly. Hammock scenester messenger bag, master cleanse migas asymmetrical street art. Banh mi craft beer chartreuse, pop-up plaid tumblr hell of humblebrag.

Accordion title for a numbered accordion (optional H2)

  1. Sed vitae lorem lobortis, luctus nibh et, suscipit velit. Sed condimentum non leo nec commodo. In hac habitasse platea dictumst. Curabitur ut metus vitae nisl pretium pulvinar venenatis id erat. Mauris congue massa malesuada lorem faucibus porttitor. Nulla dictum mollis ultricies. Aenean a erat diam. Praesent fermentum tellus non nulla convallis, a blandit nulla accumsan. Etiam lacinia iaculis libero non aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus.

    Aenean leo felis, efficitur et viverra non, lacinia vel quam. Nam quis pellentesque justo. Ut ante nisi, vehicula sit amet consectetur a, ornare a metus. Etiam a elementum sapien, sed congue tortor. Mauris eget tortor at nisl facilisis iaculis vel sit amet neque. Vestibulum convallis at nisi quis placerat. Duis rhoncus porttitor tellus, a tempus quam facilisis et. Proin tincidunt metus tellus, et molestie ipsum congue ac. Nam rutrum sollicitudin dolor eu auctor. Pellentesque vestibulum pharetra metus, in viverra orci facilisis a. Ut at erat et erat pellentesque convallis. Aliquam erat volutpat. Etiam lacinia nunc sit amet vehicula pretium. Proin pharetra euismod orci, sed efficitur ligula. Vivamus metus ex, tempus vel magna placerat, finibus tincidunt dolor. Phasellus eleifend sodales enim, et luctus turpis vulputate eu

  2. Donec varius ornare urna convallis suscipit. Pellentesque tincidunt sagittis ex, a malesuada quam dignissim sit amet. Aenean dictum tristique mi. Maecenas mi felis, gravida sit amet mi in, malesuada euismod urna. Donec libero nunc, accumsan quis auctor ac, euismod sit amet mi. Aliquam feugiat auctor placerat. Phasellus ut sapien leo. Vestibulum nec suscipit risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque finibus erat at quam euismod vehicula. Proin felis quam, dignissim in pellentesque nec, rhoncus cursus orci.

    Duis consectetur bibendum neque, non posuere neque accumsan non. Nunc eleifend metus non tempus aliquet. Etiam orci leo, pretium ac laoreet eu, rutrum in mauris. Donec nec efficitur dolor, eget imperdiet lorem. Etiam et tellus sed ante malesuada tincidunt. Mauris nunc quam, congue quis elementum in, vestibulum eget lectus. Vivamus sit amet leo quam. Phasellus posuere feugiat nisi quis lacinia. Nullam et lobortis urna, sed tincidunt justo. Aliquam erat volutpat.

  3. Duis consectetur bibendum neque, non posuere neque accumsan non. Nunc eleifend metus non tempus aliquet. Etiam orci leo, pretium ac laoreet eu, rutrum in mauris. Donec nec efficitur dolor, eget imperdiet lorem. Etiam et tellus sed ante malesuada tincidunt. Mauris nunc quam, congue quis elementum in, vestibulum eget lectus. Vivamus sit amet leo quam. Phasellus posuere feugiat nisi quis lacinia. Nullam et lobortis urna, sed tincidunt justo. Aliquam erat volutpat.

    Donec varius ornare urna convallis suscipit. Pellentesque tincidunt sagittis ex, a malesuada quam dignissim sit amet. Aenean dictum tristique mi. Maecenas mi felis, gravida sit amet mi in, malesuada euismod urna. Donec libero nunc, accumsan quis auctor ac, euismod sit amet mi. Aliquam feugiat auctor placerat. Phasellus ut sapien leo. Vestibulum nec suscipit risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque finibus erat at quam euismod vehicula. Proin felis quam, dignissim in pellentesque nec, rhoncus cursus orci

Calls to action

Here are two call to action tiles inserted in 2 possible ways.

Call to action's title

Call to action description. Just a text field, no WYSIWYG, so all run on, no line breaks at present. There are six call to action images. This is the "book" image. You can choose banner or card for the call to action content component; this is banner, but in a page that is using right sidebar content, the banner becomes a big tall box with an overly large image.
Link text on the call to action's button

Timeline

Below is a timeline.

Images

Our guidelines for images in body text say:

landscape images should be 818px wide by 496px high

portrait images no larger than 400px high

Here I've tested what happens when you have an image that is 818px but at different heights - this shows that the images are being resized for display as the CMS is finding them too high.

Testing image sizing - is display of images 818px wide affected by its height?

800x200

800x400

800x500

800x600

800x800

Smaller images

When you're inserting an image in body content, the width is important because our front end displays the width according to the breakpoint (device screen size).​ Images should be 818px wide.

Here you can see the same image (150px x 150px) embedded and embedded as thumbnail. Try reducing the size of your window - you'll to see that the first one expands to fill the width of your screen (and becomes pixellated because it was a small image not intended to be displayed so large).

Here's an image 'embedded':

The Hon Daniel Andrews MP

Here's the same image 'embedded as thumbnail':

The Hon Daniel Andrews MP

Here's an image 'embedded with caption' (you can't have both thumbnail and caption):

The Hon Daniel Andrews MP
This is the caption: The Hon Daniel Andrews MP

Videos

Refer to the instructions for adding videos. Note that when you embed a video, you must click on the dropdown and select Embedded with transcript.

You build image galleries in Structure > Block layout > Custom block library section and then insert the component into Landing pages via the Component type dropdown.

Reviewed 08 October 2020

About VIC Government

Join the conversation on digital

Get advice and share your insights about this topic with other digital practitioners on the WoVG Digital Group on Yammer (VPS access only).

Can’t access Yammer? Contact us by email: digital@dpc.vic.gov.au (We may post your comment on Yammer for general discussion. Please tell us if that’s not OK.)

Join the Yammer Digital Group
Was this page helpful?