Skip to main content

Action Hero Card

Shared Partial Name:

wvu-action-hero-card

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 Card

Action Hero Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Call to Action

Example 2

Action Hero Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Call to Action

Example 3

Action Hero Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Call to Action

Content Model and Styling Guidelines

The following guidelines will help ensure your content and styling follows our design principles, and ensures consistency and unity across your pages as well as other WVU-branded websites.

Content-Specific Guidelines

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* 255 Marketing copy or information related to the call to action.
Call to Action* 16 The user action you want to promote.

* Indiates required content.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared action-hero-card 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.