# Card

Source: https://iriscss.com/documentation/components/card/

A padded block with a background, a shadow and optional header and footer bands.

Add `.card` to any block element, usually an `article`. A direct `header` or `footer` becomes a tinted band.

```html
<article class="card">
  <header><h3>Pro plan</h3></header>
  <p>Unlimited projects, priority support and early access to new components.</p>
  <footer><button class="primary">Choose</button></footer>
</article>
```

## Body only

```html
<article class="card">
  <p>A card without bands is a padded block, like a <a href="/documentation/components/box/">box</a>.</p>
</article>
```

## Outlined

`.outlined` swaps the background and shadow for a border, and makes the bands transparent.

```html
<article class="card outlined">
  <header><strong>Outlined</strong></header>
  <p>A quiet card for secondary content.</p>
</article>
```

## Sizes

`.small`, `.medium` and `.large` change the padding.

```html
<article class="card small"><p>Small</p></article>
<article class="card"><p>Default</p></article>
<article class="card medium"><p>Medium</p></article>
<article class="card large"><p>Large</p></article>
```

## Rounded and square

```html
<article class="card rounded"><p>Rounded</p></article>
<article class="card square"><p>Square</p></article>
```

## Card grid

Put cards in a [`.grid`](https://iriscss.com/documentation/layout/container-and-grid/index.html.md#grid) for equal columns that wrap.

```html
<div class="grid">
  <article class="card"><h4>Free</h4><p>3 projects</p></article>
  <article class="card"><h4>Pro</h4><p>Unlimited projects</p></article>
  <article class="card"><h4>Team</h4><p>Shared workspaces</p></article>
</div>
```

## In a modal

A [modal](https://iriscss.com/documentation/components/modal/index.html.md) dialog is always a card, with no class.

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-card-section-padding-scale` | `0.66` | Header and footer padding, relative to the card padding |
| `--i-card-color-background` | `light-dark(var(--i-color-background), #181c25)` |  |
| `--i-card-color-border` | `light-dark(var(--i-color-subtle-border), var(--i-card-color-background))` |  |
| `--i-card-section-color-background` | `light-dark(#fbfcfd, #1a1f28)` |  |
| `--i-card-shadow` | `var(--i-shadow)` |  |