Photo Captions

Photo captions are commonplace for giving more information about an image or crediting an artist, but that small bit of text below a splashy photo can so easily get lost. With components you can stylize photo captions so your reader is actually drawn to what they have to say.

Examples

Caption on the side

How to make caption on the side

Caption below the photo

HTML

<figure class="stk-snippets-caption-01 stk-reset stk-image-figure" data-ce-tag="image-figure">
  <div data-ce-tag="mask" class="stk-mask"></div>
  <figcaption class="stk-reset stk-description" data-ce-tag="description"></figcaption>
</figure>

CSS

.stk-snippets-caption-01 .stk-description {
  position: relative;
  display: block !important;
  margin-top: 0;
  padding: 10px;
  background: #FFF5D3;
  border-style: solid;
  border-top-width: 5px;
  border-image: url("data:image/svg+xml,%3Csvg width='20' height='10' viewBox='0 0 20 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0L10 5L20 0V10L10 5L0 10V0Z' fill='%23FFF5D3'/%3E%3C/svg%3E%0A") 50% 0 / 5px 0 0 0 / 5px 0 round;
  z-index: 1;
}

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust border style and background color in the component CSS.

Content Experience Impact

With components, you have the power to place your caption anywhere you want in relation to the photo to ensure it makes sense with your layout, and include so much more than plain text to ensure your caption doesn’t get lost.

You can also integrate your brand fonts, colors, or even illustrative elements to create small moments of reinforcing who you are, helping to create a more consistent brand experience across your site.

Dos

• Make sure your captions include attribution to the photographer or creator, especially if it is required by whichever service you’ve gotten the image from. Even if you are allowed to use without attribution, it’s nice to support artists by giving them credit if you are able.

• Use captions to provide additional information that will help a reader understand the purpose or context of an image.

• If there’s especially important information in an image caption, play with different font styles (like bold), sizes, or colors to draw the reader’s eye to that text and make sure they don’t ignore it completely.

Don'ts

• Don’t treat all captions the same. Consider whether the information is critical to the flow of content (in which case you might want to make the text more obvious) or whether the information is an attribution or sidebar that’s not necessary for the reading experience (in which case the design could be more subtle).

• Don’t make your captions so small that people couldn’t possibly read them! While they may be in a smaller or lighter font than the rest of your text, there’s no point in having the information there if it’s unreadable.

Learn More

What to Do With Picture Captions? Magazine Designing

How Captions Instantly Transform Your Landing Page Images from Good to Great Copyblogger

Extra Inspiration