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.
Expands or collapses a stacked list of panels
Notifies a user without blocking their workflow
Full-width promotional or informational banner
Plays audio clips and includes other features
Visually represents a user in a masthead or navigation
A shortcut to the top of the page content
Annotates information like a label or object
Highlights quotations and citations with text styles
Links displaying a hierarchical location
Triggers actions on the page or in the background
Arranges content and interactive elements in a layout
Filter information or indicate that a selection was made
Formats code strings within a container
A call to action is styled text representing a link.
Communicates information requiring user input or action
A disclosure toggles the visibility of content when triggered
Displays a health grade for a particular item or package
Decorative element which supports related content
Moves users to specific content when a link is selected
A link that can be used as a child of navigation elements.
Primary navigation
Propagates related content across a series of 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
Switches between light, dark, and system default color schemes.
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
