---
name: Card
menu: Components
route: /components/card
---

import { Playground, Props } from 'docz'
import Card from './'
import { Heading, Text, Button } from "../../"

# Card

## Import
`import { Card } from '@blasterjs/core'`

## Basic Usage

<Playground>
  <Card>
    Hello World
  </Card>
</Playground>

## Card with content

<Playground>
  <Card>
    <Heading as="h4">Hello world</Heading>
    <Text as="p" mb="30px">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id magni repellendus illum quasi, officiis assumenda facere inventore accusamus maiores soluta, qui quibusdam et, dolorum tempora ab a unde porro eligendi!</Text>
    <Button appearance="prominent">Continue</Button>
    <Button appearance="minimal">Cancel</Button>
  </Card>
</Playground>

## Card styling

<Playground>
  <Card
    boxShadow={4}
    bg="primaryTint"
    borderColor="primaryShade"
  >
    <Heading as="h4">
      Congratulations!
    </Heading>
    <Text as="p" mb="30px">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id magni repellendus illum quasi, officiis assumenda facere inventore accusamus maiores soluta, qui quibusdam et, dolorum tempora ab a unde porro eligendi!
    </Text>
    <Button appearance="prominent">Continue</Button>
    <Button appearance="minimal">Cancel</Button>
  </Card>
</Playground>

### PropTypes
| Prop | Type | Required | Default | Description |
|:-----|:-----|:---------|:--------|:------------|
| `STYLED` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  space: {
    pt,
    pb,
    pl,
    pr
  },
  colors: {
    bg,
    borderColor
  },
  radii: {
    borderRadius
  },
  shadows: {
    boxShadow
  },
  borders: {
    border
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/card)
- [Learn more about themeing](/blaster-theme)