package.docs.components.Card.examples.Card.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
id: Card
section: components
cssPrefix: pf-v6-c-card
---import './Card.css'
## Examples
### Basic
```html
Title
Body
```
### With image and action
```html
Title
Body
```
### With title in head
```html
This is a really really really really really really really really really really long title
Body
```
### With only actions in head (no title/footer)
```html
This is the card body. There are only actions in the card head.
```
### Actions with no offset
```html
This is a card title
Body
```
### With only image in head
```html
Title
Body
```
### With no footer
```html
```
### With no title
```html
This card has no title
```
### With only a content section
```html
Body
```
### With multiple body sections
```html
Title
Body
Body
Body
```
### With only one body that fills
```html
Title
Body pf-m-no-fill
Body pf-m-no-fill
Body
```
### Compact
```html
Title
Body
```
### Large
```html
Title
Body
```
### Selectable
```html
Title
Body
Disabled card
Body
Selected but disabled card
Body
```
### Selectable secondary style
```html
Title
Body
Disabled card
Body
Selected but disabled card
Body
```
### Single selectable
```html
Title
Body
Disabled card
Body
Selected but disabled card
Body
```
### Actionable (button)
```html
Title
Body
Title (clicked)
Body
Disabled card
Body
```
### Actionable (link)
```html
```
### Actionable secondary style
```html
Title
Body
Disabled card
Body
```
### Actionable and selectable
```html
Body
Body
Body
Body
```
### Actionable and selectable secondary style
```html
Body
Body
Body
Body
```
### Secondary
```html
Title
Body
```
### Plain
```html
Title
Body
```
### Expandable
```html
Title
```
### Expandable with image
```html
```
### Expanded
```html
```
### Full height card
```html
Title
Body
```
### Expandable toggle on right
```html
Title
```
### Card with dividers between sections
```html
Title
Body
Body
```
## Documentation
### Overview
A card is a generic rectangular container that can be used to build other components. Use a default card for regular page content and the compact variation for dashboard or small cards.
### Usage
| Class | Applied | Outcome |
| ---- | ---- | ---- |
| `.pf-v6-c-card` | `` | Creates a card component. **Required** |
| `.pf-v6-c-card__title` | `` | Creates a card title container. |
| `.pf-v6-c-card__title-text` | ``, ``, ``, ``, ``, ``, `` | Creates a card title text element. |
| `.pf-v6-c-card__body` | `` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
| `.pf-v6-c-card__footer` | `` | Creates the footer of a card. |
| `.pf-v6-c-card__header` | `` | Creates the header of the card where images, actions, and/or the card title can go. |
| `.pf-v6-c-card__header-toggle` | `` | Creates the expandable card toggle. |
| `.pf-v6-c-card__header-toggle-icon` | `` | Creates the expandable card toggle icon. |
| `.pf-v6-c-card__actions` | `` | Creates an actions element to be used in the card header. |
| `.pf-v6-c-card__selectable-actions` | `` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
| `.pf-v6-c-card__header-main` | `` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-v6-c-card__header` has content outside of a card header toggle or card header actions** |
| `.pf-v6-c-card__expandable-content` | `` | Creates the expandable card's expandable content. |
| `.pf-v6-c-card__sr-input` | `` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
| `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
| `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
| `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
| `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable. |
| `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |
| `.pf-m-selected` | `.pf-v6-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v6-c-card__input`. |
| `.pf-m-current` | `.pf-v6-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
| `.pf-m-disabled` | `.pf-v6-c-card` | Modifies a card so it is not selectable or clickable. |
| `.pf-m-secondary` | `.pf-v6-c-card` | Modifies the card to have secondary styling. |
| `.pf-m-flat` | `.pf-v6-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
| `.pf-m-rounded` | `.pf-v6-c-card` | Modifies the card to have rounded corners. |
| `.pf-m-plain` | `.pf-v6-c-card` | Modifies the card to have no box shadow and no background color. |
| `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
| `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
| `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
| `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
© 2015 - 2025 Weber Informatics LLC | Privacy Policy