Figures

Figure containing a graphic (no specific class)
Horses
<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 This is a fine little tip.
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>