Introduction
We use templates and components to create engaging pages with confidence and ease.
Templates help us to…
It’s about communicating with our users.
The components within this system have each been developed with specific use cases in mind. Components sit within templates that ensure information is structured in a way that answers users questions and guides them towards the information they need in a memorable and efficient manner.
Each template has a masthead “hero” component that is designed to introduce the page to the user. Use these hero components to set out the scope of a page.
Appropriate section components can then be used to to communicate the narrative of each page.
There are recommendations on the following pages which demonstrate the kind of section components that work well with each template, but for flexibility, any section component can be used in the templates providing they communicate the desired message to the user effectively.
Templates...
Templates are defined by the masthead hero component. They are there to set the tone of the page and help users understand what they can achieve there.
and components...
Components are used to populate the rest of a template. Each component is designed to communicate different types of information.
create pages
Select components that fit your needs and the needs of users at each point of a page. Make sure the information unfolds logically to keep users engaged as they scroll.
Components
Once a component has been populated via Contentful it can be re-used across the site.
Here is an example of a USP Group component that has been populated with copy and images by a Contentful editor.
Once a component (including the images and CTAs within it) has been created in Contentful, populated, and given a specific name, it can be used and re-used across multiple pages. Should editors wish to change text or an image they can do that in the same (named) component and the changes will be reflected everywhere that component is used.
This is really useful to streamline the content output and provide consistency where the same messages are repeated throughout the site.
There is a huge amount of flexibility within each component.
We’ve used our promo component as an example.
Here you can see there are different ways of configuring this component depending on what an editor wishes to populate.
Editors a can configure the majority of components in a similar way by choosing to populate only the elements they really need to get their message across.
This has been designed to help editors focus on simplicity and as such increase the possibility of users reading and engaging with each component.