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.
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 buttonTimeline
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.
Data table content component
The Data table component allows a table that is too wide to fit on a device (eg mobile) to display as 'stacked'.
Here I've used code in the cells to control alignment.
Code has to be put into < carets > with the wording as follows:
- Right aligned: <p align="right">text</p>
- Centre aligned: <p align="center">text</p>
- Horizontally top aligned: <p valign="top">text</p>
- Horizontally bottom aligned: <p valign="bottom">text</p>
Reviewed 31 May 2021
