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

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

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?

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

1. Step one
2. Step two
3. 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

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.

CTA example

Logo group

The Logo Group enables 1+ logos to be displayed in an article.

They are placed within the content and are used to showcase a logo/group of logos, such as accreditation logos.

When using the Logo Group

Upload a closely cropped logo

Add a caption

Logo group example

Two images example (no captions)

In Text Icons

In text icons introductory paragraph.

• Fast Wi-Fi
• On-site gym
• Common room and study area testing out long text
• University sport
• Parking
• Outdoor social space

In Text facts

The In Text Facts component highlights 1-2 key facts or figures in an article.

They are placed within the content and are used to direct the user's attention to a key fact, such as a ranking or award.

When using In Text Facts

Do not reformat the text style.

Add an short headline for the title e.g. 'Top 10' and display the rest of the information underneath in the subtitle.

Heading before linked list

• School of Typography
• School of Web Design
• School of Branding
• School of Fine Art History of Art and Print Illustration
• School of Media Queries
• School of Media and Communications
• School of New CSS Tricks
• School of Console Commands
• School of Front-end Development
• Institute of Accessibility for Everyone
• Institute of Content Design

Heading after linked list

Paragraph of text before the linked list. 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.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eligendi hic consectetur non soluta tempora expedita veritatis nam quia ab eos. Non praesentium tempore ad officia esse dolorum, nulla optio.

• School of Typography
• School of Web Design
• School of Branding
• School of Fine Art History of Art and Print Illustration
• School of Media Queries
• School of Media and Communications
• School of New CSS Tricks
• School of Console Commands
• School of Front-end Development
• Institute of Accessibility for Everyone
• Institute of Content Design