The Headline CTA component features an H1 headline with an optional button positioned to the right of it (below the headline on mobile). The component highlights key message while providing a clear call-to-action, ensuring important link or action stands out.

 

Component requirements

Required:

• Headline H1: Text field.

Optional:

• Link description (CTA description): Text that appears within a button.

• Link destination (CTA destination): CTA destination (internal, external, etc.).

Additional component notes:

• On a mobile device, the button becomes full width and drops below the headline.

Content guidance

Every webpage uses either the C03 Headline CTA or the B01 HERO banner except for care delivery brand and corporate website homepages. The C03 Headline CTA is used on pages without a banner image.

Writing H1

• The H1 should directly and clearly state what the page is about.
• Avoid vague and overly creative phrasing.
• Often the H1 aligns with the page URL, but SEO guidance may require slight adjustments, such as adding keywords. See about us page example.
• In general, use sentence case for H1. This means capitalize only the first word of the sentence and words that would normally be capitalized, such as a hospital name. Some exceptions to use title case include creative brand copy treatments.

CTA button copy

• For the CTA button copy, use sentence case.
• CTAs should be descriptive and clearly state what action users should take.
• CTAs should be kept at 30 characters or fewer.
• Typically we use the same CTA throughout a service line or relevant condition, treatment or diagnostic tool page (e.g., Find a cancer specialist).
• If there’s no CTA, the optional category would be left blank.

ADA requirements

• CTA must have a descriptive link text.

 

Component examples

Example #1: Headline (H1) by itself.

 

Example #2: Headline (H1) along with CTA