#### Card > Headed > Collapsed ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { InstancesIconLight } = require('../icons'); Nginx 4 of 4 instances ; ``` #### Card > Headed ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { InstancesIconLight, HealthyIcon } = require('../icons'); Nginx 4 of 4 instances } iconPosition="left" label="Healthy" color="dark" /> ; ``` #### Card > Single state ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { InstancesIconLight, HealthyIcon } = require('../icons'); Nginx 4 of 4 instances 1 instance paused
1 instances stopped
1 instance not responding
; ``` #### Card > Metrics ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { Row } = require('react-styled-flexboxgrid'); const metrics = require('./metrics.json'); const { InstancesIconLight, HealthyIcon } = require('../icons'); Nginx 4 of 4 instances Scaling from 1 to 4: finished Healthy Memory usage CPU usage CPU wait time ; ``` #### Card > Provisioning ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const StatusLoader = require('../status-loader').default; const { InstancesIconLight, HealthyIcon } = require('../icons'); Nginx ; ``` ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const StatusLoader = require('../status-loader').default; const { InstancesIconLight, HealthyIcon } = require('../icons'); Nginx 4 of 4 instances


Healthy
; ``` #### Card > Disabled ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { InstancesIcon, HealthyIcon } = require('../icons'); const StatusLoader = require('../status-loader').default; Nginx 4 of 4 instances ; ``` #### Card > Instance ```jsx const { CardDescription, CardOutlet, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { Row } = require('react-styled-flexboxgrid'); const metrics = require('./metrics.json'); const { InstancesIconLight, HealthyIcon } = require('../icons'); percona_primary Healthy ; ``` #### Card > Instance > Stacked ```jsx const { CardDescription, CardOutlet, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { Row } = require('react-styled-flexboxgrid'); const { InstancesIconLight, HealthyIcon } = require('../icons'); percona_primary 4 instances Healthy ; ``` #### Card > Instance > Group ```jsx const { CardDescription, CardOutlet, CardTitle, CardView, CardInfo, CardInfoLabel, CardInfoIconContainer } = require('./'); const { MetricGraph, GraphContainer, GraphTitle } = require('../metrics'); const { Row } = require('react-styled-flexboxgrid'); const { InstancesIconLight, HealthyIcon } = require('../icons');
percona_primary Healthy percona_primary Healthy percona_primary 4 instances Healthy
; ``` #### Card > Instance > List ```jsx const { Card, CardInfo, CardInfoLabel, CardInfoIconContainer, CardView, CardTitle, CardDescription, CardOptions } = require('./'); const { HealthyIcon, DataCenterIcon } = require('../icons'); WordPress_01 Healthy Healthy ; ``` #### Card > Secondary ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardGroupView, CardFooter } = require('./'); $0.016 per hour 0.256 GB RAM 0.25 vCPUs 0.01 TB disk SSD Compute Optimise ; ``` #### Card > Secondary > Active ```jsx const { CardDescription, CardHeader, CardMeta, CardOptions, CardOutlet, CardSubTitle, CardTitle, CardView, CardGroupView, CardFooter } = require('./'); $0.016 per hour 0.256 GB RAM 0.25 vCPUs 0.01 TB disk SSD Compute Optimise ; ```