Figure

<figure> is used to highlight an image with a caption. It appears centered by default.

Default

Labore repellendus dicta eaque distinctio voluptates. Facere in eveniet corporis et totam enim iusto. Corporis fugiat ex nemo minima sed veniam. Molestiae id quia nulla. Qui dolorem sequi iure consequatur nostrum illo. Magni soluta quis natus quasi iure perspiciatis. Harum explicabo eaque voluptatem similique deserunt et.

Voluptatibus dolor ratione saepe saepe.

Harum suscipit fugit et incidunt non. Dicta necessitatibus nihil quis ipsum nesciunt nulla optio. Recusandae temporibus dolores optio praesentium voluptatem assumenda sint. Fuga tempore ratione fugiat tempore dolor. Eum voluptatem non nemo. Illum modi facere numquam quo eum eos unde. Tempora voluptatem est consequatur tempora. Et delectus quae eius cumque excepturi saepe. Et nemo repellat rem. Labore enim libero autem deserunt nihil. Odio excepturi quia illo voluptas.

Left aligned

<figure class="figure float-left">

Rem tenetur excepturi nam veritatis sed et.

Sint magni voluptatibus voluptatem eos aut ullam ut. Unde molestiae provident totam corporis ut laboriosam saepe natus. Sunt architecto neque magnam at. Repudiandae veniam ut voluptatem et quasi saepe et at. Ab a sunt harum nihil in sit sunt. Et facere esse ratione enim quis. Rerum alias impedit et aperiam porro consequuntur est officiis. Ea sed veritatis est voluptatem ut dolorem. Quaerat modi et animi. Qui eos natus perspiciatis. Accusantium necessitatibus ducimus quis et doloribus. Occaecati quaerat dolor illum voluptatem reiciendis qui voluptas. Minima aut vitae ullam accusantium. Sint cum ut aut et aliquam unde totam. Adipisci iusto nihil ut ut omnis ullam voluptatem. Amet ratione hic ipsam non molestiae amet eum eos. Ad quia voluptatem expedita consequatur veritatis. Molestias deleniti sed sunt eum aut qui. Iste occaecati illum ad quis voluptate. Modi dolor cum maxime enim ut molestias. Pariatur quae iste tempore omnis.

Right aligned

<figure class="figure float-right">

Natus modi ratione in et cum natus.

Ea laudantium ea maiores molestiae nobis necessitatibus. Nisi incidunt esse magnam sit. Facere quia molestiae eius distinctio veritatis facilis voluptas. Facilis et facere omnis aut laborum. Animi aut quisquam facilis aut dolorem soluta et. Nobis vel saepe sunt et facilis. Adipisci illum error quibusdam ut explicabo dolorem et. Temporibus quam aliquam totam officia nesciunt ex. Error voluptatem voluptas accusamus porro ipsum quasi. Voluptatem a provident iusto et nihil dolorem ut soluta. Numquam debitis odio incidunt quod soluta. Repellendus aut laboriosam voluptas. Laudantium inventore quibusdam repellendus praesentium assumenda voluptates esse. Tempora rerum culpa et nihil voluptatem aut. Aut dignissimos delectus quis eligendi dolor quod vel. Eos vel dicta enim et. Ab officiis nostrum mollitia corrupti nobis ipsum et. Hic officia ullam voluptatibus sed provident. Molestias at eum veritatis accusamus. Possimus sit voluptatem suscipit esse quisquam optio expedita. Fugiat dolor est earum sunt rerum. Eius ex voluptatum aliquam quia. Non et saepe sit sit mollitia voluptates. Aut ut mollitia corrupti voluptas libero dolorem rerum. Architecto porro rerum molestias sequi consequuntur est. Ullam velit cumque consectetur deserunt ipsam. Itaque ut at voluptas sunt ut. Iure sit nam vel quas. Voluptas unde impedit maiores qui.

Source code

<figure class="figure">
    <img src="/styleguide/image/400x300" alt="">
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>