Featurettes

When to Use

Use this when you want to feature a collection of pages on your site. For example, on your Home page, you may want to direct users to the 3 or 4 most important pages on your site, and indicate what the user can expect to find on those pages.

Example: Standard Featurettes

Featurettes Headline

Subhead goes here.

Panel Header 1

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

Panel Header 2

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

Panel Header 3

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

Put additional info or links here.

View Code

Copy

Content	Max Characters	Description
Header	56	A headline introducing the collection.
Subhead	56	Additional info about the collection.
Item Thumbnails	N/A	Use the same aspect ratio for each thumbnail image. Use the same style for each thumbnail image. For example, don’t use a logo for one and a photo for another. Don’t include text in thumbnail images. Always follow our Phography Guidelines when choosing images.
Item Headers*	56	The title of the featured item.
Item Blurbs*	255	What the user can expect to find when visiting the page.
Item Call to Actions*	16	The action the user should take e.g. “Read More”.
Postscript	1-2 Sentences	Include a link to an external page with additional info or a full list of items.

Content

Max Characters

Description

Header

A headline introducing the collection.

Subhead

Additional info about the collection.

Item Thumbnails

N/A

Use the same aspect ratio for each thumbnail image.

Use the same style for each thumbnail image. For example, don’t use a logo for one and a photo for another.

Don’t include text in thumbnail images.

Always follow our Phography Guidelines when choosing images.

Item Headers*

The title of the featured item.

Item Blurbs*

255

What the user can expect to find when visiting the page.

Item Call to Actions*

The action the user should take e.g. “Read More”.

Postscript

1-2 Sentences

Include a link to an external page with additional info or a full list of items.

Shared CleanSlate Partial

Type: Static (uses editable regions)

This component corresponds to the latest version of the shared featurettes 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
`limit`	Any Number	Sets the number of items that will appear in the component.
`reverseItems`	`true` `false`	If set to `true`, new items will be added at the beginning of the series. Otherwise, they’ll be added at the end.

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-featurettes"  %}

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 featurettes partial to one of the slots.

Component-Specific Configuration

Name	Options	Description
Limit	1, 2, 3	Sets the number of items that will appear in the component.
Reverse Items	`checked unchecked`	If checked, new items will be added at the beginning of the series. Otherwise, they’ll be added at the end.

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: Standard Featurettes

Featurettes Headline

Panel Header 1

Panel Header 2

Panel Header 3

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