Figures
=======

The theme has support for the `<figure>` element.  For example you can put an
image inside a figure like this:

```html
<figure>
  <img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
</figure>
```

To include a caption with your figure use the `<figcaption>` tag:

```html
<figure>
  <img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
  <figcaption>A photo of some grass</figcaption>
</figure>
```

That'll produce this output:

<figure>
  <img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
  <figcaption>A photo of some grass</figcaption>
</figure>

Code Figures
------------

Figures aren't just for images. You can put anything in a figure. For example
here's a code figure:

<figure>
<pre><code># Public: Fetch the logger instance for this Jekyll process.
#
# Returns the LogAdapter instance.
def logger
  @logger ||= LogAdapter.new(Stevenson.new, (ENV["JEKYLL_LOG_LEVEL"] || :info).to_sym)
end</code></pre>
<figcaption>A method from the Jekyll source code</figcaption>
</figure>

Multi-Line Figure Captions
--------------------------

Here's what a multi-line figure caption looks like:

<figure>
  <img src="{{ "/assets/images/grass.jpg" | relative_url }}" alt="A photo of some grass">
  <figcaption markdown="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco **laboris** nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit `esse cillum dolore` eu fugiat nulla pariatur. [Excepteur sint
occaecat](https://example.com) cupidatat non proident, _sunt in culpa_ qui
officia deserunt mollit anim id est laborum.
  </figcaption>
</figure>

When to Use Figures
-------------------

According to [the HTML spec on `<figure>`](http://w3c.github.io/html-reference/figure.html)
a figure is supposed to be "self-contained" content (such as an image, code
snippet, table, video, or something) that is:

> referred to from the main content of the document, but that could, without
> affecting the flow of the document, be moved away from that primary content,
> e.g. to the side of the page, to dedicated pages, or to an appendix.

If the particular location of an image or other content within the document is
important to the flow of the document then you should just use a standard
`<img>`, `<pre><code>`, or other content instead of a figure.