CK editor pattern

A lead paragraph is an introductory paragraph and can be used at the top of a page to summarise the content. Like the page title (H1), it should only be used once per page if needed.

Page introduction

The purpose of this pattern is to show all content types that can be added to article pages. Please refer to other article patterns for advised content layout specific to those patterns.

Blockquote

A blockquote is a quotation with a citation, designed to be offset from the main text on a page and is used to support content by visually highlighting a particular message or point.

Blockquotes generally feature direct quotations which may not already be mentioned in the main body of text and are placed within the reader's flow to help brake up large amounts of text.

Blockquote example

(Blockquote) A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters

(Blockquote citation) Andrew Couldwell, Laying the Foundations

Highlight

Highlights are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text.

They are placed within the reader's content flow and are used to direct user's attention to important pieces of information.

Highlight example

Leeds is among the top 100 universities in the QS World University Rankings 2021

Accordion

The accordion component lets users show and hide sections of content on a page. Accordions hide content, so the titles need to be clear.

When to use

Use the Accordions component to make a page easier to scan when it contains information that only some users will need.

When not to use

Accordions hide content from users and not everyone will notice them or understand how they work. For this reason, do not use an accordion for content that is essential to all users.

Do not use the Accordions component for large amounts of content or for complex layouts. Consider if it's better to:

simplify and reduce the amount of content
split the content across multiple pages
keep the content on a single page, separated by headings
use a list of links to let users navigate quickly to specific sections of content

Accordion example:

Why are design systems important?

Five most recent selected publications

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.

Conference papers

Journal article

Image pair

The image pair component allows us to add images into an article. These images are not to act as links. Images have an optional caption. When only one image is available, this will span across the space for two.

The image pair component should be preceeded by a heading or paragraph content.

Two images example (with captions)

Two images example (no captions)

One image example

When only one image is provided this will be cropped to maintain a 2:1 aspect ratio (vertically centred). consideration of this should be taken when choosing the image

Further paragraph content can follow an image pair component.

Lists

Ordered (Numbered) and unordered (bulleted) lists are a great way to break up content.

When to use

Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.

Ordered list example

Step one
Step two
Step three

Unordered list: Use unordered lists to display text in no specific order.

Un-ordered list example

Unordered list item one
Unordered list item two
Unordered list item three

List items help users by:

aiding scanning
breaking up content into useful chunks
drawing their eyes to the most important information

When not to use

If you need to communicate long lists of narrative text.

Tables

Tables are containers for displaying information. They allow users to quickly scan, sort, compare and take action on large amounts of data.

Large tables can be overwhelming for some people and can be confusing for users of assistive technology. Consider whether a table is really needed.

A table can often be replaced by a:

list of bullet points with appropriate subheadings
downloadable csv spreadsheet for large amounts of data

When not to use

Only use tables to present data and tables should never contain images in tables.

When using tables

Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smartphone.

Have more rows than columns wherever possible to make your table longer, rather than wider. This makes it easier for people to read and understand.

Table example

Name of planet	Average temperatre	Average distance from the sun
Mercury	-183°C to 427°C	57,900,00 km
Venus	480°C	108,160,000 km
Earth	14°C	149,600,000 km
Mars	-63°C	227,936,640 km

Images

Images are an important part of any web experience. They carry a huge amount of value and do more than add decoration.

They let us convey ideas much faster than text, help tell powerful stories and engage with our users in ways that few other forms of content can. Images should support each message clearly and help to deliver an engaging user experience.

Image example

Polar bear with cubs on ice sheet — Picture credit: The person who has taken this photograph

Video

Videos convey ideas much faster than text, which helps us tell powerful stories and engage with our users. Some people find videos much easier to understand.

When using videos

To meet the accessibility regulations for public sector organisations, all new videos published or updated after 23 September 2020 must have this alternative content:

an audio description
closed captions
a transcript

Video example

Calls to action (CTA)

We allow users to perform certain actions through the use of our call to actions (CTAs). It should always be clear to the user what the CTA's action is through text.

When using CTA's:

Try not to have multiple CTA's next to each other.

Don't overload the page with the same type of CTA or too many CTA's.