Skip to main content
Design System 2
University Relations
Contribute

Pages

Shared Partial Name:

wvu-page-collection

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 Page Collection

Page Collection Headline

Subhead goes here.

Lorem Ipsum Dolor Sit Amet Consectetur

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.

Read More

Adipiscing Elit Sed

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.

Read More

Do Eiusmod Tempor Incididunt Ut

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.

Read More

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.

Read More

Put additional info or links here.

Copy

Content Model and Styling Guidelines

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

General Guidelines

  • If your content doesn’t have the required elements listed below, use a different component. If you don’t have blurbs for each item, for example, consider using the Action Hero Two-Column component with a simple list of the items you want to feature in the content region on the right.

Content-Specific Guidelines

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

Use a consistent style for your images. Don’t make one image a logo and others photos.

Use a consistent aspect ratio for photos. Using different aspect ratios causes your content to become visually unbalanced and disjointed. If you use logos for your thumbnail images, make sure the images have the same bounding box size ratio and consistent padding.

Don’t put text over thumbnail images. This will Always follow our Accessibility Guidelines.

When selecting thumbnail images, always follow our photography guidelines.
Item Headers* Maximum of 255 characters

Use a consistent amount of content for headlines and blurbs for each featured item.
Item body* Maximum of 255 characters A brief description letting the user know what they can expect on the page.
Item CTA* Maximum of 40 characters A button linking to the page.

* Indicates required content.

Shared CleanSlate Partial

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

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

Configuration

Name Options Description
Description A brief paragraph (255 characters or less) If copy is provided, it will be used to populate the “blurb” of the collection item you wish to pull in. Note you do this in the page properties of each page you are pulling in to the collection component, not the page that contains the collection component.