Caption

In groundhog since v0.6.2

Examples

This is a test caption. groundhog.dynalabs.io


<div class="img-container">
  <img src="/assets/images/test-img.jpg" alt="test-img">
  <p class="caption">This is a test caption. <a href="http://groundhog.dynalabs.io/">groundhog.dynalabs.io</a></p>
</div>


<figure class="img-container">
  <img src="/assets/images/test-img.jpg" alt="test-img">
  <figcaption class="caption">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. <a href="http://groundhog.dynalabs.io/">groundhog.dynalabs.io</a></figcaption>
</figure>

Introduction

The Groundhog caption component is a styled text element. It can hold <a> elements and is typically accompanied by image or illustrations.

Including the caption component

To include a caption component into your project, first create the <img> and <p> or figcaption elements:

<img src="/assets/images/test-img.jpg" alt="test-img">
<p>My caption</p>

<figure>
  <img src="/assets/images/test-img.jpg" alt="test-img">
  <figcaption>My caption</figcaption>
<figure>

To add the visual enhancements of Groundhog, add the necessary classes to the elements class attributes:

<img src="/assets/images/test-img.jpg" alt="test-img">
<p class="caption">My caption</p>

<figure class="img-container">
  <img src="/assets/images/test-img.jpg" alt="test-img">
  <figcaption class="caption">My caption</figcaption>
<figure>

Additional attributes for the caption

attribute name	effect
`caption`	Will enable text style like in the examples