# Card

> Source: https://design.nanatec.co.ke/components/card/
> A surface container that groups related content. Compose it with `nana-card-header`, `nana-card-title`, `nana-card-description`, `nana-card-content` and `nana-card-footer`.

A surface container that groups related content. Compose it with `nana-card-header`, `nana-card-title`, `nana-card-description`, `nana-card-content` and `nana-card-footer`.

## Preview

```html
<nana-card style="max-width:22rem">
  <nana-card-header>
    <nana-card-title>Card title</nana-card-title>
    <nana-card-description>A short supporting description.</nana-card-description>
  </nana-card-header>
  <nana-card-content>A card groups related content into a single surface.</nana-card-content>
  <nana-card-footer>
    <nana-button size="sm">Action</nana-button>
  </nana-card-footer>
</nana-card>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/card";
```

## Basic usage

```html
<nana-card style="max-width:22rem">
  <nana-card-header>
    <nana-card-title>Card title</nana-card-title>
    <nana-card-description>A short supporting description.</nana-card-description>
  </nana-card-header>
  <nana-card-content>A card groups related content into a single surface.</nana-card-content>
  <nana-card-footer>
    <nana-button size="sm">Action</nana-button>
  </nana-card-footer>
</nana-card>
```

## Variants

The `variant` attribute sets the card's surface treatment — `default`,
`elevated`, `outlined`, `filled`, or `glass`.

```html
<nana-card variant="default" style="width:12rem"><nana-card-content>Default</nana-card-content></nana-card>
<nana-card variant="elevated" style="width:12rem"><nana-card-content>Elevated</nana-card-content></nana-card>
<nana-card variant="outlined" style="width:12rem"><nana-card-content>Outlined</nana-card-content></nana-card>
<nana-card variant="filled" style="width:12rem"><nana-card-content>Filled</nana-card-content></nana-card>
<nana-card variant="glass" style="width:12rem"><nana-card-content>Glass</nana-card-content></nana-card>
```

## Interactive

Add the `interactive` attribute to make the whole card a hoverable, focusable
target (e.g. a link card).

```html
<nana-card variant="outlined" interactive style="width:16rem">
  <nana-card-header>
    <nana-card-title>Interactive card</nana-card-title>
    <nana-card-description>Hover or focus me</nana-card-description>
  </nana-card-header>
  <nana-card-content>Lifts on hover and shows a focus ring.</nana-card-content>
</nana-card>
```

## API

## Slots

| Slot | Description |
|---|---|
| `(default)` | Card sub-sections (header, content, footer) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-card-bg` | — | Background colour |
| `--nana-card-color` | — | Text colour |
| `--nana-card-radius` | — | Corner radius |

## Related components

<ul class="related not-content">
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
  <li><a href="/components/popup/">Popup</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-card--docs