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 guidelines
Lorem ipsum
Lorem ipsum
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.
Multi-button layout heading
Example of support copy, also referred to as a Subheading (optional)
Example #2: Smoke White theme selected. Configured as Dual CTA. No support copy. Icon enabled.
C04 - Multi-button layout CTA example2
Example #3: Wellness Blue theme selected. Configured with Three CTAs. Support copy included. Icon disabled.
C04 - Multi-button layout CTA example3
Example of support copy, also referred to as Subheading (optional)
Example #4: White theme selected. Configured with all Four CTAs. No support copy. Icon enabled.