C04 Multi-button layout CTA

The Multi-button layout component allows for displaying multiple (up to 4) related CTAs, encouraging site visitors to take relevant actions based on the content of the page. Typically positioned toward the bottom of the page, it reinforces key calls to action, ensuring next steps are prominent, easy to navigate, and accessible.

 

Component requirements

Required:

• Theme: Dropdown. Allows to apply various styling options to the component. White/Smoke White/Wellness Blue. Default: White.
• Heading: Text field. Heading is set to H2.
• CTA #1: Text field along with associated link type (internal/external/anchor/email/phone).

Optional:

• Icon: Dropdown. Allows users to choose an icon they would like to include. Positioned to the left of heading. 

• Subheading: Allows users to add supporting copy which appears between header and calls to action section.

• CTA #2: Text field along with associated link type (internal/external/anchor/email/phone).
• CTA #3: Text field along with associated link type (internal/external/anchor/email/phone).
• CTA #4: Text field along with associated link type (internal/external/anchor/email/phone).

Additional component notes:

• Component allows anywhere from 1-4 CTA's to be included.
• Based on the selected theme, the component will automatically adjust its styling to ensure accessibility.
• The component layout is dynamically generated based on device and template used
  • In the full-width (1440px) configuration, the CTAs will be displayed 4-across.
  • In the left-nav configuration, the CTAs will be stacked in a 2x2 grid.
  • On mobile, the CTAs are always be stacked.

Content guidance

See the Get Care sections at the bottom of MW service line pages as an example. Work with CMS partner to choose desired background color based on care delivery brand.

Writing H2 and optional support copy

• The H2 should directly and clearly state the purpose of the related CTAs.
• Optional support copy below the H2 can be used to further clarify.

CTA button copy

• For the CTA button copy, use sentence case.
• CTAs should be descriptive and clearly state what action users should take. Don’t use general phrases such as “click here” or “read more.”
• CTAs should be kept to 30 characters or fewer.

ADA requirements

• CTA buttons must include descriptive link text (avoid using general phrases such as 'Read More' or 'Learn More')
• Icon should be marked as decorative

 

Component examples

Example #1: White theme selected. Configured as Single CTA. Support copy included. Icon disabled.

  

Example #2: Smoke White theme selected. Configured as Dual CTA. No support copy. Icon enabled.

 

Example #3: Wellness Blue theme selected. Configured with Three CTAs. Support copy included. Icon disabled.

 

Example #4: White theme selected. Configured with all Four CTAs. No support copy. Icon enabled.