import './Card.css'

## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### With image and action


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### With title in head


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### With only actions in head (no title/footer)


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Card with header that wraps


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Actions with no offset


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### With only image in head


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### With no footer


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### With no title


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### With only a content section


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### With multiple body sections


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### With only one body that fills


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Compact


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Large


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Selectable


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Selectable secondary style


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Single selectable


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Actionable (button)


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Actionable (link)


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

### Actionable secondary style


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

### Actionable and selectable


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

### Actionable and selectable secondary style


import Example22 from './Example22.html?raw'

<LiveExample html={Example22} />

### Secondary


import Example23 from './Example23.html?raw'

<LiveExample html={Example23} />

### Plain


import Example24 from './Example24.html?raw'

<LiveExample html={Example24} />

### Expandable


import Example25 from './Example25.html?raw'

<LiveExample html={Example25} />

### Expandable with image


import Example26 from './Example26.html?raw'

<LiveExample html={Example26} />

### Expanded


import Example27 from './Example27.html?raw'

<LiveExample html={Example27} />

### Full height card


import Example28 from './Example28.html?raw'

<LiveExample html={Example28} />

### Expandable toggle on right


import Example29 from './Example29.html?raw'

<LiveExample html={Example29} />

### Card with dividers between sections


import Example30 from './Example30.html?raw'

<LiveExample html={Example30} />

## 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` | `<div>` | Creates a card component.  **Required** |
| `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
| `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
| `.pf-v6-c-card__body` | `<div>` | 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` | `<div>` | Creates the footer of a card. |
| `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
| `.pf-v6-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
| `.pf-v6-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
| `.pf-v6-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
| `.pf-v6-c-card__selectable-actions` | `<div>` | 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` | `<div>` | 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` | `<div>` | Creates the expandable card's expandable content. |
| `.pf-v6-c-card__sr-input` | `<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-wrap` | `.pf-v6-c-card__header` | Modifies the card header to wrap its children. |
| `.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. |