Step-by-step instruction
Step-by-step instructions
Step 1
{: .label .label-step}
Do this thing
{: .step}
Step 2
{: .label .label-step}
Do this other thing
{: .step}
Step 1
Do this thing
Step 2
Do this other thing
Circled numbers
This syntax…
*1*{: .circle .circle-blue} Number in normal text
…will look like this:
1 Number in normal text
You can also use this in headers, lists and other markdown suported elements, e.g.,
* *1*{: .circle .circle-blue} `.circle-blue`
* *2*{: .circle .circle-red} `.circle-red`
* *3*{: .circle .circle-yellow} `.circle-yellow`
* *4*{: .circle .circle-green} `.circle-green`
* *5*{: .circle .circle-purple} `.circle-purple`
## *2*{: .circle .circle-red} Number in h2
### *10*{: .circle .circle-yellow} Number in h3
…will look like this:
- 1
.circle-blue - 2
.circle-red - 3
.circle-yellow - 4
.circle-green - 5
.circle-purple