Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use
with the appropriate 1
figure
. Each instance of 1
class
is auto-numbered and displayed in the caption.1
figure
Figures (for images or video)
One Up
![](http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg)
Two Up
Apply the
class like so to display two images side by side that share the same caption.1
half
<figure class="half">
<img src="/images/image-filename-1.jpg" alt="">
<img src="/images/image-filename-2.jpg" alt="">
<figcaption>Caption describing these two images.</figcaption>
</figure>
And you’ll get something that looks like this:
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
Three Up
Apply the
class like so to display three images side by side that share the same caption.1
third
<figure class="third">
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
<figcaption>Caption describing these three images.</figcaption>
</figure>
And you’ll get something that looks like this:
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)
![](http://placehold.it/600x300.jpg)