Portland Community College | Portland, Oregon Portland Community College

Captions

Images of any size or alignment can have captions. Embedded videos can also have captions.

Development info

  • Stylesheet location: /source-v6/styles/components/_media.scss
  • In WordPress, add a caption in the caption field (found in the image’s options alongside title and alt text)
  • <div class="any-size-class any-alignment-class">
      <img src="" alt="" />
      <p></p>
    </div>

Styling

Responsive behavior

No change.

Cat

alignleft 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. 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.

cat

alignright size-percent-25

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