Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
عربي Government of Sharjah
Home
Typography Colour 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 Colour System Iconography
Buttons Responsive Design Tokens

Results

Search the site for “”

FAQs

The FAQs component is used to present frequently asked questions in a clear, structured, and easy-to-scan format. It helps users quickly find answers without overwhelming them with long content, improving comprehension and reducing the need for additional support.

Purpose

  • Answer common user questions
  • Reduce support requests
  • Clarify services, processes, or policies
  • Present expandable content in a compact layout

FAQs are ideal for service pages, help sections, onboarding flows, and informational content.

Component Structure

Each FAQ item consists of:

  • Question header – clickable area containing the question text
  • Toggle indicator – icon or arrow indicating expand/collapse state
  • Answer content – hidden by default and revealed when selected

Accessibility Guidelines

  • FAQ headers must be keyboard focusable
  • Use appropriate ARIA roles (button, aria-expanded)
  • Ensure focus states are clearly visible
  • Expand/collapse behaviour must work with keyboard and screen readers

Responsive Behaviour

  • FAQ items stack vertically on all screen sizes
  • Touch targets remain large and accessible on mobile
  • Animations remain smooth and do not disrupt content flow
Previous Filters Next Media carousel