Profile Hero With Quote

When to Use

Use this when you want to quote a person to show the benefits of a program, initiative, etc.

Example: Standard Profile Hero With Quote

We need a paradigm shift draft policy ppml proposal. Closing these latest prospects is like putting socks on an octopus prairie dogging. Goalposts closer to the metal fire up your browser. Killing it product management breakout fastworks for it's about managing expectations for those options are already baked in with this model ultimate measure of success.

Example Profile E

Biology, Class of ’22

Put additional info or links here.

View Code

Copy

Content	Max Characters	Description
Quote*	350	A quote from a student or faculty member.
Name*	N/A	The name of the student or faculty member.
Subhead*	255	If a student, their program and graduation year; if a faculty member, their title and organization.
Postscript*	255	A secondary call to action.

Content

Max Characters

Description

Quote*

350

A quote from a student or faculty member.

Name*

N/A

The name of the student or faculty member.

Subhead*

255

If a student, their program and graduation year; if a faculty member, their title and organization.

Postscript*

255

A secondary call to action.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared profile-hero-w-quote 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
`align`	`left middle right`	Shifts the copy to the left, middle, or right. Use the option best suited to let the subject of your background image show through.

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-profile-hero-w-quote"  %}

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 profile-hero-w-quote partial to one of the slots.

Component-Specific Configuration

Name	Options	Description
Align	`left middle right`	Shifts the copy to the left, middle, or right. Use the option best suited to let the subject of your background image show through.

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: