8547acfae3
Previous styles for figures only applied to <div class="figure">, but many markdown extensions generate <figure> elements.
972 B
972 B
Figures and captions
Reflex has support for figures and captions in two formats:
figure and figcaption HTML elements:
<figure>
<img src="img.jpg" />
<figcaption>Caption</figcaption>
</figure>
A div with figure class and p with caption class:
<div class="figure">
<img src="img.jpg">
<p class="caption">Caption</p>
</div>
Alignment
Add align-left, align-center or align-right class to align figures to left, center and right respectively.
Border
Add border class to add a border around the figure and caption.
Markdown
markdown-captions is recommended as it generates semantic figure and figcaption HTML elements, with support for tooltips and HTML classes.
An example of a center-aligned figure with caption, tooltip and border using markdown-captions:
{: .align-center .border}