Elements
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
Toggles the visibility of multiple content panels
Alert
Notifies a user without blocking their workflow
Audio player
Plays and controls audio clips in a web browser
Avatar
Replaces a photo or image not submitted by a user
Badge
Blockquote
Styles a customer quote and includes attribution
Button
Performs an action in the background when triggered
Cta
Directs a user to other pages or displays extra content
Card
Organizes content or media in various container sizes
Dialog
Displays content or helps a user focus on a specific task
Footer
Displays secondary information at the bottom of a page
Jump links
Moves a user to specific content when a link is selected
Navigation primary
Organizes content representing global web properties
Navigation Secondary
Connects a series of pages across web properties
Pagination
Popover
Displays a small overlay of content when triggered
Progress steps
Guides a user through a task with sequential steps
Spinner
Stat
Subnav
Tabs
Arranges content in a contained view on the same page
Tag
Tooltip
Toggles a small overlay of text only on hover or focus
Make a request
To request a new element or if updates need to be made to an existing element, contact us.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other components in your designs, visit the Elements section.
