Counters
Counters
Use a counter to denote a step in a series.
Example
A counter.
2
Set Up Your Payment Info
Make sure your bank details are up to date for smooth payments. You can check and update this information in the Billing section.
HTML
<div class="pv-bordered pv-surface pv-inset-square-24 pv-flex" style="--flex-gap: 1rem">
<div class="pv-counter">2</div>
<div>
<p class="pv-text-title-lg pv-stack-4">Set Up Your Payment Info</p>
<p>Make sure your bank details are up to date for smooth payments. You can check and update this information in the Billing section.</p>
</div>
</div>Badges
Use a badge to show a number of items. Add .pv-badge-sm for a smaller version.
Example
Four types of badges and their small variants.
.pv-badge-primary
5
5
.pv-badge-secondary
5
5
.pv-badge-tertiary
5
5
.pv-badge-ghost
5
5