Web services

Captions

Captions are a good way to provide context or fine print to an image (such as a photo credit or briefly describing what is in the photo). Images of any size or alignment can a caption.

Styling

Try to keep captions short, one or two sentences. Captions appear below the image they describe, and the text is slightly smaller and italicized. They can include a link but not other text formatting options.

Responsive behavior

No change.

Development info
  • Stylesheet location: /_source/styles/components/_images.scss
  • In WordPress, adding a caption is a bit finicky. Here’s how to do it:
    1. Add an image to your page or post like you would normally.
    2. Click on the image, then click the pencil “Edit” icon in the little menu that pops up.
    3. Add your caption in the “caption” box near the top of the “Image details” window.
    4. Click the “Update” button. Your caption should now show below the image.
  • In HTML: 
    • <div class="any-size-class any-alignment-class">
  <img src="" alt="" />
  <p></p>
</div>

Caption examples

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Cat

alignright size-percent-50

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed.

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.

Cat

aligncenter size-percent-100

This is text on the page. The images align to the left, right, or center, and the text wraps around them as needed. If the text is longer than the image is tall, it will flow around the bottom of the image and span the full width of the page.