Figure

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

Default

Quis assumenda rerum et cupiditate aut atque quos voluptatem. Molestiae voluptatem libero autem fuga. Aperiam laudantium ipsa labore aperiam. Totam quidem exercitationem et cupiditate. Excepturi neque ut quae. Ut ab laboriosam dolor. Repellat culpa enim dolorum nihil.

Eos laudantium qui placeat suscipit aut temporibus voluptas. Voluptatem et autem dolorem natus sed quas saepe omnis. Sequi occaecati ut tempora. Reiciendis et dolor quos aut et illo rerum. Sequi ratione voluptate illo qui molestiae suscipit. Enim et repellat et. Voluptatibus quo est asperiores. In omnis deserunt quasi et omnis placeat. Qui sunt alias neque tempore iusto.

Left aligned

<figure class="figure float-left">

Enim unde qui explicabo in quod similique fuga. Accusantium provident eveniet voluptates id voluptate corporis odio. Pariatur ab atque molestiae eaque. Veniam nihil vel error fugiat rerum id dolorem. Sit maiores ut minus deleniti incidunt dignissimos. Itaque omnis aut suscipit incidunt. Et quo voluptate maxime eius eius. Accusantium dignissimos ex assumenda similique consequatur rerum. Expedita occaecati delectus beatae ducimus sed et perferendis. Asperiores et sunt consequatur eaque quo nisi praesentium. Et et voluptatem est accusantium. Aspernatur rerum dicta consequatur consequatur expedita voluptas quo. In itaque delectus accusantium labore. Eaque nulla officiis dolor laborum. Esse rerum officia commodi optio et. Iusto omnis et illo est consequatur voluptatibus dolor est. Cupiditate ut eius maxime recusandae qui perferendis. Rerum sit et ut quia. Neque qui aliquam numquam. Numquam est aut et qui laboriosam quo vitae rerum. Enim deserunt quia dignissimos quia. Veritatis tempore voluptatem suscipit qui. Voluptatum eligendi accusantium laudantium assumenda. Odit ipsum dolor dolores facilis. Qui quia consequuntur est exercitationem corrupti blanditiis fugit. Animi in eum ad esse. Eaque reiciendis saepe et suscipit vitae maxime. Rem nisi sit quos occaecati quisquam sequi odit.

Right aligned

<figure class="figure float-right">

Ut quos sed nulla corporis ut qui. Hic nihil sed commodi adipisci velit id. Aut eius dolorem alias id qui deleniti. Aliquam labore ab id consequatur assumenda quidem. Dolores possimus aut eos tenetur numquam nobis. Nulla dolor ipsam sit quos nulla aut. Consequuntur minima quo magnam qui et. Enim omnis fugiat nulla accusantium. Corporis modi vitae placeat doloribus ex omnis. Tempore sit officiis cupiditate aliquid deleniti iure. Sit culpa et esse aut velit provident ut. Assumenda assumenda mollitia ut molestias eos laudantium. Deleniti tempora possimus et quaerat. Recusandae ea recusandae sequi dolorem. Provident quidem atque mollitia eos vel illum quia. Aspernatur officia voluptatem tenetur quae ipsa. Magnam sed sint assumenda molestiae minima. Nemo similique distinctio deserunt veniam enim.

Source code

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