## Import

```tsx
import { Card } from "@cfa/react-core";
```

## Live Editor

```tsx
<Card.Root style={{ width: 258 }} outlined>
  <Card.Content>
    <Card.Title>Title</Card.Title>
    <Card.Subtitle>Sub title</Card.Subtitle>
    <Card.Body>
      Card body content. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Card.Body>
  </Card.Content>
  <Card.Actions>
    <Button>Button</Button>
  </Card.Actions>
  <Card.Media
    alt="drive-thru"
    src="https://d1fd34dzzl09j.cloudfront.net/Images/CFACOM/Careers%20Images/Team-Member-It-Really-Is-Our-Pleasure-desktop.jpg?h=405&w=674&la=en"
  />
</Card.Root>
```

## Examples

### Composed

This is a Simple Card example composed with all subcomponents.

`Card.Content`, `Card.Actions` and `Card.Media` all have an `order` set to control the visual order of these components.

Notice that `Card.Media` is the last component nested in `Card.Root`, but visually is ordered first.
We are following the [accessibility guidance for images in cards from W3](https://design-system.w3.org/components/cards.html#considerations):

> In the markup, the card text is first in the source order to prioritize it over the icon/image.
> Flexbox is used to place the icon/image ahead of the card text visually, via the order property.

`Card.Title`, `Card.Subtitle`, and `Card.Body` provide consistent styling for text content.

```tsx
<Card.Root style={{ width: 258 }}>
  <Card.Content>
    <Card.Title>Primary Title</Card.Title>
    <Card.Subtitle>Sub title</Card.Subtitle>
    <Card.Body>
      Detailed text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Card.Body>
  </Card.Content>
  <Card.Actions>
    <Button variant="outlined">Cancel</Button>
    <Button>Ok</Button>
  </Card.Actions>
  <Card.Media
    alt="drive-thru"
    src="https://d1fd34dzzl09j.cloudfront.net/Images/CFACOM/Careers%20Images/Team-Member-It-Really-Is-Our-Pleasure-desktop.jpg?h=405&w=674&la=en"
  />
</Card.Root>
```

### Outlined

The `outlined` prop adds a border to the card. By default, the card is not outlined.

```tsx
<Card.Root style={{ width: 320 }} outlined>
  <Card.Content>
    <Card.Title>Primary Title</Card.Title>
    <Card.Subtitle>Sub-title</Card.Subtitle>
    <Card.Body>
      Detailed text. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </Card.Body>
  </Card.Content>
  <Card.Actions>
    <Button variant="outlined">Cancel</Button>
    <Button>Ok</Button>
  </Card.Actions>
</Card.Root>
```

## Props

### Card.Root

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| outlined | `boolean` | `false` | Include an outline on the card |
| style | `CSSProperties` | - | - |

### Card.Content

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |

### Card.Title

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |
| level | `number` | `3` | - |

### Card.Subtitle

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |

### Card.Body

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |

### Card.Actions

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |

### Card.Media

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| alt\* | `string` | - | - |
| src\* | `string` | - | - |
| className | `string` | - | - |
| id | `string` | - | - |
| style | `CSSProperties` | - | - |