Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Color system Iconography Layout and spacing Input & fields Buttons Responsive Accessibility Design tokens Content design
Get started UI Components Templates UI Kit
Roadmap

Links

Home Getting Started UI Kit

Guidelines

Typography Color system Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

Services

The Services component is designed to present government services in a clear, organized, and user-friendly manner. It helps users quickly discover, browse, and access services through structured layouts that improve navigation and reduce the time required to find relevant information. The Sharjah Design System provides three service layouts, allowing teams to choose the most appropriate presentation based on content, user needs, and page objectives while maintaining a consistent experience across government websites.

When to Use

  • Use as mandatory section in homepage
  • Present government services in a structured format
  • Help users browse services by category
  • Promote frequently used or priority services
  • Improve discoverability through categorized navigation

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

Service Layouts

1. Services by Category

This layout groups services under predefined categories, making it easier for users to browse and locate the service they need.

Common uses:

  • Complete service directories
  • Entity service listings
  • Department-specific services

Characteristics:

  • Category title in tabs
  • Services displayed in a grid
  • Consistent service cards
  • "View All" action

2. Services by Category with Most Used Services

This variation combines categorized services with a dedicated section highlighting the most frequently accessed services. It enables users to quickly access popular services while still providing a structured browsing experience.

Common uses:

  • Government portals
  • High-traffic service pages
  • Citizen-facing websites

Characteristics:

  • Featured "Most Used Services" section
  • Categorized service groups
  • Consistent service cards
  • Balanced hierarchy between featured and categorized content

3. Service Categories

This layout focuses on service categories rather than individual services. Each category is presented as a card that directs users to a dedicated category page containing the related services.

Common use cases:

  • Homepage navigation
  • Service landing pages
  • Large service ecosystems

Characteristics:

  • One card per category
  • Category title
  • Short description (optional)
  • "Learn More" action
  • Clear visual hierarchy

Anatomy

  • Section title
  • Section description (optional)
  • Category heading
  • Service or category cards
  • Service icon (optional)
  • Short description (optional)
  • Primary action
  • View All / Learn More link (optional)

Interaction Behavior

  • Service cards navigate directly to the selected service.
  • Category cards open the corresponding category page.
  • Hover and focus states clearly indicate interactivity.
  • Layout adapts automatically to different screen sizes.

Accessibility Guidelines

  • All cards must be fully keyboard accessible.
  • Service names should be descriptive and meaningful.
  • Icons should not be the only method of conveying information.
  • Interactive elements must provide visible focus indicators.
  • Ensure sufficient colour contrast for text and controls.

Responsive Behavior

  • Cards automatically reflow into responsive grid layouts.
  • Categories stack vertically on smaller screens.
  • Touch targets meet recommended accessibility sizes.
  • Layout spacing remains consistent across breakpoints.
Previous Cards Next Filters