Skip to Main Content

Design System

Administration, layout, components, and content guide for the Gleeson Library website.

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.

Login to My Library Record

ILLiad

Request and check the status of materials from other libraries and scans from Gleeson Library.

Login to Illiad

RefWorks

Access your saved citations and manage your bibliography.

Login to RefWorks
<!-- 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.

Login to My Library Record

Illiad

Request and check the status of materials from other libraries and scans from Gleeson Library.

Login to Illiad

MyEBSCO Folders

Access your Fusion & EBSCO saved articles and searches.

Login to MyEBSCO Folders

RefWorks

Access your saved citations and manage your bibliography.

Login to RefWorks
<!-- 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) -->
<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) -->
<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

  1. 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
  2. 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
  3. Color contrast — Card colors and text color meet WCAG contrast guidelines
  4. Keyboard navigation — Cards are navigable by keyboards and have clearly defined focus indicators
Ask A Librarian