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
Arranges content and interactive elements in a layout
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
Vertical navigation
Overlays an area of information without blocking users
Communicate how many steps are required to complete a process
Switches between a variety of color schemes
Communicates operational status of a website or domain
A placeholder for content that is loading.
Skip to the main content of a page
Notifies users their action is being processed or loaded
Showcases a data point or quick fact visually
Organizes content into sections using tabbed pages
Provides background color context for elements placed on top
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
Highlights an element to add clarity or draw attention
Creates a clickable, contained surface
Displays a line of text with date and time values
Reveals a small area of information on hover
Reveals a small area of information on hover
