import { Badge } from 'terra-card/package.json?dev-site-package';

import CardDefault from './example/CardDefault?dev-site-example';
import CardRaised from './example/CardRaised?dev-site-example';
import CardPadding from './example/CardPadding?dev-site-example';
import CardPaddingVertical from './example/CardPaddingVertical?dev-site-example';
import CardPaddingHorizontal from './example/CardPaddingHorizontal?dev-site-example';
import CardPaddingHR from './example/CardPaddingHR?dev-site-example';
import CardContentCentered from './example/CardContentCentered?dev-site-example';
import CardVisuallyHiddenText from './example/CardVisuallyHiddenText?dev-site-example';

import CardPropsTable from 'terra-card/lib/Card?dev-site-props-table';
import CardBodyPropsTable from 'terra-card/lib/CardBody?dev-site-props-table';

<Badge />

# Terra Card

Card is a basic container with some base styling to help separate elements with different content

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-card`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import Card from 'terra-card';
```

## Expected Use

The expected use for a card would be to keep elements separated from each other with different content, for example one card could contain a graph while another could have text. Another use would be to help make some elements stand out on the screen with the use of the base styling.


## Component Features

 * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
 * [Responsive Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#responsive-support)
 * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)

## Examples
<CardDefault title="Card basic example" />
<CardRaised title="Card basic raised example" />
<CardPadding title="Card plus Card Body with default padding" />
<CardPaddingVertical title="Card plus Card Body with only vertical padding" />
<CardPaddingHorizontal title="Card plus Card Body with only horizontal padding" />
<CardPaddingHR title="Card plus padded and non-padded children" />
<CardContentCentered title="Centered content inside card" />
<CardVisuallyHiddenText title="Card with Visually Hidden Text" />

## Card Props
<CardPropsTable />

## Card Body Props
<CardBodyPropsTable />