### Figures

Figure containing a graphic (no specific class)

    <figure>
      <figcaption>Figure containing a graphic
      (no specific class)</figcaption>
      <div><img alt="Horses" src="farm-animals-horses.jpg" /></div>
    </figure>

Figure containing an example

    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

    <figure class="role-example">
      <figcaption>Figure containing an example</figcaption>
      <pre>&lt;script&gt;
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    &lt;/script&gt;</pre>
    </figure>

Figure containing an equation
E = m ⁢ c 2

    <figure class="role-equation">
      <figcaption>Figure containing an equation</figcaption>
      <div>
        <math display="block"
              xmlns="http://www.w3.org/1998/Math/MathML">
          <mrow>
            <mi>E</mi>
            <mo>=</mo>
            <mrow>
              <mi>m</mi>
              <mo>⁢</mo>
              <msup>
                <mi>c</mi>
                <mn>2</mn>
              </msup>
            </mrow>
          </mrow>
        </math>
      </div>
    </figure>

### Code listings

    /* Hello World */

    #include <stdio.h>

    int main(void)
    {
        printf("Hello World\n");
        return 0;
    }

    <pre class="role-listing-c-1">/* Hello World */

    #include &lt;stdio.h&gt;

    int main(void)
    {
        printf("Hello World\n");
        return 0;
    }</pre>

### Admonitions

> Paragraph inside a note.

> Other paragraph inside a note.

    <blockquote class="role-note">
     <p>Paragraph inside a note.</p>
     <p>Other paragraph inside a note.</p>
    </blockquote>

Admonition classes
Class name | Description
--- | ---
`role-note` | This is just a note.
`role-attention` | Please pay extra attention to this note.
`role-caution` | Care is required when proceeding.
`role-danger` | Important! Be aware of this before doing anything else.
`role-fastpath` | This note will speed you on your way.
`role-important` | This note is important.
`role-notice` | Indicates a potential situation which, if not avoided, might result in an undesirable result or state.
`role-remember` | Don't forget to do what this note says.
`role-restriction` | You can't do what this note says.
`role-tip` | Useful piece of information or advice.
`role-trouble` | Provides information about how to remedy a trouble situation.
`role-warning` | Indicates a potentially hazardous situation.

### Footnotes

Short footnoteContent of short footnote..

    <span class="role-footnote">Content of short footnote.</span>

Normal footnote. Same normal footnote.

    <a class="role-footnote-ref" href="#fn1"></a>

    <div class="role-footnote" id="fn1">Content of
      normal footnote.
      <p>Paragraph inside footnote.</p>
    </div>

Content of normal footnote.

Paragraph inside footnote.

### Index terms

Simplest index termCat. Other index termCatSiamese. Yet another index termCatBurmese.

    <a class="role-index-term">Cat</a>

    <a class="role-index-term">Cat
      <span class="role-term">Siamese</span>
    </a>

    <a class="role-index-term">Cat
      <span class="role-term">Burmese</span>
    </a>