8547acfae3
Previous styles for figures only applied to <div class="figure">, but many markdown extensions generate <figure> elements.
38 lines
972 B
Markdown
38 lines
972 B
Markdown
# Figures and captions
|
|
|
|
Reflex has support for figures and captions in two formats:
|
|
|
|
`figure` and `figcaption` HTML elements:
|
|
|
|
``` html
|
|
<figure>
|
|
<img src="img.jpg" />
|
|
<figcaption>Caption</figcaption>
|
|
</figure>
|
|
```
|
|
|
|
A `div` with `figure` class and `p` with `caption` class:
|
|
``` html
|
|
<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](https://github.com/evidlo/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*:
|
|
|
|
``` markdown
|
|
{: .align-center .border}
|
|
```
|