Photo Box

Overview

When you insert an image as a stand-alone page component (i.e., not as part of a navigation button, list module, etc.), you must select how the image is to be used:

• Image only (basic image with no caption or title)
• Image with caption
• Photo box

This topic covers the “photo box” use.  A photo box is essentially an image container with optional title, caption, and action button.  The title and the image itself can be links.  All of these options are available in the card, text-box module, and image with caption, which are all much more flexible content elements. If you are creating new content, consider using one of those content elements instead.

Usage

• Use the photo box to highlight a link or key message. For greater flexibility, consider using the card or the card-enabled text-box module.
• To group a set of photo boxes, you can place the photo boxes in the same Visual Composer row and apply a template background color to the row.  (See examples on this page.) A better solution is a multi-section card.
• Do not use with large detailed images in small spaces (such as an infographic).  Consider inserting the image as an “image-only” type and enabling the large-image viewer.

General Guidelines

• Use image styles consistently.
• Keep the mixing of image styles to a minimum.
• Remember that an effective caption is not simply “alt text” that displays on the page:  while alt text describes the content of an image, a caption should explain how the image relates to the page topic.

Accessibility

• Always provide meaningful alt text. (See the topic on basic images for guidance on writing alt text.)
• Avoid low-contrast images.  For more information, see the Color Contrast Analyzer.

Examples

Above are three photo boxes with a gray background applied to the Visual Composer row. For each photo box the bottom container margin has been suppressed and margin/padding has been added (Advanced tab in photo box settings). For a more flexible solution, see the multi-section card.