joyent-portal/packages/ui-toolkit/src/card/demo.md

```jsx
const React = require('react');
const { default: Card } = require('.');

<Card />;
```

#### Card > Shadow

```jsx
const React = require('react');
const { default: Card } = require('.');

<Card shadow />;
```

#### Card > Headed > Collapsed

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

const { Instances, Actions } = require('../icons');

<Card shadow collapsed>
  <Header>
    <HeaderMeta>
      <Row between="xs" middle="xs">
        <Col xs={4} sm={8} md={9}>
          <H4>Nginx</H4>
        </Col>
        <Col xs={8} sm={4} md={3}>
          <P>
            <Instances marginRight="0.5" light /> 4 of 4 instances
          </P>
        </Col>
      </Row>
    </HeaderMeta>
    <HeaderBox border="left" actionable>
      <Actions light />
    </HeaderBox>
  </Header>
</Card>;
```

#### Card > Headed

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

const { Instances, Health, Actions } = require('../icons');

<Card shadow>
  <Header>
    <HeaderMeta>
      <Row between="xs" middle="xs">
        <Col xs={4} sm={8} md={9}>
          <H4>Nginx</H4>
        </Col>
        <Col xs={8} sm={4} md={3}>
          <P>
            <Instances marginRight="0.5" light /> 4 of 4 instances
          </P>
        </Col>
      </Row>
    </HeaderMeta>
    <HeaderBox border="left" actionable>
      <Actions light />
    </HeaderBox>
  </Header>
  <Outlet>
    <div
      style={{
        display: 'flex',
        flex: '1 0 auto',
        flexDirection: 'row',
        alignSelf: 'stretch',
        justifyContent: 'flex-end',
        alignContent: 'stretch',
        alignItems: 'stretch'
      }}
    >
      <P style={{ flex: '1 0 auto', alignSelf: 'flex-end' }}>
        <Health width="18" healthy /> Healthy
      </P>
    </div>
  </Outlet>
</Card>;
```

#### Card > Single State

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

const { Instances, Actions } = require('../icons');

<Card shadow>
  <Header>
    <HeaderMeta>
      <Row between="xs" middle="xs">
        <Col xs={4} sm={8} md={9}>
          <H4>Nginx</H4>
        </Col>
        <Col xs={8} sm={4} md={3}>
          <P>
            <Instances marginRight="0.5" light /> 4 of 4 instances
          </P>
        </Col>
      </Row>
    </HeaderMeta>
    <HeaderBox border="left" actionable>
      <Actions light />
    </HeaderBox>
  </Header>
  <Outlet>
    <Small style={{ paddingBottom: '0' }}>1 instance paused</Small>
    <Small style={{ paddingBottom: '0' }}>1 instances stopped</Small>
    <Small style={{ paddingBottom: '0' }}>1 instance not responding</Small>
  </Outlet>
</Card>;
```

#### Card > Provisioning

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');
const { H4, P } = require('../text');
const { default: StatusLoader } = require('../status-loader');

const { Actions, Instances, Health } = require('../icons');

[
  <Row>
    <Col xs={12}>
      <Card collapsed disabled>
        <Header>
          <HeaderMeta>
            <Row middle="xs">
              <Col xs={2} sm={1} md={1}>
                <H4>Nginx</H4>
              </Col>
              <Col xs={8} sm={4} md={2}>
                <StatusLoader marginLeft="0" inline row msg="Provisioning" />
              </Col>
            </Row>
          </HeaderMeta>
          <HeaderBox border="left" actionable>
            <Actions />
          </HeaderBox>
        </Header>
      </Card>
    </Col>
  </Row>,
  <br />,
  <Row>
    <Col xs={12}>
      <Card shadow>
        <Header>
          <HeaderMeta>
            <Row between="xs" middle="xs">
              <Col xs={4} sm={8} md={9}>
                <H4>Nginx</H4>
              </Col>
              <Col xs={8} sm={4} md={3}>
                <P>
                  <Instances marginRight="0.5" light /> 4 of 4 instances
                </P>
              </Col>
            </Row>
          </HeaderMeta>
          <HeaderBox border="left" actionable>
            <Actions light />
          </HeaderBox>
        </Header>
        <Outlet>
          <div
            style={{
              display: 'flex',
              flex: '1 0 auto',
              flexDirection: 'column',
              alignSelf: 'stretch',
              justifyContent: 'space-between',
              alignContent: 'stretch',
              alignItems: 'stretch'
            }}
          >
            <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
              <StatusLoader
                marginLeft="0"
                inline
                row
                msg="Provisioning 3 instances"
              />
            </div>
            <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
              <Health width="18" healthy /> Healthy
            </P>
          </div>
        </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');
const { H4, P } = require('../text');
const { Actions } = require('../icons');

<Card disabled shadow>
  <Header>
    <HeaderMeta>
      <Row between="xs" middle="xs">
        <Col xs={2} sm={9} md={10}>
          <H4>Nginx</H4>
        </Col>
        <Col xs={5} sm={2} md={2}>
          <P>1 Instance</P>
        </Col>
      </Row>
    </HeaderMeta>
    <HeaderBox border="left" actionable>
      <Actions />
    </HeaderBox>
  </Header>
  <Outlet />
</Card>;
```

#### Card > Instance

```jsx
const React = require('react');
const { default: Card, Outlet } = require('.');
const { H4, P } = require('../text');
const { Health } = require('../icons');

<Card>
  <Outlet>
    <div
      style={{
        display: 'flex',
        flex: '1 0 auto',
        flexDirection: 'column',
        alignSelf: 'stretch',
        justifyContent: 'space-between',
        alignContent: 'stretch',
        alignItems: 'stretch'
      }}
    >
      <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
        <H4>percona_primary</H4>
      </div>
      <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
        <Health width="18" healthy /> Healthy
      </P>
    </div>
  </Outlet>
</Card>;
```

#### Card > Instance > Stacked

```jsx
const React = require('react');
const { default: Card, Outlet } = require('.');
const { H4, P } = require('../text');
const { Health } = require('../icons');

<Card stacked shadow>
  <Outlet>
    <div
      style={{
        display: 'flex',
        flex: '1 0 auto',
        flexDirection: 'column',
        alignSelf: 'stretch',
        justifyContent: 'space-between',
        alignContent: 'stretch',
        alignItems: 'stretch'
      }}
    >
      <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
        <H4>percona_primary</H4>
      </div>
      <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
        <Health width="18" healthy /> Healthy
      </P>
    </div>
  </Outlet>
</Card>;
```

#### Card > Instance > Group

```jsx
const React = require('react');
const { default: Card, Outlet } = require('.');
const { H4, P } = require('../text');
const { Health } = require('../icons');

[
  <Card marginBottom="6px">
    <Outlet>
      <div
        style={{
          display: 'flex',
          flex: '1 0 auto',
          flexDirection: 'column',
          alignSelf: 'stretch',
          justifyContent: 'space-between',
          alignContent: 'stretch',
          alignItems: 'stretch'
        }}
      >
        <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
          <H4>percona_secondary</H4>
        </div>
        <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
          <Health width="18" healthy /> Healthy
        </P>
      </div>
    </Outlet>
  </Card>,
  <Card marginBottom="6px">
    <Outlet>
      <div
        style={{
          display: 'flex',
          flex: '1 0 auto',
          flexDirection: 'column',
          alignSelf: 'stretch',
          justifyContent: 'space-between',
          alignContent: 'stretch',
          alignItems: 'stretch'
        }}
      >
        <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
          <H4>percona_secondary</H4>
        </div>
        <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
          <Health width="18" healthy /> Healthy
        </P>
      </div>
    </Outlet>
  </Card>,
  <Card shadow stacked>
    <Outlet>
      <div
        style={{
          display: 'flex',
          flex: '1 0 auto',
          flexDirection: 'column',
          alignSelf: 'stretch',
          justifyContent: 'space-between',
          alignContent: 'stretch',
          alignItems: 'stretch'
        }}
      >
        <div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
          <H4>percona_secondary</H4>
        </div>
        <P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
          <Health width="18" healthy /> Healthy
        </P>
      </div>
    </Outlet>
  </Card>
];
```

#### Card > Instance > List

```jsx
const React = require('react');
const { default: Card, Header, HeaderBox, HeaderMeta } = require('.');
const { Row, Col } = require('react-styled-flexboxgrid');
const { H4, P } = require('../text');
const { Health, Actions, DataCenter } = require('../icons');

[
  <Card collapsed>
    <Header transparent>
      <HeaderMeta>
        <Row between="xs" middle="xs">
          <Col xs={2} sm={9} md={8}>
            <H4>Nginx</H4>
          </Col>
          <Col xs={5} sm={2} md={2}>
            <P>
              <Health healthy /> Healthy
            </P>
          </Col>
          <Col xs={5} sm={2} md={2}>
            <P>
              <DataCenter /> eu-ams-1
            </P>
          </Col>
        </Row>
      </HeaderMeta>
      <HeaderBox border="left" actionable>
        <Actions />
      </HeaderBox>
    </Header>
  </Card>
];
```