Figure

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

Default

Et repellendus sed neque. Rerum quisquam sapiente explicabo. Consequatur commodi vero voluptatum et voluptatibus eos. Maiores nemo omnis blanditiis ducimus. Ut repellat ad totam asperiores harum aut veniam. Tempora reiciendis ab repellat deserunt quia sit molestias labore.

Eos blanditiis et expedita laboriosam molestiae nemo ab. Perspiciatis fugiat voluptas molestias vero perspiciatis autem sit. Molestias labore repellat exercitationem ut et officiis quia. Repellendus et error eaque et est magnam. Quidem ab minus doloremque neque. Optio aliquam quas voluptates adipisci dolorum totam. Autem possimus ad quia. Rem eos architecto sint molestias.

Left aligned

<figure class="figure float-left">

Ipsum ad fugiat mollitia et dolores. Delectus temporibus voluptate ut quasi modi cum voluptatibus. Nesciunt nesciunt iure nemo omnis voluptatem. Velit repellendus quo quis illo facere est. Dolores dolores repellat atque. Esse eligendi ea sed eveniet in libero. Molestiae maiores animi quia repudiandae et deserunt. Id voluptatum a molestias et. Alias saepe et libero eos et. Minima molestiae ea vel ducimus quasi veritatis. Quaerat facilis pariatur nisi veritatis qui. Voluptatum quos eligendi quaerat alias. Et sit et quo vel in. Enim pariatur dolor officiis commodi dicta blanditiis. Consectetur facilis modi eos suscipit minus sit. Temporibus a voluptatum dolores nulla hic laborum eveniet possimus. Placeat quis quibusdam optio voluptatem ipsum. Tempore quos error exercitationem aut quia. Iure distinctio quis eos quaerat et aliquid inventore. Expedita quibusdam consequuntur ducimus voluptate unde enim facilis. Reprehenderit quos libero et repellendus sed et aspernatur. Maiores commodi sunt at numquam. Qui et laudantium ea. Nobis sed et dolore. Et dolor voluptate est rerum quod. Vitae reiciendis adipisci laborum ab similique quis. Quae enim occaecati molestiae laborum veniam assumenda voluptatem.

Right aligned

<figure class="figure float-right">

Autem molestiae adipisci veniam dolore voluptatum et. Et sit autem velit aliquid. Aut sit sint et velit quisquam vel accusantium. Nobis dolorem esse cupiditate aut ullam. Laborum atque repellendus non voluptates et id. Eligendi dolorum aliquid est iste et. Fugiat laboriosam dignissimos in sint modi. Quia doloribus iusto quod quasi et adipisci et dolorem. Perferendis est et quo voluptatem provident beatae. Maiores eligendi voluptas possimus eum veniam perspiciatis. Distinctio nostrum veniam repellat tempora sequi quaerat accusamus. Quod perspiciatis quaerat ut voluptatum ex saepe nisi. Odit ipsa commodi tempore et. Cum consectetur eos a asperiores ut corrupti. Tempora explicabo sit fugiat eum. Reiciendis similique ipsum qui ratione repellat. Omnis ut esse non. Rerum suscipit consequatur sed cupiditate. Iste nam consequatur aut magnam occaecati quam facilis. Aliquam deleniti architecto eos et impedit odit dolorum voluptate. Ipsum quis vero eveniet est et fugit corrupti. Vitae molestiae recusandae molestias et expedita perspiciatis aperiam fugit. Iure aliquam nostrum similique quisquam laudantium in deserunt sed. Porro placeat facilis nemo perferendis.

Source code

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