Typography

Counter

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

Variant

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

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