Scores

If you are using individual js components, scores.js is required.

These are animated gauges on page load for scoring. You gonna find gauges in three different colors that each represent three different states. Gauges also come in two different sizes, regular and large.

To try each score color variation click on the options below:

Default 
<div class="sui-circle-score sui-grade-f" data-score="15"></div>
Large 
<div class="sui-circle-score sui-circle-score-lg sui-grade-f" data-score="15"></div>
Default 
<div class="sui-circle-score sui-grade-c" data-score="55"></div>
Large 
<div class="sui-circle-score sui-circle-score-lg sui-grade-c" data-score="55"></div>
Default 
<div class="sui-circle-score sui-grade-a" data-score="95"></div>
Large 
<div class="sui-circle-score sui-circle-score-lg sui-grade-a" data-score="95"></div>