Card

Cards are flexible content containers that act as a link and organize related information in a structured, visually appealing format. Use them to link to documents and featured content. Cards support various layouts, making them ideal for content grids, featured sections, and action displays across many different content types.

Do

Use consistent card styling across similar content types to create visual cohesion and user expectations.
Include clear, descriptive titles that help users quickly understand the card's content and the action they trigger.
Use high-quality, relevant images that support and enhance the card's content when visual elements are included.
Maintain appropriate content hierarchy with proper heading tags and logical information flow.
Keep content concise while providing enough context for users to make informed decisions.
Ensure cards within a row are the same height in grid layouts for better visual alignment and professional appearance.
Test responsive behavior to ensure cards work well across different screen sizes and orientations.

Don't

Don't overcrowd cards with too much information that makes them difficult to scan and understand.
Don't use inconsistent styling within the same card group or content section.
Don't forget alt text for images or proper semantic markup for accessibility.
Don't make cards too narrow on mobile devices where content becomes cramped and hard to read.
Don't use generic or vague titles that don't clearly communicate the card's purpose or destination.
Don't mix different card heights in grid layouts without considering the visual impact.
Don't neglect loading states for cards with dynamic content or images.

Basic Card

Standard card component featuring essential elements including title, body text, and action link. Demonstrates the fundamental card pattern with clean typography and clear information hierarchy. Perfect for displaying basic information, announcements, or simple content blocks that don't require visual enhancement.

Basic Card Example

This is a simple card with just a title and body text. Cards are flexible content containers that can display various types of information in an organized, visually appealing format.

Thumbnail Card

Thumbnail cards include an image, title, and descriptive text. The top-positioned adds visual appeal while the title and text provide context for where the card links. Perfect for showcasing initiative content or any content collection where visual thumbnails help users quickly identify and access different areas of interest. They feature a responsive design with a 16:9 aspect ratio for the thumbnail image.

Thumbnails can display in a grid with either 2 or 3 cards per row on desktop. On mobile, the rows of cards stack into a single column to fit smaller viewports more appropriately.

Worker cutting lumber at a construction site

Accessibility Best Practices

Screen Reader Support

Semantic HTML structure: Cards use proper heading hierarchy and semantic markup for clear content organization.
Descriptive link text: Action buttons and links provide clear context about their destination or function.
Alternative text for images: All card images include meaningful alt text that describes their content and purpose.
Logical reading order: Card content flows logically for users navigating with assistive technologies.

Keyboard Navigation

Full keyboard access: All interactive elements within cards are accessible via Tab key navigation.
Logical tab order: Focus moves through card elements in a predictable, meaningful sequence.
Clear focus indicators: Visual focus states help keyboard users identify their current position within cards.
Action accessibility: Card links and buttons are easily distinguishable and accessible to keyboard users.

Visual Accessibility

High contrast ratios: All text meets WCAG AA contrast requirements against card backgrounds.
Multiple visual cues: Information hierarchy is conveyed through typography, spacing, and layout, not color alone.
Readable typography: Font sizes and line heights ensure card content remains legible for users with visual impairments.
Responsive design: Cards maintain accessibility and usability across different screen sizes and zoom levels.

Content Guidelines

Clear information hierarchy: Use titles, subtitles, and body text to create scannable content structure.
Concise, meaningful content: Provide enough information for users to understand value without overwhelming them.
Action-oriented language: Use specific, descriptive text for links and buttons that clearly indicate their purpose.
Consistent terminology: Maintain consistent language and formatting across similar card types.

Implementation Considerations

Responsive grid systems: Use appropriate column classes and spacing for different screen sizes.
Image optimization: Ensure card images are properly sized and optimized for web performance.
Equal height handling: Implement CSS solutions for maintaining consistent card heights in grid layouts.
Loading states: Consider placeholder content or skeleton screens for cards with dynamic content.

Layout Variations

Basic text cards: Clean, typography-focused cards for straightforward information display.
Image-enhanced cards: Cards with top, bottom, or background images for visual interest.
Horizontal cards: Side-by-side image and content layout for featured content or detailed information.
Grid arrangements: Multiple cards organized in responsive columns for content galleries or service directories.

Card Elements

Headers and footers: Optional sections for additional context, metadata, or secondary actions.
Media integration: Support for images, videos, or other media content with proper aspect ratios.
Action buttons: Primary and secondary buttons for user interactions and navigation.
Utility classes: Flexible styling options for borders, spacing, and visual customization.

Do

Don't