Chart

Bar stacked

<div class="chart"> <div class="chart--bar-stacked"> <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"></div> <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%"> </div> <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%"></div> </div> </div> </div>

Bar

80
20
<div class="chart"> <div class="chart--bar"> <div class="chart--bar-remaining"> <span class="chart--bar-text">80</span> </div> <div class="chart--bar-value"> <span class="chart--bar-text">20</span> </div> </div> </div>

Matrix

<div class="chart"> <div class="chart--matrix"> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> <div class="chart--matrix-dot skipped"></div> </div> </div>