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