Home

About

About the Design System

Roadmap

Get started

Overview

Designers

Developers

Foundations

Overview

Color

Grid

Iconography

Interactions

Spacing

Typography

Tokens

Overview

Global color

box shadow

Typography

border

opacity

space

length

Icon

Breakpoints

Media Queries

Elements

All elements

Accordion

Alert

Announcement

Audio player

Avatar

Back to top

Badge

Blockquote

Breadcrumb

Button

Card

Chip

Code block

Call to action

Dialog

Disclosure

Footer

Health index

Icon

Jump links

Navigation (primary)

Navigation (secondary)

Pagination

PopoverPlanned

Progress stepsPlanned

Site status

Skip link

Spinner

Statistic

Subnavigation

Surface

Switch

Table

Tabs

Tag

Tile

Timestamp

Tooltip

Video embed

Theming

Overview

Color Palettes

Customizing

Developers

Patterns

All Patterns

Card

Tabs

Filter

Form

Link

Link with icon

Logo wall

Search bar

Skip navigation

Sticky banner

Sticky card

Tile

Video thumbnail

Personalization

All Personalization Patterns

Announcement

Accessibility

Fundamentals

Accessibility tools

Assistive technologies

CI/CD

Content

Contributors

Design

Development

Manual testing

Resources

Screen readers

Design/code status

Release notes

Get support

All elements

Overview

Make a request

Overview

Make a request

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

Announcement

Arranges content and interactive elements in a layout

Audio player

Plays audio clips and includes other features

Avatar

Visually represents a user in a masthead or navigation

Back to top

A shortcut to the top of the page content

Badge

Annotates information like a label or object

Blockquote

Highlights quotations and citations with text styles

Button

Triggers actions on the page or in the background

Card

Arranges content and interactive elements in a layout

Chip

Filter information or indicate that a selection was made

Code block

Formats code strings within a container

Call to action

Directs users to other pages or displays extra content

Dialog

Communicates information requiring user input or action

Disclosure

A disclosure toggles the visibility of content when triggered

Footnote

Provides additional information or a source for content

Coming Soon

Health index

Displays a health grade for a particular item or package

Icon

Decorative element which supports related content

Jump links

Moves users to specific content when a link is selected

Pagination

Allows users to navigate content divided into pages

Progress steps

Guides users through a task with sequential steps

Site status

Communicates operational status of a website or domain

Spinner

Notifies users their action is being processed or loaded

Statistic

Showcases a data point or quick fact visually

Subnavigation

Organizes content into sections using tabbed pages

Surface

Provides background color context for elements placed on top

Switch

A switch toggles the state of a setting (between on and off).

Table

Organizes and displays information from a data set

Tabs

Arranges content in a contained view on the same page

Tag

Highlights an element to add clarity or draw attention

Tile

Creates a clickable, contained surface

Timestamp

Displays a line of text with date and time values

Video embed

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 or contact us.

Elements

To learn how to use our elements in your designs, visit the Elements section.

Edit this page on GitHub

© 2021-2025 Red Hat, Inc.