Component: Cards

They help users quickly scan and interact with information while maintaining a clean and organized layout. Whether used in dashboards, product listings, or social media feeds, cards enhance user experience by offering a flexible and consistent way to display content.

What's a Card?

A card is a component that groups related information into a contained layout, visually resembling a playing card. Each card serves as a self-contained unit that presents a summary of information and often provides a link or action for further interaction. Cards are designed to be modular and responsive, making them ideal for different screen sizes and user contexts.

• Container: The outer boundary that defines the card’s space.

• Header Text: The card title, usually a key identifier of the content.

• Brow Text: Metadata such as author name, date, or category. (Available on Trial Court and the Supreme Court design instance)

• Media: Images, videos, or other visual elements that enhance content presentation.

• Supporting Text: A brief description or summary.

• Buttons or Links: Calls to action (CTAs) such as “Learn More” or “Buy Now.”

• Icons: Additional interactions, such as sharing, liking, or saving content.

Examples of Cards

Cards can be used to showcase Branch Policies and Administration, or Programs that are offered, etc. 

• News Websites: Article previews with headlines, images, and brief summaries.

• Dashboards: Widgets that present key metrics or interactive controls.

Cards offer several advantages for both users and designers.

• Enhance Scannability: Information is presented in digestible chunks, making it easier to scan.

• Improve Organization: Helps structure content without overwhelming users.

• Increase Engagement: Clear CTAs and interactive elements encourage user action.

• Support Responsive Design: Cards adapt well to different screen sizes and orientations.

• Maintain Visual Consistency: Repeated card patterns create a familiar and user-friendly experience.

Usability Concerns to Consider

While cards offer many benefits, there are potential usability concerns to be mindful of.

• Overcrowding: Too much content in a single card can make it difficult to read and interact with.

• Inconsistent Sizing: Uneven card sizes disrupt visual harmony and make scanning harder.

• Unclear CTAs: If action buttons or links are not clear, users may struggle to understand what to do next.

• Excessive Scrolling: Poor card layouts can lead to unnecessary scrolling, especially on mobile.

• Performance Issues: High-resolution images and media-heavy cards can slow downloading times.

When to Use & When to Avoid

When to Use

• When presenting modular and distinct content (e.g., product listings, news articles, or dashboard widgets).

• When users need quick access to information without reading long blocks of text.

• When designing for mobile-first interfaces where flexible, stackable components are beneficial.

• When requiring consistent, repeatable layouts that improve user familiarity and interaction.

When to Avoid

• When displaying large amounts of structured data (a table or list might be a better option).

• When users need to compare multiple items side by side (grids or lists can be more effective).

• When there is limited screen space, and multiple cards may result in excessive scrolling.

• When the card design does not support key user tasks or actions, making navigation difficult.