# Breakpoints Reference for the responsive breakpoints used across the UX4G Design System. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-breakpoints--introduction ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Breakpoints. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Breakpoints Reference

Available responsive breakpoints and their corresponding class infixes based on our container dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large 2xl ≥1400px
``` React: ```jsx import React from 'react'; const BreakpointsExample1Demo = () => ( <>
Utilities

Breakpoints Reference

Available responsive breakpoints and their corresponding class infixes based on our container dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large 2xl ≥1400px
); export default BreakpointsExample1Demo; ``` Angular: ```html
Utilities

Breakpoints Reference

Available responsive breakpoints and their corresponding class infixes based on our container dimensions.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Breakpoint Class infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large 2xl ≥1400px
``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.