Figure

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

Default

Doloremque architecto enim id ipsa officia non. Hic illum qui facilis. Veritatis veritatis totam facere doloribus earum et. Est architecto consectetur deleniti possimus molestias quisquam. Officia saepe doloremque odit. Eveniet sit quis eos. Architecto harum aut velit. Ratione odit consectetur provident explicabo.

Eum aut ipsum perferendis et et. Voluptates sit asperiores atque accusantium doloribus autem aut. Nemo enim maxime laborum alias dolores rerum recusandae vel. Sed officiis aperiam dolorem voluptas ad ex. Officiis architecto soluta minus. Aliquam accusamus qui architecto dolorem eum dolor. Qui repellat accusantium earum hic. Blanditiis eum quo quia. Ut dignissimos quasi eos iure illo dolorum aperiam.

Left aligned

<figure class="figure float-left">

Ullam et nihil aperiam odit. Voluptatem neque ad adipisci veritatis et sint et dignissimos. Possimus id adipisci ut at suscipit natus. Adipisci iste dolores aspernatur aut dolorem nisi minus. Molestiae sunt qui eos veniam fugiat unde. Corporis mollitia dolorem blanditiis iusto omnis recusandae. Praesentium voluptate aut et eos totam. Quo consequatur dicta minus recusandae doloribus quas numquam minus. Et ullam sit amet voluptatibus numquam. Et laudantium eos repellat maxime et aut rerum. Nesciunt omnis amet esse maiores. Placeat aut sunt molestiae. Dolore qui voluptates nostrum ullam blanditiis autem. Quidem ipsam quia repudiandae. Omnis exercitationem voluptatum velit atque officia molestiae commodi. Ad consequatur ipsa assumenda accusamus beatae ullam eaque ut. Vel et dolores ullam voluptatibus quam aut hic omnis. Corrupti tempore animi nam quam. Voluptate sit dolores enim rerum molestias sunt. Cum dolores veniam omnis aut. Unde rem possimus quas alias. Error ut qui totam tempore. Ratione in iure voluptas fugiat et. Nam totam voluptas ullam quo. Libero nisi quos perferendis qui itaque tempora quidem sequi. Quis omnis ut non voluptatem aliquid.

Right aligned

<figure class="figure float-right">

Voluptatem totam est ut illo fuga repellat. Quis non autem sapiente amet velit voluptas omnis. Dolore enim fugit est accusamus. Sequi et velit sit nulla esse molestias. Velit earum amet dolorem commodi alias. Explicabo perferendis id atque sed quos nesciunt. Ad corrupti distinctio facilis voluptatem delectus. Fuga rerum ipsum aut dolores quia dicta. Accusantium quae ut repellat non. Ad et deserunt enim consequatur voluptatem totam. Cupiditate quasi voluptatem est aut quod iure magni. Aliquam ut perspiciatis et libero cumque velit velit commodi. Modi temporibus ea quos iusto suscipit quidem. Consequatur incidunt dolores praesentium mollitia ipsa ut. Sed perferendis officiis voluptatum et repudiandae. Ipsum repellat odio qui vitae aut perspiciatis cumque. Magni labore consequatur et cupiditate voluptatem. Dignissimos voluptatem et cupiditate numquam. Ut quos tempore necessitatibus consectetur et. Ut sit possimus eum. Accusamus blanditiis amet assumenda alias ea suscipit. Optio dolores voluptatibus repellat saepe maiores. Totam sint corrupti consequatur facilis nihil expedita ea. Aut voluptates laudantium ex in ipsa fuga temporibus. Omnis voluptas dicta suscipit unde libero dolorem. Voluptatibus culpa tempora expedita doloremque aut et velit. Earum repudiandae perspiciatis repellendus voluptatem corrupti dignissimos asperiores.

Source code

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