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: Lorem Ipsum Dolor Sit Amet ConsecteturAdipiscing 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: Adipiscing Elit SedDo 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 UtLabore 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 AliquaPut additional info or links here.
<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>