Cards

Cards are flexible container components used to group and present related content in a compact, scannable format. In the Sharjah Design System, cards help teams organize information, highlight key content, and guide users toward actions while maintaining visual consistency across digital platforms.

Purpose

  • Present collections of related content
  • Highlight key services, features, or information
  • Organize content into digestible sections
  • Support navigation or quick actions

Cards are ideal for dashboards, listings, landing pages, and content-heavy layouts where clarity and scanability are essential.

Card Types

1. Content Card

Used to present text-based information with optional supporting visuals.

Common uses:

  • Service summaries
  • Informational highlights
  • Feature descriptions

Best practices:

  • Keep content concise and focused
  • Use clear titles to describe the card purpose
  • Avoid overcrowding the card with too much information

2. Media Card

Combines imagery or icons with text to create visual emphasis.

Common uses:

  • Campaigns and promotions
  • Visual highlights
  • Media galleries

Best practices:

  • Ensure media enhances understanding
  • Maintain consistent aspect ratios
  • Avoid using text inside images where possible

3. Action Card

Designed to prompt user interaction through clear calls to action.

Common use cases:

  • Navigation shortcuts
  • Featured services
  • Call-to-action sections

Best practices:

  • Use clear, action-oriented labels
  • Limit actions to one primary action per card
  • Make the entire card clickable where appropriate

Accessibility Guidelines

  • Ensure cards are keyboard navigable when interactive
  • Use proper semantic elements for links and buttons
  • Maintain sufficient colour contrast
  • Provide clear focus states for interactive cards

Responsive Behavior

Content blocks adapt fluidly across screen sizes:

  • Cards stack vertically on smaller screens
  • Content reflows to preserve readability
  • Interactive areas remain accessible on touch devices