Style Guide

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.

Standalone Text

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.

Section

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.

Quotes are short, sharp and punchy. Note the use of Padding blocks above and below to break things up.
Name Surname

Impact text at various sizes – this is medium.

Alt Text

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

Miles Trent CEO
Rebecca Leen CFO
Chuck Loon Sales
Section pretitle

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.

Contact

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.

12

Stats

Pellentesque Fringilla Lorem Consectetur

78

Vestibulum

Porta Nullam Tellus Mollis

99

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.

1

Vehicula

Pellentesque Fringilla Lorem Consectetur

2

Vestibulum

Porta Nullam Tellus Mollis

3

Bibendum

Porta Magna Lorem Pellentesque

4

Euismod

Venenatis Ligula Lorem Risus

Ornare
24%
Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.
Ipsum
36
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur.
Vehicula
68
Donec sed odio dui. Donec id elit non mi porta gravida at eget metus.

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

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.

Maecenas sed diam eget risus varius blandit

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.

Adipiscing Magna Nibh Venenatis Purus
Great work guys!

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.

Venenatis Fusce Nibh Aenean
A Pretitle

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.

Post Slider

Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.

Donec sed odio dui?

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.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit?

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.

Maecenas sed diam eget risus varius blandit sit amet non magna?

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.

Action Tutoring