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 (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 — 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 (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.
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
limeorangeturquoiseoliveredblue - 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