Image with Caption
The caption is optional, but if you do use it, note that the figcaption occurs between the <figure> and </figure> tags.
<figure>
<img src="https://libapps.s3.amazonaws.com/customers/764/images/girlComputer_iStock_84605353_XXLARGE.jpg" alt="woman at computer">
<figcaption>Here is a caption for this image.</figcaption>
</figure>
Framed Image
| Option | Add the following as a class... | In this element |
|---|---|---|
| Frame around both image and caption | frame | figure |
| Frame around image only | frame | img |
| Border around image | border | img |
| Centered caption | center | figcaption |
<figure>
<img src="https://libapps.s3.amazonaws.com/customers/764/images/girlComputer_iStock_84605353_XXLARGE.jpg" alt="woman at computer">
<figcaption>Caption for this image.</figcaption>
</figure>
Image Float
| Option | Add the following as a class in the second div |
|---|---|
| float image to the left of text | float-left |
| float image to the left of text | float-right |
<div class="float wrap">
<div class="float-left">
<figure>
<img class="border" src="https://libapps.s3.amazonaws.com/customers/764/images/girlComputer_iStock_84605353_XXLARGE.jpg" alt="woman at computer">
</figure>
</div>
<div class="float-body">
<p>Biscuit pie ...</p>
</div>
</div>
Biscuit pie chocolate cake marshmallow jujubes pastry lemon drops. Pie toffee sugar plum chocolate cake sugar plum chocolate bar. Cake pastry cake ice cream jelly beans. Sweet roll gummies bonbon. Marshmallow cake tootsie roll. Danish carrot cake candy fruitcake liquorice. Bonbon sesame snaps apple pie chocolate jelly-o chocolate bar bonbon tiramisu.