Sample Page

Using Text

This is a basic paragraph block. It will render text content with come simple formatting such as bold and italics. Links which are included in this block will appear like. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text can also be set with a different colour or background colour to make it stand out. You should always be careful to ensure sufficient contrast to ensure all readers are able to understand your content. Pay particular attention to altering the link styles and colour where they are used – including the hover state.

Text sizes can be altered – and alignment adjusted to create visually bold statements. Note that this emphasis is visual only and will not create any differentiation for those using screen-readers or other assistive technologies.

---

Using separator lines can help to visually differentiate this from the main body of the text. Separator lines can often be set to different styles and colours depending on your theme.

---

Text sizes can also be small for less visually important information – remember that this has no impact on the semantic structure of your work and is a visual feature only.

Understanding Headings

Headings can be used for separating sections of content. They are very important for ensuring that the document structure is clear and logical and should be used correctly for accessibility and search engine comprehension.

Heading Hierarchy

Heading can be set to visually appear at a range of sizes, but you should always take care to use them in them correct logical order – H2 – H6. H1 should rarely be used as this is generally already set for the main page title.

Viewing Heading Order

Heading order of the current document can be accessed in the left-hand flyout panel by clicking on Document Overview (three horizontal lines) > Outline.

Managing Images

Images can be inserted into the body of the text – and will appear within the main paragraphs.

You can add captions to images – as well as setting their width to allow them to extend beyond the bounds of the paragraph column.

Using Image Alt Texts

In order to ensure your site is accessible to all users you should provide alt texts for all images which have communication role on your site i.e. those that add to or extend the meaning of your content in any way. Alt texts should clearly describe the contents of the image for example:

Full Width Images

You can add some creativity to your images but including text and overlays to highlight important content or actions.

“Black and white image of a pelican standing in the right-hand side of the frame looking across to the sky on the left.”

Image Galleries

Image galleries enable you to add a series of images. You can adjust the spacing and set the number of columns needed. Images will tile according to their dimensions.

Using Lists

Lists can be used to handle bulleted or numbered items.

• Bulleted lists;
• will have a consistent style;
• throughout your content.

1. Numbered lists;
2. can also be used;
3. for items that are;
4. displayed in a hierarchical order.

List Styles

Additional list styles can also be used in your theme. This is an example of a Divided list. It is ideal for displaying lists such as supporters, funders or projects.

• List Item One
• List Item Two
• List Item Three

When editing list styles, it is important to ensure that you have selected the correct element. Lists are made up of a List and multiple List Items. To apply styles to the whole list, you must select the List, rather than an individual List Item.

This is another paragraph

• List Item One
• List Item Two
• List Item Three

Buttons

Buttons are always set within a Button Group block – and you can have a single button, or multiple buttons in your group.

Button colours can be edited to allow you to add your own styles and make your buttons ‘pop’. Always be aware of the contrast of the colours you select. To ensure that they can be viewed by everyone.

Buttons alignment can also be amended.

Primary & Secondary Buttons

When you have two calls-to-action, it is often useful to provide a Primary and a Secondary action. This provides your reader with a visual prompt to understand what is needed of them.

Quotes

Quotes can be used to identify simple quoted text, in running content. These are slightly different from Testimonials.

For masterpieces are not single and solitary births; they are the outcome of many years of thinking in common, of thinking by the body of the people, so that the experience of the mass is behind the single voice.

Virginia Woolf, A Room of One’s Own

Tables

Simple tables can be used where necessary to display tabular data. Tables are ideal for simple tabulated content but are not suited to complex data which might need a custom structure.

Aims	Outcome
Aim One	Outcome One
Aim Two	Outcome Two
	Result

Layouts & Structure

There are a few different layout options which can be used. These should be handled carefully and thoughtfully to ensure that you enhance your reader’s experience.

Columns

Media + Text