Cards are used to group similar concepts and tasks together to make it easier for users to scan, read, and get things done.

### Examples

#### Basic Example

```jsx live=true
<Card>
  <CardContent>
    <Text variant="ootah">Card Component</Text>
    <Spacer />
    <Text>This is a card</Text>
  </CardContent>
</Card>
```

#### Card with `href` prop

Cards can render as a link, which will give it a hover effect and make it keyboard focusable.

```jsx live=true
<Card href="https://www.volvocars.com/">
  <CardContent>
    <Text variant="ootah">Card Component</Text>
    <Spacer />
    <Text>This is a is a link that will take you to volvocars.com</Text>
  </CardContent>
</Card>
```

#### Selected Card

Cards can also render in a "selected" state.

```jsx live=true
<Card selected>
  <CardContent>
    <Text variant="ootah">Card Component</Text>
    <Spacer />
    <Text>This is a is a link that will take you to volvocars.com</Text>
  </CardContent>
</Card>
```

#### Card with an image

A common use-case is to render an image inside a card

```jsx live=true
<Card>
  <Flex
    extend={{
      justifyContent: 'center',
      padding: 32,
      background: 'linear-gradient(pink, blue)',
    }}
  >
    <Text variant="bates" extend={{ color: '#fff' }}>
      Fake Image
    </Text>
  </Flex>
  <CardContent>
    <Text variant="ootah">Card Component</Text>
    <Spacer />
    <Text>This is a card component</Text>
  </CardContent>
</Card>
```