npm package: @lightspeed/cirrus-card
Description: Cirrus Card Component
Author: Lightspeed
Latest version: 6.0.0-beta.1

# Card

Cards shape our interfaces into easily readable screens.

## Installation

1.  Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project

```sh
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
```

2.  Install the component library

```sh
yarn add @lightspeed/cirrus-card
```

3.  Hook the `<ThemeProvider>` and the theme in your app.

```jsx
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
```

4.  Import `{ Card }` and use right away!

### React Component

#### `<Card>`

_Note:_ This components supports all [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)
properties from styled-system

| Prop        | Type    | Description                                     |
| ----------- | ------- | ----------------------------------------------- |
| `top`       | Boolean | Top card variant                                |
| `color`     | String  | Set the text color within the card              |
| `bg`        | String  | Set the background color within the card        |
| `large`     | boolean | Forcebly set all children to have large spacing |
| `noSpacing` | boolean | Forcebly set all children to have noSpacing     |

#### `<CardSection>`

_Note:_ This components supports all [space](https://github.com/jxnblk/styled-system/blob/master/docs/api.md#space)
properties from styled-system

| Prop        | Type            | Description                                          |
| ----------- | --------------- | ---------------------------------------------------- |
| `children`  | React.ReactNode | The content to display inside the section            |
| `color`     | String          | Set the text color within the card                   |
| `bg`        | String          | Set the background color within the card             |
| `large`     | boolean         | Make the corresponding component have larger spacing |
| `noSpacing` | boolean         | Make the corresponding component remove any spacing  |

#### `<CardHeader>`

_Extends `CardSection`_

| Prop       | Type            | Description                                 |
| ---------- | --------------- | ------------------------------------------- |
| `title`    | String          | Title for the card                          |
| `actions`  | React.ReactNode | The action content (such as action buttons) |
| `children` | React.ReactNode | The content to display inside the header    |

#### `<CardFooter>`

_Extends `CardSection`_

#### `<CardDivider>`

Use this component to add a small divider between various sections.

#### Example

```js
import React from 'react';
import { Card CardHeader, CardSection, CardFooter, CardDivider } from '@lightspeed/cirrus-card';

const MyComponent = () => (
  <Card>
    <CardHeader title="Card Title" />
    <CardSection>Card Content</CardSection>
    <CardDivider />
    <CardSection>Card Content</CardSection>
    <CardFooter>Card Footer</CardFooter>
  </Card>
);

export default MyComponent;
```