All components - PatternFly Elements

Overview

Components are interactive building blocks of our design system. Each component was created to meet a specific UI and accessibility need. Components should be used harmoniously together in the same space to create more intuitive user experiences.

Accordion

Toggle the visibility of sections of content

Autocomplete

Provides options in a dropdown list as user types in an input box

Avatar

For displaying a user's avatar image

Badge

Provides a way to have small numerical descriptors for UI elements

Band

Provides a set of slots in which to render banded content

Button

Allows users to perform an action when triggered

Call to action

Directs a user to other pages or displays extra content

Card

Gives a preview of information in a small layout

Clipboard

Gives a preview of information in a small layout

Codeblock

Render code in a styled and formatted way

Collapse

Hide and show content

Content set

Display content as tabs or an accordion based on screen size

Datetime

Display dates and times in a consistent format

Dropdown

Provides a dropdown menu of links and/or actions

Health index

Shows a health grade

Icon

Delivers icon elements that can be sized, colored, and circled

Icon panel

Provides a way to present text with an accompanying icon

Jump links

Moves a user to content when a link is selected

Markdown

Takes markdown as input and displays it as HTML

Modal

Displays information or helps a user focus on a task

Navigation

Helps a user move seamlessly through a website

Number

Display numbers in a consistent type and format

Page status

Creates a flag/banner on the right side of the page

Primary detail

A primary-detail layout is an interface that shows a list of items and the corresponding details of the selected item.

Progress indicator

Indicates that the user is waiting on a process

Select

Provides a way to create a stylized list of options for a form

Tabs

Organizes content in a contained view on the same page

Toast

An alert hidden on page load and slides in/out of the view