Adding a captioned image to the body of your page must be done using Sitecore's HTML Editor; the WYSIWYG Content Editor cannot be used to do this.

Fully-Responsive Example

The image and caption below are fully responsive: meaning that it will expand and contract to the full width of the container that it is in. As the browser or viewing area changes size, so does the image and caption. The image does not have any float or width percentage classes added.

Markup

<figure>
    <img src="your-image.jpg" alt="LeBow lockup">
    <figcaption>Your caption.</figcaption>
</figure>

Percentage-Width Example

If you have an image that does not lend itself to being fully stretched, such as a logo or button graphic (as in the example to the right), you can assign a percentage restriction to its FIGURE container by using the percentage width class and a float-left or float-right class. The image and caption are still responsive and will adjust in size--but on a smaller scale relative to its holding container.

Percentages from 5%-95% (in 5% increments) can be applied. The exact percentage to use is determined by the native size of your graphic and your vision for how it should look on the page.

Markup

<figure class="percent-25 float-right">
    <img src="your-image.jpg" alt="Alt text here.">
    <figcaption>Your caption.</figcaption>
</figure>

Built-In Styling

The markup used in both of the examples provided on this page automatically apply the following CSS:

• a 1-pixel gray border and 5-pixel padding around the image and caption
• gray caption text

This is the standard styling for adding a caption to an image. If the image sits too tightly near the border, try adding "white space" around the edges of the actual image itself.