Figures

Documentation and examples for displaying related images and text with the figure component in Metro 4.

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>