import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

import { Card } from '../../src';

<Meta title="Components/Card" />

# Card

Use card to wrap your content in a nice container


## Props

<Props of={Card} />

### Variant

Different variants exists for different situations.
This component have three main variants.

#### ↳ _`text (default)`_

Used by default, this variant should be used for less-pronounced actions.
Usage example:

-   Dialog Actions.
-   Card Actions (including PopperCard).

<Preview withSource="none">
    <Story name="regular">
        <Card >Regular Card</Card>
    </Story>
    <Story name="elevation 0">
        <Card elevation={0}>Regular Card</Card>
    </Story>
    <Story name="elevation 1">
        <Card elevation={1}>Regular Card</Card>
    </Story>
    <Story name="drawer">
        <Card elevation='drawer'>Regular Card</Card>
    </Story>
</Preview>

#### ↳ _`flat`_

This variant can be used
Use it when its background is not plain or if displayed on shadowed surfaces.

<Preview withSource="none">
    <Story name="flat">
        <Card variant="flat">Flat Card</Card>
    </Story>
</Preview>