aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/images.md11
1 files changed, 11 insertions, 0 deletions
diff --git a/docs/components/images.md b/docs/components/images.md
index 3092c4a1a..03dce0a46 100644
--- a/docs/components/images.md
+++ b/docs/components/images.md
@@ -78,3 +78,14 @@ Align images with the [helper float classes](/components/helpers) or [text align
<img src="..." class="img-rounded" alt="...">
</div>
{% endhighlight %}
+
+## Figures
+
+Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `<figure>` and `<figcaption>` elements. As a bonus, immediate children images are automatically responsive.
+
+{% example html %}
+<figure class="figure">
+ <img data-src="holder.js/400x300" class="img-rounded" alt="A generic square placeholder image with rounded corners in a figure.">
+ <figcaption class="figure-caption">A caption for the above image.</figcaption>
+</figure>
+{% endexample %}