Figures

Display images with optional captions using the .velin-figure component. Figures are semantic HTML5 elements styled for consistency.

Basic Figure

Use .velin-figure on a <figure>, .velin-figure__img on the image, and .velin-figure__caption on the <figcaption>.

<figure class="velin-figure">
  <img src="https://picsum.photos/400/250" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="A sample image">
  <figcaption class="velin-figure__caption">
    A caption for the above image.
  </figcaption>
</figure>

A sample image — A caption for the above image.

Caption Alignment

Align captions using text utility classes like .velin-text-center or .velin-text-end.

<figure class="velin-figure">
  <img src="https://picsum.photos/400/200" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="Centered caption example">
  <figcaption class="velin-figure__caption velin-text-center">
    A centered caption.
  </figcaption>
</figure>

<figure class="velin-figure">
  <img src="https://picsum.photos/400/200" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="End-aligned caption example">
  <figcaption class="velin-figure__caption velin-text-end">
    A right-aligned caption.
  </figcaption>
</figure>

Centered caption example — A centered caption.

End-aligned caption example — A right-aligned caption.

Figure with Thumbnail

Combine .velin-img-thumbnail with the figure component for a bordered look.

<figure class="velin-figure">
  <img src="https://picsum.photos/300/200" class="velin-figure__img velin-img-thumbnail" alt="Thumbnail figure" width="300">
  <figcaption class="velin-figure__caption">
    A figure with a thumbnail-style image.
  </figcaption>
</figure>

Thumbnail figure — A figure with a thumbnail-style image.

Figures in a Grid

Place multiple figures inside a grid for gallery-style layouts.

<div class="velin-grid velin-cols-1 velin-cols-md-3 velin-g-3">
  <figure class="velin-figure">
    <img src="https://picsum.photos/seed/a/400/300" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="Photo A">
    <figcaption class="velin-figure__caption">Photo A</figcaption>
  </figure>
  <figure class="velin-figure">
    <img src="https://picsum.photos/seed/b/400/300" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="Photo B">
    <figcaption class="velin-figure__caption">Photo B</figcaption>
  </figure>
  <figure class="velin-figure">
    <img src="https://picsum.photos/seed/c/400/300" class="velin-figure__img velin-img-fluid velin-img-rounded" alt="Photo C">
    <figcaption class="velin-figure__caption">Photo C</figcaption>
  </figure>
</div>