Use real words for relatable titles
This is the style guide, so can get an idea of what content blocks are included on the site and how best to use them.
A clean, basic text block for general use
Use this for self-contained sections comprising a section pretitle, a semantic title and a single paragraph of text. These blocks are a concise, readable way of communicating and are often paired with visual blocks like image sliders or twin images. Links or buttons can be added below and the width and spacing can also be controlled and varied.
Break up content with different colored backgrounds
This is another standalone text block but this one is inside a Section block. The Section block can contain other blocks which can then be moved around the page together but its real value is in being able to apply a background color. If you don’t need to use a section, it’s better not to but when you need it, it’s ideal. Note the use of a button below.
Impact text at various sizes – this is medium.
This is large. And animated.
Callout Text is like Impact Text, but not as large. It’s better for longer content that still needs to stand out on the page.
Callout Text is great when it’s paired with paragraph text – and animated!
Note the padding above this block to give it room to breathe. Also, on the right hand side of the edit screen you’ll see options to make the text large and to align it to the left. These are simple controls that are very effective when you find you need them for hierarchy and variety.
Here’s some large Callout Text, paired with large paragraph text.
And here’s an example of large paragraph text. This is useful when paired with a large Callout Text block as you can see above. In general, paragraphs of text should be three to five lines long when viewed on a standard laptop screen. This is a rule you can occasionally break but always better to keep things brief if you can.
And avoid orphans where possible (see above). By the way, this is a standard paragraph block with the Align Left option selected. Note that two lines feels a little brief.
Team
Section title
This is the Sticky Side Title block and it’s great for when you want to add internal sections with sticky titles on the left. I’ll add some dummy paragraphs below so you can see what it’s like when the title sticks.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.
We’d love to hear from you
This is a slightly cheesy, but hopefully obvious example of using a pretitle to be explicit about what a section is for, together with a main title that is more semantic and speaks more directly to the user.
- Note that you can
- Use lists in these sections
If you want to..!
Pic / Text Repeater
These can be very useful. The system handles switching the picture from left to right etc.
Variable Styles
You have control over how the image behaves when there are different amounts of content. For example, with this one, I’ll add a load of text below to demonstrate what happens to the picture.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
Image can fill the space
NOT CURRENTLY WORKING – GEORGE TO FIX BUG!
You can match the height of the image to the height of your text content but this only happens when the amount of text is longer than the height of the image. In that case, the image sticks to the top. Here’s an example of what this looks like.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta sem malesuada magna mollis euismod.
Portrait Image
You can have a portrait image too. This will obviously take a bit more text to balance against, so I’ll paste some in here!
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper.
Cards
Wide range of uses – these two use images.
Vestibulum
You can overwrite the card color.
Stats
Pellentesque Fringilla Lorem Consectetur
Vestibulum
Porta Nullam Tellus Mollis
Label
Maecenas faucibus mollis interdum.
Icons
Pellentesque Fringilla Lorem Consectetur
Vestibulum
Porta Nullam Tellus Mollis
Bibendum
Porta Magna Lorem Pellentesque
Nullam
Id dolor id nibh ultricies vehicula ut id elit.
Vehicula
Pellentesque Fringilla Lorem Consectetur
Vestibulum
Porta Nullam Tellus Mollis
Bibendum
Porta Magna Lorem Pellentesque
Euismod
Venenatis Ligula Lorem Risus
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.
Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.
Test Heading
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis.
Morbi leo risus
Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Donec sed odio dui.
Parturient Quam Inceptos
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.
Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
This is a free heading
This is some free text. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum.
Large text, Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.
