Photo Grid

When to Use

Use this to show profiles of students and/or faculty members.

Example 1: Standard Photo Grid

Do Eiusmod Tempor Incididunt Ut

Firstname Lastname

Title

Name of Organization

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.

View Profile: Do Eiusmod Tempor Incididunt Ut

Labore et Dolore Magna Aliqua

Firstname Lastname

Title

Name of Organization

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.

View Profile: Labore et Dolore Magna Aliqua

View Code

Copy

Example 2: Standard Photo Grid (3 Across)

Do Eiusmod Tempor Incididunt Ut

Firstname Lastname

Title

Name of Organization

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.

View Profile: Do Eiusmod Tempor Incididunt Ut

Labore et Dolore Magna Aliqua

Firstname Lastname

Title

Name of Organization

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.

View Profile: Labore et Dolore Magna Aliqua

Quis Nostrud Exercitation Ullamco Laboris

Firstname Lastname

Title

Name of Organization

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.

View Profile: Quis Nostrud Exercitation Ullamco Laboris

View Code

Copy

Content	Length	Guidelines
Header*	Component Header Maxiumum of 255 characters	A header that introduces the featured pages.
Subhead	Maximum of 255 characters	A more specific description of the content.
Item Photos	N/A	A photo for each person.
Item Headers*	Maximum of 255 characters	This should be a headline that has to do with the content you want to promote, for example an academic program, initiative, student organization, etc. Alternatively, you can use the name of the person being profiled. Use a consistent amount of content for headlines and blurbs for each featured item.
Name	N/A	If you don’t use the name of the person being profiled for the headline, include their name below.
Title	N/A	The title (if a faculty member) or academic program and graduating class (if a student).
Item body*	Maximum of 255 characters	A short blurb about the persons.
Item CTA	Maximum of 40 characters	A button to view the person’s profile.

Content

Length

Guidelines

Header*

Component Header
Maxiumum of 255 characters

A header that introduces the featured pages.

Subhead

Maximum of 255 characters

A more specific description of the content.

Item Photos

N/A

A photo for each person.

Item Headers*

Maximum of 255 characters

This should be a headline that has to do with the content you want to promote, for example an academic program, initiative, student organization, etc. Alternatively, you can use the name of the person being profiled.

Use a consistent amount of content for headlines and blurbs for each featured item.

Name

N/A

If you don’t use the name of the person being profiled for the headline, include their name below.

Title

N/A

The title (if a faculty member) or academic program and graduating class (if a student).

Item body*

Maximum of 255 characters

A short blurb about the persons.

Item CTA

Maximum of 40 characters

A button to view the person’s profile.

Shared CleanSlate Partial

Type: Dynamic (pulls data from other pages in site)

This component corresponds to the latest version of the shared photo-grid 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.

Collection Parameters

These options can be used to configure collection components.

Name	Options	Description
`limit`	Any Number	Sets the number of items that will appear in the component.
`showHidden`	`true` `false`	If set to `true`, shows items even if they’re hidden from your site’s navigation.
`customLabel`	`whatever-label-you-want`	If you enter a label, it will replace the default label used to pull in dynamic content.

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-photo-grid"  %}

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

Collection Parameters

These parameters can be used to configure collection components.

Name	Options	Description
Limit	Any Number	Sets the number of items that will appear in the component.
Show if Hidden	`checked` `unchecked`	If set to `true`, shows items even if they’re hidden from your site’s navigation.
Custom Label	`whatever-label-you-want`	If you enter a label, it will replace the default label used to pull in dynamic content.

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 Photo Grid

Do Eiusmod Tempor Incididunt Ut

Labore et Dolore Magna Aliqua

Example 2: Standard Photo Grid (3 Across)

Do Eiusmod Tempor Incididunt Ut

Labore et Dolore Magna Aliqua

Quis Nostrud Exercitation Ullamco Laboris

Content Model and Styling Guidelines

Content-Specific Guidelines

Shared CleanSlate Partial

Collection Parameters

General Component Parameters

Code Example

Setup

Collection Parameters

General Component Configuration