Pages

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.

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.

View Code

Copy


<section id="page-collection-1" aria-labelledby="page-collection-1-label" class=" py-5 ">  
  <div class="wvu-z-index-content">
    <div class="container wvu-z-index-content">        
      <h2 id="page-collection-1-label" class="display-3 wvu-shout text-wvu-blue">Page Collection Headline</h2>
      <p class="h3 helvetica-neue-light text-wvu-blue mb-4">Subhead goes here.</p>      
      <div class="row justify-content-start">          
        <div class="col-sm-6 col-lg-3 mb-4">              
          <div class="mb-2 position-relative">                
            <a aria-hidden="true" tabindex="-1" title="Read More: Lorem Ipsum Dolor Sit Amet Consectetur" href="https://designsystem.wvu.edu/people/lorem-ipsum-dolor-sit-amet-consectetur">
              <img class="card-img-top" src="/files/18b26708-f116-4461-a7f8-4ab4fb42dd6a/960x640.webp?cb=15cadd299a3d5903e84cc54fc90da3a7" alt="">
            </a>
          </div>            
          <div>
            <h3 class="card-title" id="lorem-ipsum-dolor-sit-amet-consectetur-page-collection-1-139968">
              <a title="Read More: Lorem Ipsum Dolor Sit Amet Consectetur" class="h2 d-block wvu-shout wvu-bar mb-2 text-decoration-none text-wvu-blue" href="https://designsystem.wvu.edu/people/lorem-ipsum-dolor-sit-amet-consectetur">Lorem Ipsum Dolor Sit Amet Consectetur</a>
            </h3>
            <p class="">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.</p>                
            <a class="btn btn-primary btn-sm" href="https://designsystem.wvu.edu/people/lorem-ipsum-dolor-sit-amet-consectetur">Read More
              <span class="visually-hidden">: Lorem Ipsum Dolor Sit Amet Consectetur</span>
            </a>            
          </div>
        </div>          
        <div class="col-sm-6 col-lg-3 mb-4">              
          <div class="mb-2 position-relative">                
            <a aria-hidden="true" tabindex="-1" title="Read More: Adipiscing Elit Sed" href="https://designsystem.wvu.edu/people/adipiscing-elit-sed">
              <img class="card-img-top" src="/files/9ae280c8-f32e-4ce6-bc95-3e3f7d404792/960x640.webp?cb=63996a30122d53efe91e1c09e7e1a3d4" alt="">
            </a>
          </div>            
          <div>
            <h3 class="card-title" id="adipiscing-elit-sed-page-collection-1-139980">
              <a title="Read More: Adipiscing Elit Sed" class="h2 d-block wvu-shout wvu-bar mb-2 text-decoration-none text-wvu-blue" href="https://designsystem.wvu.edu/people/adipiscing-elit-sed">Adipiscing Elit Sed</a>
            </h3>
            <p class="">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.</p>                
            <a class="btn btn-primary btn-sm" href="https://designsystem.wvu.edu/people/adipiscing-elit-sed">Read More
              <span class="visually-hidden">: Adipiscing Elit Sed</span>
            </a>            
          </div>
        </div>          
        <div class="col-sm-6 col-lg-3 mb-4">              
          <div class="mb-2 position-relative">                
            <a aria-hidden="true" tabindex="-1" title="Read More: Do Eiusmod Tempor Incididunt Ut" href="https://designsystem.wvu.edu/people/do-eiusmod-tempor-incididunt-ut">
              <img class="card-img-top" src="/files/60d8e83f-4bec-48ac-bdaf-7e16dc891c85/960x640.webp?cb=e8d55e8d74d0c645672b8b17d5d56e2c" alt="Teacher talking with students">
            </a>
          </div>            
          <div>
            <h3 class="card-title" id="do-eiusmod-tempor-incididunt-ut-page-collection-1-140020">
              <a title="Read More: Do Eiusmod Tempor Incididunt Ut" class="h2 d-block wvu-shout wvu-bar mb-2 text-decoration-none text-wvu-blue" href="https://designsystem.wvu.edu/people/do-eiusmod-tempor-incididunt-ut">Do Eiusmod Tempor Incididunt Ut</a>
            </h3>
            <p class="">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.</p>                
            <a class="btn btn-primary btn-sm" href="https://designsystem.wvu.edu/people/do-eiusmod-tempor-incididunt-ut">Read More
              <span class="visually-hidden">: Do Eiusmod Tempor Incididunt Ut</span>
            </a>            
          </div>
        </div>          
        <div class="col-sm-6 col-lg-3 mb-4">              
          <div class="mb-2 position-relative">                
            <a aria-hidden="true" tabindex="-1" title="Read More: Labore et Dolore Magna Aliqua" href="https://designsystem.wvu.edu/people/labore-et-dolore-magna-aliqua">
              <img class="card-img-top" src="/files/89562ff0-c322-4a8b-b464-39ca3f58ecf4/960x640.webp?cb=5509a870d444fa1d974cc41d6537663a" alt="Mountaineer">
            </a>
          </div>            
          <div>
            <h3 class="card-title" id="labore-et-dolore-magna-aliqua-page-collection-1-140021">
              <a title="Read More: Labore et Dolore Magna Aliqua" class="h2 d-block wvu-shout wvu-bar mb-2 text-decoration-none text-wvu-blue" href="https://designsystem.wvu.edu/people/labore-et-dolore-magna-aliqua">Labore et Dolore Magna Aliqua</a>
            </h3>
            <p class="">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.</p>                
            <a class="btn btn-primary btn-sm" href="https://designsystem.wvu.edu/people/labore-et-dolore-magna-aliqua">Read More
              <span class="visually-hidden">: Labore et Dolore Magna Aliqua</span>
            </a>            
          </div>
        </div>      
      </div>        
      <div class="mt-2">          
        <p class="mb-0">Put additional info or 
          <a href="#">links</a> here.
        </p>
      </div>    
    </div>
  </div>
</section>

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.

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.

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.

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-page-collection"  %}

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 page-collection 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”.

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.

Active Campus Alert

Shared Partial Name:

When to Use

Example: Standard Page Collection

Page Collection Headline

Lorem Ipsum Dolor Sit Amet Consectetur

Adipiscing Elit Sed

Do Eiusmod Tempor Incididunt Ut

Labore et Dolore Magna Aliqua

Content Model and Styling Guidelines

General Guidelines

Content-Specific Guidelines

Shared CleanSlate Partial

Collection Parameters

General Component Parameters

Code Example

Setup

Collection Parameters

General Component Configuration

Configuration