# Box

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

A padded block with a background, rounded corners and a shadow.

```html
<div class="box">
  <p>A box holds anything: text, a form or a small widget.</p>
</div>
```

## Clickable box

On a link the whole box is clickable and lifts on hover.

```html
<a class="box" href="#">
  <strong>Documentation</strong>
  <p>Everything about Iris CSS in one place.</p>
</a>
```

## Styles

`.outlined` swaps the shadow for a border. `.rounded` and `.square` change the corners.

```html
<div class="box outlined">Outlined</div>
<div class="box rounded">Rounded</div>
<div class="box square">Square</div>
```

## Box or card

A box is one plain block. A [card](https://iriscss.com/documentation/components/card/index.html.md) adds header and footer bands and size classes.

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-box-padding` | `1.25rem` |  |
| `--i-box-border-radius` | `var(--i-border-radius)` |  |
| `--i-box-color-text` | `var(--i-color-text)` |  |
| `--i-box-color-background` | `var(--i-color-background)` |  |
| `--i-box-color-border` | `var(--i-color-subtle-border)` |  |
| `--i-box-shadow` | `var(--i-shadow)` |  |
| `--i-box-hover-shadow` | `0 0.5em 1em -0.125em color-mix(in oklab, var(--i-color-text) 10%, transparent), 0 0 0 var(--i-border-width) var(--i-color-link)` | Linked box hover and press |
| `--i-box-active-shadow` | `inset 0 0.0625rem 0.125rem color-mix(in oklab, var(--i-color-text) 20%, transparent), 0 0 0 var(--i-border-width) var(--i-color-link)` |  |