The status pill component is a way to communicate status of various application functions.
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"
}