Action Hero Two-Column

When to Use

Use this if you want to call attention to a secondary chunk of content and/or action item(s).

Example 1: Standard Action Hero Two-Column

Sed ut Perspiciatis Unde Omnis

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos.

Call to Action

View Code

Copy

Example 2: Action Hero Two-Column with List

Sed ut Perspiciatis Unde Omnis

View Code

Copy

Content	Max Characters	Description
Header*	56	Marketing copy that grabs the user’s attention.
Subhead*	56	A brief teaser related to the call to action.
Blurb or List*	255	Marketing copy or a list of links.
Call to Action	16	The user action you want to promote.

Content

Max Characters

Description

Header*

Marketing copy that grabs the user’s attention.

Subhead*

A brief teaser related to the call to action.

Blurb or List*

255

Marketing copy or a list of links.

Call to Action

The user action you want to promote.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared action-hero-two-column partial in the Design System CleanSlate. CleanSlate developers can use this component by adding a shared partial to a template. Below are the available configuration options for this component.

Component-Specific Parameters

Name	Options	Description
`primaryHeading`	`h1` `h2`	Sets the primary heading to either `h1` or `h2`.

General Component Parameters

The following parameters can be used when including any shared partial.

Name	Options	Description
`editModeOnly`	`true`	If set to true, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
`main`	`true`	If set to true, a `<main></main>` element will apply to the component.
`scope`	`page site`	If set to site, content in the editable regions of the component will apply sitewide to any component with the same name and instance number that is also set to `scope: "site"`.

Code Example

{% render "components/wvu-action-hero-two-column"  %}

PRO TIP: Options that contain integers (1, 2, 3) or boolean values (true, false) don’t need to be wrapped in quotes e.g. limit: 1 or main: true. Strings should be wrapped in quotes e.g. scope: "site".

Setup

From the CleanSlate Pages dashboard, assign the Super Template to a page. In the page properties, navigate to the Slots tab. Assign a action-hero-two-column partial to one of the slots.

Component-Specific Configuration

Name	Options	Description
Primary Heading	`h1` `h2`	Sets the primary heading to either `h1` or `h2`.

General Component Configuration

The following options can applied to any component in a slot.

Name	Options	Description
Edit Mode Only	`checked unchecked`	If checked, the component will only appear in Edit Mode. This is useful for testing your component before you want to make it live.
Is Main	`checked unchecked`	If checked, a `<main></main>` element will apply to the component.
Sitewide	`checked unchecked`	If checked, content in the editable regions of the component will apply sitewide to any other component with the same name and instance number that is also set to “Sitewide”.

Active Campus Alert

Shared Partial Name:

When to Use

Example 1: Standard Action Hero Two-Column

Sed ut Perspiciatis Unde Omnis

Example 2: Action Hero Two-Column with List

Sed ut Perspiciatis Unde Omnis

Content Model and Styling Guidelines

Content-Specific Guidelines

Shared CleanSlate Partial

Component-Specific Parameters

General Component Parameters

Code Example

Setup

Component-Specific Configuration

General Component Configuration