Skip to main content

Figure and image

Figures are independant parts of a page mostly contain images with captions.

Default

A primary figure with image inside.

index.html
<figure>
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
</figure>

To mention source of the image you can put a link inside figure with .source class.

index.html
<figure>
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

Overlay caption

By adding .overlay-caption captions can be over image it is possible when you use figures because there is a wrapper.

index.html
<figure class="overlay-caption">
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

Helper classes

To center align image add .centered class to the figure, also by adding .fill class it will fill the whole space.
There are helper classes for roundness, for example by adding .edge-sharp you'll have an image without roundness.

index.html
<figure class="overlay-caption edge-sharp">
  <img class="edge-sharp" src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

<figure class="overlay-caption centered">
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>

<figure class="overlay-caption fill">
  <img src="https://picsum.photos/500/300" alt="a random image" />
  <figcaption>A random image - high quality images</figcaption>
  <a href="#" class="source" target="_blank" rel="nofollow">Picsum</a>
</figure>