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

#### Card > Headed > Collapsed

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { InstancesIconLight } = require('../icons');

<Card collapsed headed>
  <CardHeader>
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<InstancesIconLight />}
          iconPosition="left"
          label="4 of 4 instances"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions />
  </CardHeader>
</Card>
```

#### Card > Headed

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card headed>
  <CardHeader>
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<InstancesIconLight />}
          iconPosition="left"
          label="4 of 4 instances"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions />
  </CardHeader>
  <CardView>
    <CardDescription>
      <CardInfo
          icon={<HealthyIcon healthy="HEALTHY"/>}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Single state

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card headed>
  <CardHeader>
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<InstancesIconLight />}
          iconPosition="left"
          label="4 of 4 instances"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions />
  </CardHeader>
  <CardView>
    <CardDescription>
        1 instance paused <br/>
        1 instances stopped <br/>
        1 instance not responding <br/>
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Metrics

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card headed>
  <CardHeader>
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<InstancesIconLight />}
          iconPosition="left"
          label="4 of 4 instances"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions />
  </CardHeader>
  <CardView>
    <CardDescription>
        <span>Scaling from 1 to 4: finished</span>
        <CardInfo
          icon={<HealthyIcon />}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
    </CardDescription>
    <CardDescription>
    <Row>
     <GraphContainer xs={4}>
     <GraphTitle>Memory usage</GraphTitle>
     <MetricGraph
        metricsData={metrics}
        graphDurationSeconds={90}
      />
      </GraphContainer>
     <GraphContainer xs={4}>
     <GraphTitle>CPU usage</GraphTitle>
     <MetricGraph
        metricsData={metrics}
        graphDurationSeconds={90}
      />
      </GraphContainer>
     <GraphContainer xs={4}>
     <GraphTitle>CPU wait time</GraphTitle>
     <MetricGraph
        metricsData={metrics}
        graphDurationSeconds={90}
      />
      </GraphContainer>
    </Row>
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Provisioning

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card collapsed headed disabled>
  <CardHeader disabled>
    <CardMeta>
      <CardTitle disabled>
        <span>Nginx</span>
        <StatusLoader inline row msg="Provisioning"/>
      </CardTitle>
    </CardMeta>
    <CardOptions disabled/>
  </CardHeader>
</Card>
```

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const StatusLoader = require('../status-loader').default;
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card headed>
  <CardHeader>
    <CardMeta>
      <CardTitle>Nginx</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<InstancesIconLight />}
          iconPosition="left"
          label="4 of 4 instances"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions />
  </CardHeader>
  <CardView>
    <CardDescription>
        <StatusLoader row msg="Provisioning 3 instances"/>
        <br/>
        <br/>
        <br/>
        <CardInfo
          icon={<HealthyIcon />}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Disabled

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { InstancesIcon, HealthyIcon } = require('../icons');
const StatusLoader = require('../status-loader').default;

<Card headed disabled>
  <CardHeader disabled>
    <CardMeta>
      <CardTitle disabled>Nginx</CardTitle>
      <CardDescription disabled>
        <CardInfo
          icon={<InstancesIcon />}
          iconPosition="left"
          label="4 of 4 instances"
          color="dark"
        />
     </CardDescription>
    </CardMeta>
    <CardOptions disabled/>
  </CardHeader>
  <CardView>
    <CardDescription>
      <StatusLoader row msg="Provisioning 3 instances"/>
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Instance

```jsx
const {
  CardDescription,
  CardOutlet,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const metrics = require('./metrics.json');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card>
  <CardView>
    <CardDescription>
        <b>percona_primary</b>
        <CardInfo
          icon={<HealthyIcon />}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Instance > Stacked

```jsx
const {
  CardDescription,
  CardOutlet,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<Card stacked>
  <CardView>
    <CardDescription>
        <b>percona_primary</b>
        <span>4 instances</span>
        <CardInfo
          icon={<HealthyIcon />}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
    </CardDescription>
  </CardView>
</Card>
```

#### Card > Instance > Group

```jsx
const {
  CardDescription,
  CardOutlet,
  CardTitle,
  CardView,
  CardInfo
} = require('./');
const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics');
const { Row } = require('react-styled-flexboxgrid');
const { InstancesIconLight, HealthyIcon } = require('../icons');

<div>
  <Card>
    <CardView>
      <CardDescription>
          <b>percona_primary</b>
          <CardInfo
            icon={<HealthyIcon />}
            iconPosition="left"
            label="Healthy"
            color="dark"
          />
      </CardDescription>
    </CardView>
  </Card>
  <Card>
    <CardView>
      <CardDescription>
          <b>percona_primary</b>
          <CardInfo
            icon={<HealthyIcon />}
            iconPosition="left"
            label="Healthy"
            color="dark"
          />
      </CardDescription>
    </CardView>
  </Card>
  <Card stacked>
    <CardView>
      <CardDescription>
          <b>percona_primary</b>
          <span>4 instances</span>
          <CardInfo
            icon={<HealthyIcon />}
            iconPosition="left"
            label="Healthy"
            color="dark"
          />
      </CardDescription>
    </CardView>
  </Card>
</div>
```

#### Card > Instance > List

```jsx
const {
  Card,
  CardInfo,
  CardView,
  CardTitle,
  CardDescription,
  CardOptions
} = require('./');
const { HealthyIcon, DataCenterIcon } = require('../icons');

<Card collapsed>
  <CardView>
      <CardTitle>WordPress_01</CardTitle>
      <CardDescription>
        <CardInfo
          icon={<HealthyIcon healthy="HEALTHY"/>}
          iconPosition="left"
          label="Healthy"
          color="dark"
        />
      </CardDescription>
      <CardDescription>
      <CardInfo
          icon={<DataCenterIcon />}
          iconPosition="left"
          label="eu-ams-1"
          color="dark"
        />
     </CardDescription>
      <CardOptions />
  </CardView>
</Card>
```

#### Card > Secondary

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardGroupView,
  CardFooter
} = require('./');

<Card transparent>
  <CardView>
    <CardMeta>
      <CardTitle>$0.016 per hour</CardTitle>
      <CardSubTitle>0.256 GB RAM</CardSubTitle>
      <CardSubTitle>0.25 vCPUs</CardSubTitle>
      <CardSubTitle>0.01 TB disk</CardSubTitle>
      <CardSubTitle>SSD</CardSubTitle>

      <CardFooter>Compute Optimise</CardFooter>
    </CardMeta>
  </CardView>
</Card>
```

#### Card > Secondary > Active

```jsx
const {
  CardDescription,
  CardHeader,
  CardMeta,
  CardOptions,
  CardOutlet,
  CardSubTitle,
  CardTitle,
  CardView,
  CardGroupView,
  CardFooter
} = require('./');

<Card transparent selected>
  <CardView>
    <CardMeta>
      <CardTitle selected>$0.016 per hour</CardTitle>
      <CardSubTitle selected>0.256 GB RAM</CardSubTitle>
      <CardSubTitle selected>0.25 vCPUs</CardSubTitle>
      <CardSubTitle selected>0.01 TB disk</CardSubTitle>
      <CardSubTitle selected>SSD</CardSubTitle>

      <CardFooter selected>Compute Optimise</CardFooter>
    </CardMeta>
  </CardView>
</Card>
```