
On this page:
- Heading 2
- Block quote
- Callout styles
- List formatting and nesting
- Tables
- Buttons
- Another heading 2 - embedded image
- Documents for download
- Accordions
- This is what you put in the Accordion Title field (optional H2)
- Accordion title for a numbered accordion (optional H2)
- Calls to action
- Timeline
- Images
- Videos
- Image gallery
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 .
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!
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 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:
- Format your content as you want (with headings, lists etc).
- Select the whole block you want to apply the callout style to.
- Click the capital C icon on your toolbar (just next to the table icon).
List formatting and nesting
- Integer mattis
- tellus id libero
- dapibus mattis (should be lower case alpha)
- donec egestas ultricies
- neque in elementum (should be lower case roman)
- Fusce blandit
- magna magna (should be ???)
- 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.
- mi at ipsum egestas (styles TBC)
- Morbi dictum feugiat
- odio, nec volutpat
- diam tristique
- vel. Suspendisse dui dui, cursus eleifend ipsum id, pelle
- ntesque dictum sapien
- luctus tellus at (styles TBC)
- 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.
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.
| 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):
The secondary button is a different colour, that's all
Another heading 2 - embedded image
Following is an example of an image.

Documents for download
And here's an embedded document (automatically selects and displays icon and calculates and displays size):
DPC Annual Report 2017-18
2016-17 consultancies valued at $10,000 or greater
DPC 2016-17 grant payments
DPC Annual Report 2016-17
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)
-
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
-
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.
-
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.
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':
Here's the same image 'embedded as thumbnail':
Here's an image 'embedded with caption' (you can't have both thumbnail and caption):

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.
Image gallery
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