Design System

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