Single digits (matching color)

0 1 2 3 4 5 6 7 8 9

<span class="digit-circle">0</span>
<span class="digit-circle">1</span>
<span class="digit-circle">2</span>
<span class="digit-circle">3</span>
<span class="digit-circle">4</span>
<span class="digit-circle">5</span>
<span class="digit-circle">6</span>
<span class="digit-circle">7</span>
<span class="digit-circle">8</span>
<span class="digit-circle">9</span>

Contextual variations

0 1 2 3 4 5

<span class="digit-circle digit-circle-primary">0</span>
<span class="digit-circle digit-circle-secondary">1</span>
<span class="digit-circle digit-circle-success">2</span>
<span class="digit-circle digit-circle-info">3</span>
<span class="digit-circle digit-circle-warning">4</span>
<span class="digit-circle digit-circle-danger">5</span>

Sizing

0 Some title

1 Some title

2 Some title

3 Some title

4 Some title

5 Some phrase

<h1><span class="digit-circle">0</span> Some title</h1>
<h2><span class="digit-circle">1</span> Some title</h2>
<h3><span class="digit-circle">2</span> Some title</h3>
<h4><span class="digit-circle">3</span> Some title</h4>
<h5><span class="digit-circle">4</span> Some title</h5>
<p><span class="digit-circle">5</span> Some phrase</p>