Components - Intelligence Community Design System

Skip to main content

Skip to page content

Components

Accordion

Accordions are expandable and collapsible sections that are used to show and hide additional content.
Alert

Alerts display a short important message in a way that attracts attention without interrupting the current task.
Back to top

The back to top component helps people quickly return to the top of a long page.
Badge

Badges are attached to other components to provide an indication that something new is available, or that something has changed.
Breadcrumb

Breadcrumbs show someone where they are in an app’s hierarchy and provide a secondary method of navigating back to parent pages.
Button

Buttons are used to allow or encourage people to take an action.
Card (horizontal)

Horizontal cards are containers used to display structured information or link to new information.
Card

Cards are containers used to display structured information or interactive content.
Checkbox

Use checkboxes as part of a form, in dialogs or in control areas such as filters or settings.
Chip

Chips are used to filter and present data.
Classification banner

Classification banners are used to show the data classification (also known as protective marking) of an app.
Data entity

The data entity component displays a group of related data in a consistent and easy to consume way.
Data table

Use a data table to organise and display large quantities of related data.
Date input

A date input is used when gathering a specific date in a text-based format.
Date picker

A date picker is a type of drop-down control that allows people to easily view and select dates.
Dialog

Dialogs are modal windows that interrupt the user's current task to bring something important to attention.
Empty state

Use the empty state component when there is no content to display. It provides a consistent way of communicating to people what to do next.
Footer

Footers are placed at the bottom of the page and can be used for additional links not found in the main navigation.
Hero

A large banner found at the top of page used to introduce page content, provide key actions and add personality.
Link

Links can be used to navigate to different pages or sections of a page.
Loading indicator

Loading indicators help inform users that a request is being processed. Radial and linear indicators provide flexibility in design.
Multi-select

Use the multi-select component to allow users to select one or more values from a list of options.
Page header

A page header defines the top of the page content and is a consistent way to show page context, key actions and secondary navigation.
Pagination

Use the Pagination components to split large amounts of content into pages and navigate between them.
Popover menu

Use popover menus to place actions inside a menu that overlays other page content when opened.
Radio button

Radio buttons let people select a single option from a list.
Search bar

A search bar is a special input field that allows users to search for information using keywords or phrases.
Section container

Use the section container component to consistently align content within an app.
Select

Selects allow users to select one or more values from a list of options.
Side navigation

Side navigation provides an app's main navigation and is fixed on the left-hand side of the app. It includes the app's name, main navigation and optional secondary links.
Skeleton

Skeleton loading states are representations of the shape of content that help inform users that a specific type of component is loading.
Status tag

Status tags are short, clear and digestible ways to display the status of something on the page.
Stepper

A stepper is a visual representation of a user's progress through a predefined set of steps in a linear process.