Typography

Counter

Utilities for sets automatically counter to an element can be grouped separately with a counter reset option.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
counter `{options}`	counter-increment: lists;
counter-reset	counter-reset: lists, mini-step;

class	css
upper-alpha	content: counter(lists, upper-alpha);
lower-alpha	content: counter(lists, lower-alpha);
upper-roman	content: counter(lists, upper-roman);
lower-roman	content: counter(lists, lower-roman);
number	content: counter(lists, number);

Usage

...

<div class="counter-reset">
  <div class="counter upper-roman">
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </div>
</div>

HTML

.dummy-parent {
  @extend
    .counter-reset;
}
.dummy-child {
  @extend
    .counter,
    .upper-roman;
}

SCSS