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.
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.
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.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor.
Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.
Sed posuere consectetur est at lobortis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
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.
Dolor Nibh Egestas
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.
Lorem Quam Ultricies
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Donec sed odio dui. Sed posuere consectetur est at lobortis.
Pellentesque Fringilla Lorem Consectetur
Pellentesque Fringilla Lorem Consectetur
Porta Nullam Tellus Mollis
Pellentesque Fringilla Lorem Consectetur
Porta Nullam Tellus Mollis
Porta Magna Lorem Pellentesque
Pellentesque Fringilla Lorem Consectetur
Porta Nullam Tellus Mollis
Porta Magna Lorem Pellentesque
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.
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.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo.”
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.
Large text, Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur.
