C05 Multi-column CTA
The Multi-column CTA component allows you to create up to four columns on a page, each with the flexibility to include rich content and a call-to-action. It helps organize key actions and messaging in a visually appealing, easy-to-navigate format.
Component requirements
Component consists of a wrapper container, along with individual column containers (up to 4 max).
Multi-column wrapper container:
Required:
- Number of columns: Dropdown. Allows the user to select from 1 to 4 columns for content layout. 2/3/4/C24-Location cards. Default: 2.
- Theme: Dropdown. Allows to choose between two background options: White or White Smoke. Default: White.
- Title type: Dropdown. H2/H3/H4/P. Default: Paragraph.
- Title alignment: Dropdown. Left or Center. Default: Left.
Optional:
-
Headline: Text field. Allows headline to be included above the columns. Title type dropdown within the multi-column wrapper settings is used to control heading level or paragraph format.
-
Support copy: Rich text field.
Individual column containers:
Required:
- Title type: Dropdown. H2/H3/H4/P. Default: Paragraph.
- Title alignment: Dropdown. Left or Center. Default: Left.
- Headline: Text field.
- Body copy: Rich text field. Body copy which appears within each individual column.
Optional:
- CTA Button: Text field along with associated link type (internal/external/anchor/email/phone)
Additional component notes:
- On pages with left navigation enabled, no more than 3 columns in a row should be enabled
- C24-Location Cards is available as a column option. It automatically creates 2 columns in which location cards can be arranged.
Content guidelines
Lorem ipsum
Lorem ipsum
ADA requirements
CTAs/buttons within each content type (within individual column) should have descriptive link text.
Component examples
Example #1: White Smoke theme selected. Wrapper headline and support copy enabled. Wrapper headline set to H2 with alignment set to center. Configured as single column. Individual column alignment set to center, with column headline set to H3. CTA button enabled.
This is a wrapper headline example (optional)
Wrapper support copy example (optional)
This is an individual container headline example (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Example #2: White theme selected. Wrapper headline and support copy disabled. Configured as dual column. Individual column alignment set to left, with column headline set to P. CTA buttons within each column disabled.
Individual container headline example 2-1 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Individual container headline example 2-2 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Example #3: White Smoke theme selected. Wrapper headline enabled. Wrapper support copy disabled. Wrapper headline set to H2 with alignment set to left. Configured as three columns. Individual column alignment set to left, with column headlines set to P.
This is a wrapper headline example (optional)
Individual container headline 3-1 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Individual container headline 3-2 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Individual container headline 3-3 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Example #4: White theme selected. Wrapper headline and support copy enabled. Wrapper headline set to H3 with alignment set to center. Configured as four columns. Individual column alignment set to left, with column headline set to H3. Each column showcases flexibility in content and CTAs included.
This is a wrapper headline example (optional)
Individual container headline example 4-1 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Individual container headline example 4-2 (required)
Individual container body copy example (required).
- Bulleted list #1
- Bulleted list #2
- Bulleted list #3
Lorem ipsum
Individual container headline example 4-3 (required)
Individual container headline example 4-4 (required)
Individual container body copy example (required).
Lorem ipsum dolor sit amet, consectetur adipiscing elit, incididunt ut labore et. Excepteur sint occaecat cupidatat non proident,