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 or right rail 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 guidance

This component is used to present multiple topics in columns with header, support copy and CTA. See examples below. Use White background when a more open look is desired. Use White Smoke background for accent or separation.

The Aurora cancer landing page uses C05 components for each of these sections:

• Three ways to assess your cancer risk
• Cancer screenings
• Specialized services

The Aurora breast cancer page uses C05 component for a list of clinic locations.

Column containers can also be used without CTAs for simple columns of symptoms, risk factors or other bulleted lists. See example of C05 used for columns of types of cancer

• Best practice for bulleted lists is to use only two columns.
• Use at most three columns on pages with left nav or right rail. Four columns may be used on full-width pages.

Headlines:

• Up to 40 characters.
• Specify H2 or H3 to avoid default P formatting.

CTA button copy (optional)

• 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

• 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.

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.

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.

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.