Skip to main content

Page Collection - Colored Boxes

Shared Partial Name:

wvu-page-collection-colored-boxes

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 1: Standard Colored Boxes

Page Collection Headline

Subhead goes here.

Put additional info or links here.

Example 2: Standard Colored Boxes (2-Color)

Page Collection Headline

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.

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.

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.

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.

Example 3: Standard Colored Boxes (Multi-Color)

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.

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.

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.

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.

Put additional info or links here.

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.

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 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.

* 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-colored-boxes 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.