Skip to main content

Cards

Shared Partial Name:

wvu-cards

When to Use

Feature a collection of items in the same format, for example a thumbnail, header, blurb, and call to action, that users can scan quickly.

Example: Standard Cards

Cards 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

Put additional info or links here.

Content Model and Styling Guidelines

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

Content-Specific Guidelines

Content Max Characters Description
Header 56 A headline introducing the collection.
Subhead 56 Additional info about the collection.
Item Thumbnails N/A

Use the same aspect ratio for each thumbnail image.

Use the same style for each thumbnail image. For example, don’t use a logo for one and a photo for another.

Don’t include text in thumbnail images.

Always follow our Phography Guidelines when choosing images.

Item Headers* 56 The title of the featured item.
Item Blurbs* 255 What the user can expect to find when visiting the page.
Item Call to Actions* 16 The action the user should take e.g. “Read More”.
Postscript 1-2 Sentences Include a link to an external page with additional info or a full list of items.

* Indiates required content.

Shared CleanSlate Partial

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

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