Caption Layout

The placement of content of the caption area can be edited with a collection of c4-layout-* classes. These c4-layout-* classes are applied to the <figcaption> tab. The default location for content is centered both vertically and horizontally. In the following example we are applying the c4-layout-bottom-left to the figcaption area, moving the caption content to the bottom left..

<figure class="c4-turin">
  <img src="https://source.unsplash.com/WLUHO9A_xik/400x300" alt="Sample Image">
  <figcaption class="c4-layout-bottom-left">
    <h4>
      Sample Text
    </h4>
  </figcaption>
</figure>

Layout Classes

c4-layout-top-left

c4-layout-top-center

c4-layout-top-right

c4-layout-center-left

c4-layout-center-right

c4-layout-bottom-left

c4-layout-bottom-center

c4-layout-bottom-right