# Card

> A boxed surface from the article element, with an optional header and footer.

Page: https://pico.rusticstack.com/docs/components/card

An `<article>` is a card. A `<header>` or `<footer>` as a direct child becomes a full-width band with its own background and a border toward the body. Nothing else is needed.

**Example: Card**

```html
<article>
  <header>Header</header>
  Body of the card.
  <footer>Footer</footer>
</article>
```

Header and footer are optional, and you can use either one alone.

**Example: Body only and header only**

```html
<article>A card with only a body.</article>
<article>
  <header>Header only</header>
  Body text.
</article>
```

## Cards in a grid

Put cards in a `.grid` to place them side by side. The grid is part of the class build.

**Example: Cards in a grid**

```html
<div class="grid">
  <article>
    <header>One</header>
    First card.
  </article>
  <article>
    <header>Two</header>
    Second card.
  </article>
</div>
```

## Cards in other places

The same surface is used inside a [modal](/docs/components/modal), where the `<article>` is the dialog box, and inside a bare popover, where an `<article>` child turns the popover into a card (see [Popover patterns](/docs/components/popover)). A card with `aria-busy="true"` shows a spinner, see [Loading](/docs/components/loading).

## Customization

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-card-background-color` |  | Card surface. Light and dark values come from light-dark(). |
| `--pico-card-border-color` |  | Line between the body and the header or footer. |
| `--pico-card-box-shadow` | `var(--pico-box-shadow)` | Shadow around the card. |
| `--pico-card-sectioning-background-color` |  | Background of the header and footer bands. |
| `--pico-block-spacing-vertical` | `var(--pico-spacing)` | Vertical padding and bottom margin. |
| `--pico-block-spacing-horizontal` | `var(--pico-spacing)` | Horizontal padding. |
| `--pico-card-border-radius` | `calc(var(--pico-border-radius) * 1.5)` | Corner radius of the card, also applied to the header and footer ends. 1.5 times `--pico-border-radius` by default. |