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.
Filter elements by category
All elements
Actions and links
Data
Emphasis
Imagery
Inputs
Media
Navigation
Overlays
Selection
Status
Structure
Actions and links (6)
Fixed anchor link for returning to page top on long pages
Organize multiple related buttons into a single collection
Clickable button that triggers page or form actions
Styled link or button for prominent user actions
Allows users to skip repetitive navigation for accessibility
Data (5)
Non-interactive numeric pill badge for counts and status
Provides an estimated reading time for content
Organizes and displays information from a data set
Categorizes content, adds context, or indicates status
Displays a formatted date and time value using locale-aware formatting
Emphasis (3)
Highlights quotations and citations with text styles
Showcases a data point or quick fact visually
Imagery (2)
Circular thumbnail for mastheads, navigation, and attribution
Displays Red Hat brand icons with configurable size and loading
Plays audio clips with playback controls, transcript, and panels
Embeds a YouTube video with a thumbnail preview and play button
Navigation (10)
Displays a hierarchical trail of links showing a location
on a website
Persistent navigation links to page sections
A link that can be used as a child of navigation elements
Persistent bar for orienting users and navigating across sites
Secondary level navigation bar for linking related pages
Organizes and communicates structure and content vertically
Communicate how many steps are required to complete a process
Displays a horizontal list of navigation links for related pages
Overlays (3)
Modal dialog for confirmations, errors, or required input
Overlays an area of information without blocking users
Reveals a small area of information on hover
Selection (4)
Filter information or indicate that a selection was made
Switches between light, dark, and system default color schemes
A control that provides a menu of options
A switch toggles the state of a setting (between on and off)
Status (5)
Notifies a user without blocking their workflow
Displays a health grade for a particular item or package
Communicates operational status of a website or domain
A placeholder for content that is loading
Notifies users their action is being processed or loaded
Structure (8)
Organizes content into expandable sections users can open or close
Full-width promotional or informational banner
Groups content and optional actions in a contained layout
Formats code strings within a container
A disclosure toggles the visibility of content when triggered
Provides background color and theming context for children
Arranges content in a contained view on the same page
Clickable surface for content like images, icons, and links
Feedback
To give feedback about anything on this page, contact us .
