Display Accessibility Tools

Accessibility Tools

Grayscale

Highlight Links

Change Contrast

Increase Text Size

Increase Letter Spacing

Readability Bar

Dyslexia Friendly Font

Increase Cursor Size

Callout with Photo and Text

The Callout with Photo and Text component adds a box to the page, with a user-selected photo occupying two-thirds of the box and text content taking up the remaining one-third. This component was designed to highlight feature content.

Demo

Lorem Ipsum

This is an example of the description.

Learn more
Image demo alt text

Instructions for use

While editing a page:

  1. Move your cursor to the area of the page you wish to add the component.
  2. Click the "Insert Component" button in the editor toolbar.
  3. Select the Callout with Photo and Text component from the list.
  4. Enter the title of the content being highlighted.
  5. Select the heading level - this should be one heading level below the nearest heading above the component.
  6. Enter a brief description.
  7. Choose title and description position (left or right).
  8. Select the image for use with the component. Recommened image size of 1200x628 pixels for 100% width pages without a side navigation. 4:3 image size ratio for pages with a side navigation.
  9. Select the image width. Options include: 66% (default), 50%, and 33%.
  10. Enter image alt text.
  11. Select the optional call to action button text.
  12. Enter a link for the call to action button.
  13. Optional call to action link ID for Google analytics.
  14. Interior Page checkbox is optional. This should be checked when the callout is used on an interior page to reduce overall heading size and spacing.
  15. Click the "Save" button.