Components are reusable parts of the user interface, like buttons, text inputs and hero banners. The components in the Design System are designed to be accessible.
Achievement and image
This component allows you to display an achievement on a webpage. It is similar to the quote and image component but instead of a quote, the text section will include details of the achievement.
The image used should be relevant to the achievement you are showcasing.
For example, an image of the award or achievement or of the awarding authorities logo.
You should keep your wording concise and clear. Aim for 280 characters or less.
Make sure the image is clear (avoid blurry or pixelated images). Any image you use must have a minimum width of 618px. The height of the image is flexible. The recommended image size is: 1236×818px.
Accordion
Accordions allow readers to view and hide sections of related information on the same webpage.
Readers can open and close accordions to condense what they are reading. You should use this component to break up large sections of text that readers will need to scan quickly.
Alternative components
When you open accordions the headings move further down the page as you open more sections. However, unlike accordions, the tab component’s headings display horizontally instead of vertically and remain static on the page.
Tabs may work better for users who need to quickly move between related sections of information.
You should consider how many sections you need to display, as tabs can not have as many sections as accordions.
Cards
The card component is great for navigational purposes. They provide a visual summary of more detailed information and should include a link to the more detailed pages.
They should not be used as a way to display information decoratively.
Card components are best used on:
- homepages (the introductory page of a website) for example our homepage and careers at CCS homepage
- index pages (an information page purely designed to help users navigate to different resources or pages) for example, our start supplying page
- hub pages (a central page or information ‘hub’ for specific topics with a set of interlinked, related content that goes back to that page) for example, our Social value page
The cards use a grid formation. You can only use 4 cards in a section and they will display in rows of 2.
Alternative components
The related categories component allows users to navigate to additional relevant information. You can use this component in place of cards if they are more appropriate (such as not being used on a homepage, index or hub page).
Free text
This component displays written text in columns. This is a good component to use if you need users to compare content side by side as both pieces of content can be seen together at the same time.
Alternative component
The introduction and description component is a good alternative if you want to display 2 different types of content side by side. One column will include written text and the other can include either an image or embedded YouTube video.
Introduction and description
This component is designed for the start of a webpage, but can be used anywhere. It displays as column content and can display different types of media side by side. One column will include written text and the other will include either an image or an embedded YouTube video.
The component’s default setting is to display any text on the left hand side and any media content (image or video) on the right. You do have the option in WordPress to change this view.
You can add a button and link text to the bottom of the text column.
Alternative component
If you want to use columns to display your written text without an image or video, you can use the free text component.
The free text component works in the same way, but both the left and right column is for text only. This component is a good 1 to use if you need users to compare content side by side as both pieces of content can be seen together at the same time.
Quote and image
This component is used to display direct quotes on our website. To use this component you will need:
- a clear and concise quote that is relevant to the page subject matter
- an image of the person you are quoting
- the name and job description of the person you are quoting
Quote text should be around 100 words or less. There is no exact word limit, but you should aim to use quotes that are concise and to the point.
You do not need to include quotation marks in the text.
Make sure the image is clear (avoid blurry or pixelated images). Any image you use must have a minimum width of 618px. The height of the image is flexible. The recommended image size is: 1236×818px.
Related categories
Use the related categories component to provide additional information to the user. This works in a similar way to the card component but can be used on any type of web page.
This component also includes an overall section header and introductory sentence to introduce the related content.
You can link to 6 pieces of related content but we recommend using 4 at most. Each related section should include a summary of more detailed information and a link to the relevant detailed webpages.
Alternative component
The card component is great for navigational purposes. Card components are best used on:
- homepages (the introductory page of a website)
- index pages (an information page purely designed to help users navigate to different resources or pages)
- hub pages (a central page or information ‘hub’ for specific topics with a set of interlinked, related content that goes back to that page)
Tabs
Use tabs to help users navigate between short sections of related content on a single web page. Tabs show 1 section of content at a time and can only have a total of 4 sections.
Unlike accordions, they remain static on the page so do not increase page length or scroll rate when users open a new section.
You should use the tab component when:
- you can easily separate content into clearly labelled sections (each tab will be a new section)
- users will not need to view all sections at once
Avoid using tabs as a way to display step by step information. Users are unable to view all steps in the process at the same time if they are across different sections or tabs. If you have to use tabs for a step by step process, all the steps should be listed under the same section.
Alternative component
Do not use a tab component if you need users to compare information. Switching between tabs and having to memorise content can be frustrating. If you need users to compare content you should try the free text component
Accordions may work better to break up larger sections of text. They display vertically on the page so you can include more than 4 sections.
