cloud.gov pattern library

Status Pill

Status Pill

The status pill component is a way to communicate status of various application functions.

Use

To use the status pill component, use the @extend .status-pill within the SCSS.

.stat-error,
.stat-warning {
  &::before {
    @extend .status-pill;
  }
}

.stat-error {
  &::before {
    border-color: $color-error;
  }
}

.stat-warning {
  &::before {
    border-color: $color-warning;
  }
}
 
<!-- Default -->
<div class="stat stat-success">
    <h2 class="stat-header">Instance memory used</h2>
    <span class="stat-primary">10 MB</span>
    <span class="stat-info"><span>460 KB available</span></span>
</div>


<!-- Warning -->
<div class="stat stat-warning">
    <h2 class="stat-header">Instance memory used</h2>
    <span class="stat-primary">10 MB</span>
    <span class="stat-info"><span>460 KB available</span></span>
</div>


<!-- Error -->
<div class="stat stat-error">
    <h2 class="stat-header">Instance memory used</h2>
    <span class="stat-primary">10 MB</span>
    <span class="stat-info"><span>460 KB available</span></span>
</div>


<div class="stat stat-{{ modifier }}">
  <h2 class="stat-header">Instance memory used</h2>
  <span class="stat-primary">10 MB</span>
  <span class="stat-info"><span>460 KB available</span></span>
</div>
 
/* Default */
{
  "text": "success",
  "modifier": "success"
}


/* Warning */
{
  "text": "warning",
  "modifier": "warning"
}


/* Error */
{
  "text": "error",
  "modifier": "error"
}