Colour palettes and usage, contrast guidelines and SASS variables.
Design Library
A reference for all the components, foundations and patterns in the NICE design system
Foundations
Our foundations are the design basics that we build our services on.
Use containers, grids and whitespace to build a structure and hierarchy on the page.
Useful helper classes for common tasks.
Icons, their usage and guidance for creating new custom icons.
Links and hover/active/visited/focus states.
Guidance for building mobile-first responsive web applications.
Settings for spacing between elements and vertical rhythm.
Settings for text and type - headings, paragraphs, links, lists and quotes.
Showing and hiding elements across breakpoints, for print, device orientations and screen readers.
Components
Components are individual design building blocks. They can be combined to create larger patterns and pages.
A to Z is a way of presenting a number of pages in an alphabetical list so users can find and navigate to the content they need.
The accordion component lets users show and hide related content sections on a page.
Banner for highlighting and giving context to a call-to-action.
Alerts notify users of important information or changes on a page in a way that attracts the user's attention without interrupting their task.
Display a horizontal A-Z list with optional links.
A breadcrumb trail is a secondary navigation, that displays as a series of links, situated below the header.
Use buttons when users need to trigger an action.
A navigation component used as an overview and entry point to access more detailed information on a topic.
Let users select one or more options by using the checkbox component.
A component for displaying a list of items in up to 3 columns.
Keep content aligned and readable by placing it in a container.
A set of components to use to filter results.
Use a form group to show a relationship between multiple form inputs.
A component that makes the content within span the full width of the page.
Introduce a site or sub-site with impact.
A navigation menu to navigate to different high level pages or sections.
Allows users to navigate to specific sections, within long pages of content, across any screen size.
Main heading and intro copy to introduce a page.
Pagination is used for moving between pages of information.
Use a panel to highlight or separate content.
Alpha and beta beta banners clearly identify non-live services.
Use the radio component when users can only select one option from a list.
Navigation to support sub-pages within a section.
Tables are used for displaying information to make it easier to compare and scan.
Content is separated into different panes, with only one pane viewable at a time.
Tags provide a visual way to identify, label or highlight an item.
Allow the user to enter text as part of a form.
Use a textarea to allow the user to enter a larger amount of text than an input might allow.