Elements

Overview

Red Hat design system's elements are custom HTML elements - interactive building blocks of our design system. Each element was created to meet a specific UI and accessibility need. Elements should be used harmoniously together in the same space to create more intuitive user interfaces and experiences.

Accordion

Expands or collapses a stacked list of panels

Alert

Notifies a user without blocking their workflow

Audio Player

Plays audio clips and includes other features

Avatar

An avatar is a small thumbnail representation of a user.

Badge

Annotates information like a label or object

Blockquote

Highlights quotations and citations with text styles

Keeps track of location as users move through pages

Button

Triggers actions on the page or in the background

Call to action

Directs users to other pages or displays extra content

Card

Arranges content and interactive elements in a layout

Code Block

Formatted code strings in a container.

Dialog

Communicates information requiring user input or action

Displays secondary information at the bottom of a page

Footnote (coming soon)

Provides additional information or a source for content

Moves users to specific content when a link is selected

Organizes content representing global web properties

Guides users through a task with sequential steps

Pagination

Allows users to navigate content divided into pages

Popover

Overlays an area of information without blocking users

Progress steps

Guides users through a task with sequential steps

Spinner

Notifies users their action is being processed or loaded

Statistic

Showcases a data point or quick fact visually

Organizes content into sections using tabbed pages

Tabs

Arranges content in a contained view on the same page

Tag

Highlights an element to add clarity or draw attention

Timestamp

Displays a line of text with date and time values

Tooltip

Reveals a small area of information on hover

Make a request

To request a new element or if updates need to be made to an existing element, create a GitHub issue.

© 2021-2023 Red Hat, Inc. Deploys by Netlify