#### Card

```jsx
const React = require('react');
const { default: Card } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card>
        <code>{`<Card />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary>
        <code>{`<Card secondary />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary>
        <code>{`<Card tertiary />`}</code>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Collapsed

```jsx
const React = require('react');
const { default: Card } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card collapsed>
        <code>{`<Card collapsed />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed>
        <code>{`<Card secondary collapsed />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed>
        <code>{`<Card tertiary collapsed />`}</code>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Shadow

```jsx
const React = require('react');
const { default: Card } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <code>{`<Card shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <code>{`<Card collapsed shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <code>{`<Card secondary collapsed shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <code>{`<Card tertiary collapsed shadow />`}</code>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Actionable

```jsx
const React = require('react');
const { default: Card } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow actionable>
        <code>{`<Card shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow actionable>
        <code>{`<Card secondary shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow actionable>
        <code>{`<Card tertiary shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow actionable>
        <code>{`<Card collapsed shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow actionable>
        <code>{`<Card secondary collapsed shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow actionable>
        <code>{`<Card tertiary collapsed shadow actionable />`}</code>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Active

```jsx
const React = require('react');
const { default: Card } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow active>
        <code>{`<Card shadow active />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow active>
        <code>{`<Card secondary shadow active />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow active>
        <code>{`<Card tertiary shadow active />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow active>
        <code>{`<Card collapsed shadow active />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow active>
        <code>{`<Card secondary collapsed shadow active />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow active>
        <code>{`<Card tertiary collapsed shadow active />`}</code>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Header

```jsx
const React = require('react');
const { default: Card, Header } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
        <code>{`<Card shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header>
          <code>{`<Header />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Header > Shadow

```jsx
const React = require('react');
const { default: Card, Header } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
        <code>{`<Card shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header shadow>
          <code>{`<Header shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Header > Transparent

```jsx
const React = require('react');
const { default: Card, Header } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
        <code>{`<Card shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header transparent shadow>
          <code>{`<Header transparent shadow />`}</code>
        </Header>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Header > Box

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta />
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Header > Meta

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card secondary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <code>{`<Card tertiary shadow />`}</code>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Outlet

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card secondary shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card tertiary shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card secondary collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card tertiary collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Outlet > Card

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card shadow />`}</code>
          <code>{`<Outlet />`}</code>
          <Card shadow>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
          <Card shadow stacked>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card secondary shadow />`}</code>
          <code>{`<Outlet />`}</code>
          <Card shadow>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
          <Card shadow stacked>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card tertiary shadow />`}</code>
          <code>{`<Outlet />`}</code>
          <Card shadow>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
          <Card shadow stacked>
            <Header transparent>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
              <HeaderMeta>
                <code>{`<HeaderMeta />`}</code>
              </HeaderMeta>
              <HeaderBox>
                <code>HB</code>
              </HeaderBox>
            </Header>
            <Outlet>
              <code>{`<Card shadow />`}</code>
              <code>{`<Outlet />`}</code>
            </Outlet>
          </Card>
        </Outlet>
      </Card>
    </Col>
  </Row>
];
```

#### Card > Disabled

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');

[
  <Row>
    <Col xs={12}>
      <Card shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card secondary shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card tertiary shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card collapsed shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card secondary collapsed shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card secondary collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card tertiary collapsed shadow disabled>
        <Header shadow>
          <HeaderBox border="right">
            <code>HB</code>
          </HeaderBox>
          <HeaderBox>
            <code>HB</code>
          </HeaderBox>
          <HeaderMeta>
            <code>{`<HeaderMeta />`}</code>
          </HeaderMeta>
          <HeaderBox border="left">
            <code>HB</code>
          </HeaderBox>
        </Header>
        <Outlet>
          <code>{`<Card tertiary collapsed shadow />`}</code>
          <code>{`<Outlet />`}</code>
        </Outlet>
      </Card>
    </Col>
  </Row>
];
```