Skip to main content

Page Collection Vertical - Icons

Shared Partial Name:

wvu-page-collection-vertical-icons

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 Page Collection Vertical With Icons

Page Collection Headline

Subhead goes here.

Ut Enim ad Minim Veniam

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: Ut Enim ad Minim Veniam

Quis Nostrud Exercitation Ullamco Laboris

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: Quis Nostrud Exercitation Ullamco Laboris

Put additional info or links here.

Example 2: Page Collection Vertical With Icons (Alternate)

Page Collection Headline

Subhead goes here.

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: Do Eiusmod Tempor Incididunt Ut

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: Labore et Dolore Magna Aliqua

Ut Enim ad Minim Veniam

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: Ut Enim ad Minim Veniam

Quis Nostrud Exercitation Ullamco Laboris

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: Quis Nostrud Exercitation Ullamco Laboris

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.
Icons* N/A

You can use icons from FontAwesome.

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