Responsive

We are using the same breakpoints from Tailwind CSS

Users access government services through different devices, screen sizes, orientations, and input methods. Responsive design ensures that essential information and actions remain available and easy to use in every context.

The Sharjah Design System follows a mobile-first approach. Interfaces should begin with the smallest supported screen and progressively adapt as more space becomes available.

Desktop layouts should expand and enhance the experience without changing the core meaning or functionality.

Breakpoints define the screen widths where layouts or component behaviors may change. The Sharjah Design System aligns its responsive structure with Tailwind’s breakpoint model to ensure consistency between design specifications and implementation.

Breakpoints should be used when the content or layout requires adaptation, not to target specific devices. Teams should avoid designing separately for individual phone or tablet models.

The responsive grid provides a flexible structure for organizing page content. Containers, columns, gutters, and margins adapt according to the available screen width.

Layouts should reflow naturally without creating crowded content or excessive empty space.