<figure> <figcaption>Figure containing a graphic (no specific class)</figcaption> <div><img alt="Horses" src="farm-animals-horses.jpg" /></div> </figure>
<figure class="role-example"> <figcaption>Figure containing an example</figcaption> <pre><script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script></pre> </figure>
<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>
/* Hello World */ #include <stdio.h> int main(void) { printf("Hello World\n"); return 0; }
<pre class="role-listing-c-1">/* Hello World */ #include <stdio.h> int main(void) { printf("Hello World\n"); return 0; }</pre>
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>
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. |
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>
Paragraph inside footnote.
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>