Media & text with CTA

Use Cases:

• If used as a hero (top pattern):
  • Introduce users to the main subject of a page
  • Orient or introduce users to the information on your page
  • Make users aware of your goal for them through a clear call-to-action (CTA), the most important link on the page
  • Surface important information above the fold of the page
• If used further down the page:
  • Highlight important information
  • Introduce a new page section
  • Add visual interest and include a prominent link or CTA if appropriate

Guidelines:

Can be used as a hero pattern; if this is the case, after assigning the page title, be sure to change the page template to “No Title” or “No Title, No Breadcrumbs” as appropriate. Once this is done, you must also change the heading style in the pattern to an H1.

Can also be used down the page to add visual interest and call reader attention to important information.

• When a CTA is not needed, you may remove the CTA link completely or replace with the Single Link block.
• Alternate left/right image placement when using multiple instances of the pattern down a page.

Avoid:

• Stacking (repeating one after the other) without alternating image placements
• If using this pattern as a hero, avoid using only the default pattern. Instead, use it in combination with a “No Title” page template, and always change the heading in the pattern to an H1 for accessibility.

Accessibility:

• If used as a hero, use a page template with no title and change the heading to an H1. All pages must have an H1 for accessibility as well as good SEO practice.
• Include descriptive alt text for images.

Dependencies:

• CTA link
• Media (image or video)

Image Dimensions:

• Recommended image dimensions: 720w x 478h (minimum)  or 1440w x 956h for a sharper image (aspect ratio 3:2)