A Design System component is a reusable piece of code that represents a visual element or interaction in a user interface (UI). Components are typically organised into a library, which can be used by designers and developers to create consistent and user-friendly experiences across a variety of products and platforms.

The following is a list of our Design System components.

  • Accordions

    Accordions expand and collapse sections of content.

  • Back-to-top

    The 'back-to-top' button, commonly found on design system websites, is a small button placed at the bottom of the page that allows users to quickly scroll back up to the top of the page.

  • Banners

    May also be known as: Hero banner or simply hero.

  • Breadcrumbs

    Also known as: Navigation trail

  • Buttons

    May also be known as: Action button.

  • Callouts and quotes

    May also be known as: Block-quotes, pullquotes and highlights.

  • Call-to-action (CTA)

    Call-to-action (CTA) is also known as a call-to-action button or a CTA button.

  • Cards

    The card component is used to provide a brief summary of content or a task, often with a link to more detail.

  • Checkboxes

    Also known as control inputs, tick boxes and option buttons.

  • Direction links

    Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.

  • File upload

    The file uploader allow users to select one or more files to upload to a specific location.

  • Footer

    Footers are a common element of web design that appear at the bottom of a webpage.

  • Forms

    May also be known as: text input fields, input boxes, or text boxes.

  • Global alerts

    Global alerts display across the top of the entire site to convey important information to the users.

  • Header

    May also be know as site header, and header bar.

  • Horizontal navigation

    Also known as: Top navigation menu, Header menu, Main nav, Main menu, Site-wide navigation menu, Navbar (short for Navigation Bar), Top-level navigation, Primary navigation bar, Main navigation

  • Horizontal rule

    A horizontal rule is a visual element used in web design and documents to separate or organise content.

  • In-page alerts

    May also be known as: feedback messages, or toast messages, notifications, in-line alerts

  • In-page navigation

    In-page nav is a vertical list of links that helps users scan the contents of a page and navigate to different sections of the page.

  • Link columns (Link list)

    Also known as: link lists, arrow links.

  • Loading spinner

    A loading spinner, also known as a loading indicator or simply spinner, is a small looped animation used to indicate that content is being loaded or processed.

  • Pagination

    Pagination is used to divide large amounts of content into a series of pages.

  • Promotional panel

  • Radio buttons

    May also be known as: radio options, option buttons, or simply options.

  • Select box

    May also be known as: drop-down lists, select menus or select boxes

  • Side navigation

    May also be known as: Sidebar menu, secondary menu, or supplementary menu.

  • Tables

    Tables provide a structure for complex and detailed information.

  • Tabs

    May also been known as: Tabbed navigation, Tab menu.

  • Tags

    Tags classify content using keywords or labels.

  • Text box and text area

    May also be known as: text input fields, input boxes, or text boxes.

  • Vertical navigation

    May also be known as: Sidebar navigation, Left-side navigation, Vertical navigation

Last updated: May 2024