npm package: @placardi/card
Description: Placardi UI card component
Author: Alexander Zakharov
Latest version: 0.1.4

# @placardi/card

A cards can be used to present content about a single subject and expose its actions.

## Installation

```bash
npm i @placardi/card
```

## Dependencies

- react
- styled-components
- @placardi/theme

## Usage

### Basic usage

In order to use the card component, wrap the application in global theme provider from `@placardi/theme`. Then, use the card as any regular component.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
    </Card>
  </ThemeProvider>
)

export default App;
```

### Card with header and content

`Card` accepts `CardContent` component, that accepts arbitrary children, making card very customisable.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
    </Card>
  </ThemeProvider>
)

export default App;
```

### Card with header, body and link action

`Card` accepts `CardLinkAction` component, that accepts arbitrary children. It acts as a link and therefore needs a `to` prof that will render as link URL. `CardLinkAction` is polymorphic and can thus be render as any other component when provided with `as` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent,
  CardLinkAction
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
     <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
      <CardLinkAction to='https://placardi.com'>
        Visit us
      </CardLinkAction>
    </Card>
  </ThemeProvider>
)

export default App;
```

### Card with header, body and actions

`Card` accepts `CardActions` component, that accepts arbitrary children. Children inside `CardActions` can be aligned to the left, right or center when provided with `align` prop.

```tsx
import React, { FC } from 'react';
import ThemeProvider, { Colour } from '@placardi/theme';
import Button, { Variant } from '@placardi/button';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent,
  CardActions,
  Alignment
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
      <CardActions align={Alignment.LEFT}>
        <Button colour={Colour.RED}>
          Cancel
        </Button>
        <Button variant={Variant.CONTAINED} colour={Colour.BLUE}>
          Confirm
        </Button>
      </CardActions>
    </Card>
  </ThemeProvider>
)

export default App;
```