import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Card/Card" />

# Card

Cards are usually placed in groups and used to display content related to a single subject. 
The content can consist of multiple components of varying types and sizes.

Card should:
- Relay clear expectations for user interactions.
- Be self-contained and freely placed based on function.
- Be grouped in a uniform layout when the content length and sizes are similar.

Cards shouldn’t contain too much information. Keep it simple and scannable.

This component is built on [Box from Theme-UI](https://theme-ui.com/components/box) and accepts most [Styled System props](https://styled-system.com/table/).

### Required Components

This component can be used independently and does not require additional components.

### Accessibility

#### Keyboard Navigation

These keys provide additional functionality to the Interactive Card components.

| Keys | Functions |
| ---- | --------- |
| Space or Enter | Selects the button. |
| Tab | Focuses the button and follows the page tab sequence.|

### Note

Use variant "cards.withShadow" to apply box-shadow on Card component.