Counter - Component

Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
  <span class="counter__count">{{ data.count }}</span>
  {% include data.icon %}
</div>

Output

<div class="counter">
  <span class="counter__count">69</span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="currentColor"
  >
    <path
      d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
    />
    <path
      d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
    />
  </svg>
</div>

Information

A simple icon and count pair that by default, will match action items, such as the button. Utility classes can be applied to present custom coloring though, seen on the "Using Highlight Colors" variant.

Use the "Flush" variant to remove background and padding.

Key links

Sass File

Variants

Flush

View full screen

Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
  <span class="counter__count">{{ data.count }}</span>
  {% include data.icon %}
</div>

Output

<div class="counter" data-layout="flush">
  <span class="counter__count">69</span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="currentColor"
  >
    <path
      d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
    />
    <path
      d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
    />
  </svg>
</div>

Using Highlight Colors

View full screen

Code

Source (Nunjucks)

<div class="counter {{ data.utilities }}" {% if data.layout %}data-layout="{{ data.layout }}"{% endif %}>
  <span class="counter__count">{{ data.count }}</span>
  {% include data.icon %}
</div>

Output

<div class="counter t-bg-highlights-magenta t-color-shades-light-bright">
  <span class="counter__count">69</span>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="currentColor"
  >
    <path
      d="M12.51 3.47a1.29 1.29 0 0 0-1 0L3 7a1.33 1.33 0 0 0 0 2.44L11.49 13a1.38 1.38 0 0 0 1 0L21 9.44A1.33 1.33 0 0 0 21 7Z"
    />
    <path
      d="M4.71 14.07a1.33 1.33 0 0 1 1.82-1.24l5 2a1.35 1.35 0 0 0 1 0l5-2a1.33 1.33 0 0 1 1.82 1.24v3.1a1.32 1.32 0 0 1-.88 1.25l-6 2.13a1.24 1.24 0 0 1-.89 0l-6-2.13a1.32 1.32 0 0 1-.88-1.25Z"
    />
  </svg>
</div>