Cards
Cards contain content and actions related to a single topic.
Examples
Cards — Solid (3 in a Row)
Example
Ignacio
Request, check the status, renew, and pay fines for Gleeson Library materials.
ILLiad
Request and check the status of materials from other libraries and scans from Gleeson Library.
<!-- Cards — Solid (3 in a Row) --> | |
<div class="panel-group cards three"> | |
<div class="panel panel-card lime"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Ignacio</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Request, check the status, renew, and pay fines for Gleeson Library materials.</p> | |
</div> | |
<a class="panel-link" href="https://ignacio.usfca.edu/patroninfo"><span class="text">Login to My Library Record</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
<div class="panel panel-card orange"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">ILLiad</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Request and check the status of materials from other libraries and scans from Gleeson Library.</p> | |
</div> | |
<a class="panel-link" href="https://usfca.illiad.oclc.org/illiad/logon.html"><span class="text">Login to Illiad</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
<div class="panel panel-card turquoise"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">RefWorks</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Access your saved citations and manage your bibliography.</p> | |
</div> | |
<a class="panel-link" href="https://library.usfca.edu/refworks"><span class="text">Login to RefWorks</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
</div> |
Cards — Solid (2 in a Row)
Example
Ignacio
Request, check the status, renew, and pay fines for Gleeson Library materials.
Illiad
Request and check the status of materials from other libraries and scans from Gleeson Library.
<!-- Cards — Solid (2 in a Row) --> | |
<div class="panel-group cards two"> | |
<div class="panel panel-card blue"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Ignacio</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Request, check the status, renew, and pay fines for Gleeson Library materials.</p> | |
</div> | |
<a class="panel-link" href="https://ignacio.usfca.edu/patroninfo"><span class="text">Login to My Library Record</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
<div class="panel panel-card orange"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Illiad</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Request and check the status of materials from other libraries and scans from Gleeson Library.</p> | |
</div> | |
<a class="panel-link" href="https://usfca.illiad.oclc.org/illiad/logon.html"><span class="text">Login to Illiad</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
<div class="panel panel-card red"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">MyEBSCO Folders</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Access your Fusion & EBSCO saved articles and searches.</p> | |
</div> | |
<a class="panel-link" href=""><span class="text">Login to MyEBSCO Folders</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
<div class="panel panel-card olive"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">RefWorks</h4> | |
</div> | |
<div class="panel-body"> | |
<p>Access your saved citations and manage your bibliography.</p> | |
</div> | |
<a class="panel-link" href="https://library.usfca.edu/refworks"><span class="text">Login to RefWorks</span><i class="fa-regular fa-chevron-right"></i></a> | |
</div> | |
</div> |
Cards — Image (3 in a Row)
Example

Community Engagement Guides
We are creating curated research guides for ADEI and social justice resources.

Collection Development Diversity Statement
We are dedicated to building equitable and accessible collections.

Harmful Language Statement
We are confronting harmful language in our catalog records and finding aids.
<!-- Cards — Image (3 in a Row) --> | |
<div class="panel-group three v-cards-image"> | |
<a href="https://library.usfca.edu/research-guides/community-engagement" class="panel v-panel-card-image turquoise"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/go-read-2022.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Community Engagement Guides</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are creating curated research guides for ADEI and social justice resources.</p> | |
</div> | |
</div> | |
</a> | |
<a href="https://library.usfca.edu/collections/collection-development-diversity-statement" class="panel v-panel-card-image orange"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/books-cdds.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Collection Development Diversity Statement</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are dedicated to building equitable and accessible collections.</p> | |
</div> | |
</div> | |
</a> | |
<a href="https://library.usfca.edu/harmful-language-statement" class="panel v-panel-card-image red"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/cropped-atrium.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Harmful Language Statement</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are confronting harmful language in our catalog records and finding aids.</p> | |
</div> | |
</div> | |
</a> | |
</div> |
Cards — Image (2 in a Row)
Example

Community Engagement Guides
We are creating curated research guides for ADEI and social justice resources.

Collection Development Diversity Statement
We are dedicated to building equitable and accessible collections.

Harmful Language Statement
We are confronting harmful language in our catalog records and finding aids.

Gleeson Gleanings Blog
We regularly highlight our ADEI-related resources for heritage and identity recognition/awareness months.
<!-- Cards — Image (2 in a Row) --> | |
<div class="panel-group two v-cards-image"> | |
<a href="https://library.usfca.edu/research-guides/community-engagement" class="panel v-panel-card-image turquoise"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/go-read-2022.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Community Engagement Guides</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are creating curated research guides for ADEI and social justice resources.</p> | |
</div> | |
</div> | |
</a> | |
<a href="https://library.usfca.edu/collections/collection-development-diversity-statement" class="panel v-panel-card-image orange"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/books-cdds.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Collection Development Diversity Statement</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are dedicated to building equitable and accessible collections.</p> | |
</div> | |
</div> | |
</a> | |
<a href="https://library.usfca.edu/harmful-language-statement" class="panel v-panel-card-image red"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/cropped-atrium.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Harmful Language Statement</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We are confronting harmful language in our catalog records and finding aids.</p> | |
</div> | |
</div> | |
</a> | |
<a href="https://usfblogs.usfca.edu/gleeson-gleanings" class="panel v-panel-card-image blue"> | |
<img class="panel-image" src="https://libapps.s3.amazonaws.com/accounts/113182/images/img_1587.jpg"> | |
<div class="panel-text-container"> | |
<div class="panel-heading"> | |
<h4 class="panel-title">Gleeson Gleanings Blog</h4> | |
</div> | |
<div class="panel-body"> | |
<p>We regularly highlight our ADEI-related resources for heritage and identity recognition/awareness months.</p> | |
</div> | |
</div> | |
</a> | |
</div> |
Usage
- Platforms — Cards can be used in LibGuides LibAnswers LibCal
- Permission level — Cards can be used by Regular and Admin users
Content Guidelines
- Brevity — Keep card content brief and focused
- Clarity — Headings, text, and links should be descriptive and meaningful
- Images — Use high quality images with a ratio of 16:9 for cards that require an image
Best Practices
- Colors — Cards can be
lime
orange
turquoise
olive
red
blue
- Placement — Use cards in the main content area of webpages; do not use cards in the side navigation area of webpages
- Groups — Use cards in groups of two or more; do not use a single card
- Responsive layout — Groups of cards sit horizontally on large screens and stack vertically on small screens
Accessibility
- Labeled elements — Cards use semantic HTML (e.g.
<img>
<a>
etc.) to ensure they are accessible to assistive technologies- Action required: Manually adjust your HTML heading levels when using cards; do not skip heading levels
- Alt text — Cards use alt text for images that are included within the component
- Action required: Manually input alt text for images when using cards
- Color contrast — Card colors and text color meet WCAG contrast guidelines
- Keyboard navigation — Cards are navigable by keyboards and have clearly defined focus indicators