<div class="card-single" style="min-width:180px;">
<div class="title01" style="font-size:14px;font-weight:700;color:var(--title);margin-bottom:4px;">Total Views</div>
<p style="font-size:1.75rem;font-weight:700;color:var(--primary-color);margin:0 0 8px;">12,450</p>
<small style="color:var(--paragraph);font-size:0.75rem;">Last 28 days</small>
</div>
<div class="card-single" style="min-width:180px;">
<div class="title01" style="font-size:14px;font-weight:700;color:var(--title);margin-bottom:4px;">{{label}}</div>
<p style="font-size:1.75rem;font-weight:700;color:var(--primary-color);margin:0 0 8px;">{{value}}</p>
{{#if progress}}
<div class="progress" style="height:8px;">
<div class="progress-bar" style="width:{{progress}}%;" role="progressbar"></div>
</div>
<small style="color:var(--paragraph);font-size:0.75rem;margin-top:4px;display:block;">{{progress}}% of limit used</small>
{{/if}}
{{#if meta}}<small style="color:var(--paragraph);font-size:0.75rem;">{{meta}}</small>{{/if}}
</div>
{
"label": "Total Views",
"value": "12,450",
"progress": null,
"meta": "Last 28 days"
}
Uses .card-single (light purple background). Displays a single metric with optional progress bar for usage limits. Value uses --primary-color.
Appears in: Dashboard (subscribers, total views, watch time), individual tool pages (monthly usage vs. limit — e.g. “13 / 50 scripts used”), Channel Audit summary.