CMS Component Catalogue

Headings define the structure and hierarchy of content, helping people scan and navigate the page to find what they need. 

Available on: Landing, Standard, Case study, Project, Resource

Displays written content with formatting options like bold, lists and links

Available on all page types: Landing (as Content block, Text - WYSIWYG) and Standard, Agency (incl. New), Case Study, Easy Read, Events, POI, Project & Resource (as Block)

Displays information in rows and columns for easy comparison and scanning of data. 

Available on all page types: Landing (as Content block, Text - WYSIWYG) and Standard, Agency, Case Study, Easy Read, Events, POI, Project & Resource (as Block)

Plays sound clips with control to playback and volume controls. 

Available on all page types: Landing (as Content block, Text - WYSIWYG) and Standard, Agency, Case Study, Easy Read, Events, POI, Project & Resource (as Block)

Pictures that convey information, illustrate ideas and add visual interest to the page. 

Available on all page types: Landing (as Content block, Text - WYSIWYG) and Standard, Agency, Case Study, Easy Read, Events, POI, Project & Resource (as Block)

Plays video content with control to playback and volume controls. 

Available on all page types: Landing (as Content block, Text - WYSIWYG) and Standard, Agency, Case Study, Easy Read, Events, POI, Project & Resource (as Block)

Groups text, images and actions together for easy navigation to other pages. Comes in three variants: Image, Pictogram, and Text-only cards.

Available on: Landing, Standard, Agency (incl. New), Case study, POI, Project, Resource

Content blocks are used to group related content and/or links. This block comes in three variants: Icon blocks, Image blocks and Text blocks.

Available on: Landing, Agency

Shows short blocks of content that are numbered and are viewed in a sequential order. 

Available on: Landing (as Block - Sequence - Steps) and Standard, Agency, Case study, POI, Project (as Sequence - Steps)

Provide summary of content, organising information for easy navigation to relevant pages in the Easy Read style.

Available on: Easy Read

The line separator helps visually group related content together and reduced the cognitive effort required to process the information.

Available on all page types: Landing and Standard, Agency, Case Study, Easy Read, Events, POI, Project & Resource (as WYSIWYG)

Introduces a page by creating a focal point for the page title and summary.

Available on all page types: Landing, Standard, Agency (incl. New), Case Study, Easy Read, Events, POI, Project & Resource 

Created a visually distinct area that highlights a specific piece of content or call to action for the audience.

Available on: Landing (as Block - Feature) and Agency incl. New (as Feature)

Highlights important information with distinct styling to draw attention.

Available on: Landing, Standard, Article

Emphasises a quote, alongside the name and image of the person being quoted.

Available on: Landing, Standard, Article

Shows contextual alerts or information within the content.

Available on: Landing, Standard, Agency (incl. New), Case Study

Shows the most up-to-date or key information about an emergency or event.

Available on: Landing (as DCS Live Updates Listing Block)

Shows and hides content in a stacked layout for easier navigation and improved page scannability.

Available on: Landing (as Accordion) and Standard, Case study, POI, Project, Resource (as Accordion / Tabs)

Organises content into labeled sections that can be toggled between.

Available on: Landing (as Tabs) and Standard, Case study, POI, Project, Resource (as Accordion / Tabs)

Shows and hides content via a text link which takes up less visual prominence than an accordion.

Available on: Landing, Standard, Case study

Collapsible sections of content with step numbers.

Available on: Landing (as Block - Sequence - Numbered) and Standard, Case study, POI, Project (as Sequence - Numbered)

Collapsible sections of content with bordered circles that should be viewed in a linear or sequential order. 

Available on: Landing (as Block - Sequence - Timeline) and Standard, Case study, POI, Project (as Sequence - Timeline)

An interactive element that triggers an action when selected, such as navigating to other pages or submitting a form. 

Available on all page types: Landing, Standard, Agency, Case Study, Easy Read, Events, POI, Project, Resource

Organises a group of related links into a single list. 

Available on: Landing, Agency (incl. New), Standard, Case study (as Links)

A sticky banner with a button that is always visible on the page even when it is scrolled down. 

Available on: Landing (as floating button banner) and Standard (as Quick Exit button)

A button linked to an external page that allows the audience to subscribe for updates or newsletters. 

Available on: Landing, Standard, Agency (incl. New)

Display links to download an application onto their device. 

Available on: Landing, Standard, Case study, POI

Dynamically generates clickable cards based on its child pages for quick navigation.

Available on: Landing 

Shows and links the headings available on a page for easier browsing. 

Available on: Landing, Standard, Case study (as In page nav)

Sub-navigation helps users navigate a section of related pages instead of using the Side Navigation component.

Available on: Landing, Standard, Agency (incl. New), Case study (as Links)

The side nav is a menu component that is added to the right side of a web page to help users navigate a section of related pages. It is also known as the sidebar or section nav.

Available on: Landing (as Side nav), Standard (as Sidebar nav)

Show name, biography, photo and contact details in a consistent layout. 

Available on: Landing, Agency (incl. New), Standard, Case study

Show contact information like phone, email, address and social media links for organisations, agencies or services.

Available on: Landing, Agency (incl. New), Standard, Case Study, Project 

Displays a collection of visual content in a structured format for easy browsing. 

Available on: Landing, Standard, Case study, Project, Resource

Enables files to be viewed and downloaded, with information on its file type, size and last updated date.

Available on: Landing (as Media download), Resource (as Media download component)

Lists a set of audio or video files which can be viewed on the page. 

Available on: Landing, Standard, Case study, Project, Resource

Provides movement to a section of the page, with an option to highlight key text and calls to action. 

Available on: Landing (as DCS Content Background Block)

Highlight numerical data with optional icons and labels. 

Available on: Landing, Standard, Project

Present sequential data points in a snake-like curve for visual storytelling. 

Available on: Landing

Displays a single statistic as a percentage in the centre of an animated ring.

Available on: Landing

Dynamically display events in a scrolling carousel with title, images and dates.

Available on: Landing, Agency (incl. New)

Dynamically display grants in a scrolling carousel with title, summaries and closing dates. 

Available on: Landing, Agency (incl. New)

Dynamically the most recent news content with the ability to promote one story, list others, and link to more news. 

Available on: Landing, Agency (incl. New)

Dynamically the most recent publications with the ability to promote one publication, list others, and link to more publications. 

Available on: Landing, Agency (incl. New)

Display, search and filter for content that use the articles page type. 

Available on: Landing 

Display, search and filter for content that use the resource page type.

Available on: Landing 

Display, search and filter for events.

Available on: Landing

Display, search and filter for grants. 

Available on: Landing

Display, search and filter for case studies.

Available on: Landing (as DCS Case Study Finder Block)

Display, search and filter for rules.

Available on: Landing (as DCS Rules Finder)

Webforms can be used to capture and collate information digitally. They can provide a better user experience and be more accessible than a PDF form. Webforms can include checkboxes, radio buttons and text fields as well as confirmation that the form has been sent and received.

Available on: Landing (as Webform) and Standard, Case study, POI, Project (as Custom - Webform)