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