Status
Status
Insert a colored dot before a short block of text.
Example
Status indicators in different colors.
.pv-status
.pv-status-black
.pv-status-green
.pv-status-yellow
.pv-status-red
.pv-status-purple
.pv-status-orange
HTML
<p><span class="pv-status">.pv-status</span></p>
<p><span class="pv-status-black">.pv-status-black</span></p>
<p><span class="pv-status-green">.pv-status-green</span></p>
<p><span class="pv-status-yellow">.pv-status-yellow</span></p>
<p><span class="pv-status-red">.pv-status-red</span></p>
<p><span class="pv-status-purple">.pv-status-purple</span></p>
<p><span class="pv-status-orange">.pv-status-orange</span></p>Status on Table Columns
Applying a .pv-status class to a table cell will add the same colored border to the top of the cell.
Example
A table with status indicators.
| Contract |
Humaetna Medical Group All Commercial Effective 2025-12-31
Priority 1
VBC
|
Insura_B01-01-200G_really_long_name Effective 2023-01-01 Southeast | |
|---|---|---|---|
| Payer | Humaetna of Metropolis | Humaetna of Gotham | |
| Plans | HMO, PPO, POS | HDHP | PPO |
| Provider | Cherry Creek Hospital | Cherry Creek Hospital | Central Hospital of Chicago |
| Additional Information Request | 30 Days | ||
| Appeals Timeline | 180 Days | ||
HTML
<table class="pv-table-matrix-compressed">
<colgroup>
...
</colgroup>
<thead>
<tr>
<th class="pv-valign-top">Contract</th>
<td colspan="2" class="pv-text-center pv-status-green">
...
</td>
<td class="pv-text-center pv-status-red">
...
</td>
</tr>
...
</table>