Figures
Documentation and examples for displaying related images and text with the figure component in Metro UI.
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>
.
Use the included .figure
, .image
and .caption
classes to provide some baseline styles
for the HTML5 <figure>
and <figcaption>
elements.
Images in figures are fluid and are made responsive with max-width: 100%
and height: auto
.
<figure>
<img data-src="holder.js/400x300">
<figcaption>A caption for the above image</figcaption>
</figure>
Aligning the figure’s caption is easy with our text alignment classes.
<figure>
<img data-src="holder.js/400x300">
<figcaption class="text-right">A caption for the above image</figcaption>
</figure>