Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.
View a live version of this component and see how it can be customized.
Cards can be used in light and dark themes. They act as a blank canvas where elements and styles can be placed inside.
Cards are secondary layouts that shouldn’t command too much attention and blend in with whatever background they’re placed on. The card container is the only required element and it consists of a background color and rounded corners. A thin border is required if the card background is the same color as the background it's placed on.
A white card with a light gray border is the most common use case in the light theme
A light gray card without a border can also be used as an alternate option
A black card with a dark gray border is the most common use case in the dark theme
A dark gray card without a border can also be used as an alternate option
A card features header, body, and footer sections. Those sections should include a limited amount of content to ensure that the card doesn’t become too tall.
The header section is required, it introduces what the content is and shouldn’t be hidden.
The body section can include a headline, text, an icon, or sometimes an image. The body section describes the content in more detail and shouldn’t be hidden.
The footer section can include normal links or a call to action. It can be hidden if necessary if there’s content included where a user can take an action.
There are several card variants that can be used for a variety of use cases.
Cards have the potential to contain lots of content, like a combination of text, links, images, multimedia, etc. Ensure content serves the use case, but keep things simple at the same time. Don’t use too much content in one card, distribute extra content to other cards or somewhere else on the page. A Sticky card is a kind of card that can contain similar content, but it sticks to the side of a page and it’s always present until a user dismisses it.
Different card styles can sometimes be grouped together. They can be arranged in a grid horizontally or vertically, depending on available space or screen size. Be sure to only group cards together that have similar styles or content. For example, grouping a basic card with a pricing card will look bad because they’re not very similar.
These cards can be grouped together because they have similar styles and content
Cards are small layouts that should be arranged on a grid and not float randomly in larger layouts. Cards have a minimum width of four columns and a maximum width of six columns.
Cards can include complex components if necessary. For example, the Filter component requires an Accordion or a Disclosure to sort a content set. Don't place any other complex components in card layouts.
The minimum width of a card in any layout is four columns and the maximum number of cards that can be used in a row is three.
Don’t use a primary call to action in any card unless the primary action of a page is positioned inside of that card.
Don’t use multiple calls to action in one card. Instead, distribute them to other cards.
The vertical height of cards depends on how much content is placed inside. If there are multiple cards in a row, the vertical height of each of them will be determined by the tallest card. Don’t place inconsistent amounts of content in cards, as this will impact how scannable the group will appear to users.
If a card contains only one link destination, the entire container and any elements inside should all be interactive. Otherwise, each interactive element should continue to be interactive, but not the card container.
Cards will get thinner or move below each other on smaller screens.
Since cards can consist of a variety of elements, refer to the specific interaction states that are assigned to each style and component for more information.
Cards use PatternFly 4 spacers to define spacing values between elements.
Container padding defines how far away content is from the edges of the component. When cards become wider, the container padding increases. When they become thinner, the container padding decreases. See more examples here.