# Gap Utilities for controlling the spacing between grid and flex items. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-gap--introduction ## Variants documented in Storybook - GapShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-gap--gapshowcase ## 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 Gap. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Gap Showcase — Section Gap (Layout Spacing) HTML: ```html

...

``` React: ```jsx import React from 'react'; const GapExample1Demo = () => ( <>

...

); export default GapExample1Demo; ``` Angular: ```html

...

``` ### 2. Gap Showcase — Stack Gap HTML: ```html

...

``` React: ```jsx import React from 'react'; const GapExample2Demo = () => ( <>

...

); export default GapExample2Demo; ``` Angular: ```html

...

``` ### 3. Gap Showcase — Inline Gap HTML: ```html

...

``` React: ```jsx import React from 'react'; const GapExample3Demo = () => ( <>

...

); export default GapExample3Demo; ``` Angular: ```html

...

``` ### 4. Gap Showcase — Responsive Gaps HTML: ```html

Item 1

Item 2

Item 3

Item 4

``` React: ```jsx import React from 'react'; const GapExample4Demo = () => ( <> {/* Responsive Section Gap */}

Item 1

Item 2

Item 3

Item 4

); export default GapExample4Demo; ``` Angular: ```html

Item 1

Item 2

Item 3

Item 4

``` ### 5. Introduction — Introduction HTML: ```html

Utilities

Gap Utilities Reference

A complete reference of all gap (section, stack, and inline) utility classes.

Comprehensive CSS Class Reference

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

Section Gap (Layout)

Format: ux4g-gap-{size}

Gap None (0px) ux4g-gap-none

Gap Extra Small (24px) ux4g-gap-xs

Gap Small (32px) ux4g-gap-s

Gap Medium (48px) ux4g-gap-m

Gap Large (56px) ux4g-gap-l

Gap Extra Large (64px) ux4g-gap-xl

Gap 2X Large (80px) ux4g-gap-2xl

Responsive Section Gap

Format: ux4g-gap-{breakpoint}-{size}

Gap SM None (0px) ux4g-gap-sm-none

Gap SM Small (32px) ux4g-gap-sm-s

Gap SM Medium (48px) ux4g-gap-sm-m

Gap SM Large (56px) ux4g-gap-sm-l

Gap SM Extra Large (64px) ux4g-gap-sm-xl

Gap SM 2X Large (80px) ux4g-gap-sm-2xl

Gap MD None (0px) ux4g-gap-md-none

Gap MD Small (32px) ux4g-gap-md-s

Gap MD Medium (48px) ux4g-gap-md-m

Gap MD Large (56px) ux4g-gap-md-l

Gap MD Extra Large (64px) ux4g-gap-md-xl

Gap LG None (0px) ux4g-gap-lg-none

Gap LG Small (32px) ux4g-gap-lg-s

Gap LG Medium (48px) ux4g-gap-lg-m

Gap LG Large (56px) ux4g-gap-lg-l

Gap LG Extra Large (64px) ux4g-gap-lg-xl

Gap XL None (0px) ux4g-gap-xl-none

Gap XL Medium (48px) ux4g-gap-xl-m

Gap XL Large (56px) ux4g-gap-xl-l

Gap XL Extra Large (64px) ux4g-gap-xl-xl

Gap XL 2X Large (80px) ux4g-gap-xl-2xl

Stack Gap (Vertical)

Format: ux4g-stack-gap-{size}

Stack Gap None (0px) ux4g-stack-gap-none

Stack Gap 2X Small (4px) ux4g-stack-gap-2xs

Stack Gap Extra Small (8px) ux4g-stack-gap-xs

Stack Gap Small (12px) ux4g-stack-gap-s

Stack Gap Medium (16px) ux4g-stack-gap-m

Stack Gap Large (24px) ux4g-stack-gap-l

Inline Gap (Horizontal)

Format: ux4g-inline-gap-{size}

Inline Gap None (0px) ux4g-inline-gap-none

Inline Gap 2X Small (2px) ux4g-inline-gap-2xs

Inline Gap Extra Small (4px) ux4g-inline-gap-xs

Inline Gap Small (8px) ux4g-inline-gap-s

Inline Gap Medium (12px) ux4g-inline-gap-m

Inline Gap Large (16px) ux4g-inline-gap-l

``` React: ```jsx import React from 'react'; const GapExample5Demo = () => ( <>

Utilities

Gap Utilities Reference

A complete reference of all gap (section, stack, and inline) utility classes.

Comprehensive CSS Class Reference

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

{/* Section Gap */}

Section Gap (Layout)

Format: ux4g-gap-{size}

Gap None (0px) ux4g-gap-none

Gap Extra Small (24px) ux4g-gap-xs

Gap Small (32px) ux4g-gap-s

Gap Medium (48px) ux4g-gap-m

Gap Large (56px) ux4g-gap-l

Gap Extra Large (64px) ux4g-gap-xl

Gap 2X Large (80px) ux4g-gap-2xl

{/* Responsive Section Gap */}

Responsive Section Gap

Format: ux4g-gap-{breakpoint}-{size}

Gap SM None (0px) ux4g-gap-sm-none

Gap SM Small (32px) ux4g-gap-sm-s

Gap SM Medium (48px) ux4g-gap-sm-m

Gap SM Large (56px) ux4g-gap-sm-l

Gap SM Extra Large (64px) ux4g-gap-sm-xl

Gap SM 2X Large (80px) ux4g-gap-sm-2xl

Gap MD None (0px) ux4g-gap-md-none

Gap MD Small (32px) ux4g-gap-md-s

Gap MD Medium (48px) ux4g-gap-md-m

Gap MD Large (56px) ux4g-gap-md-l

Gap MD Extra Large (64px) ux4g-gap-md-xl

Gap LG None (0px) ux4g-gap-lg-none

Gap LG Small (32px) ux4g-gap-lg-s

Gap LG Medium (48px) ux4g-gap-lg-m

Gap LG Large (56px) ux4g-gap-lg-l

Gap LG Extra Large (64px) ux4g-gap-lg-xl

Gap XL None (0px) ux4g-gap-xl-none

Gap XL Medium (48px) ux4g-gap-xl-m

Gap XL Large (56px) ux4g-gap-xl-l

Gap XL Extra Large (64px) ux4g-gap-xl-xl

Gap XL 2X Large (80px) ux4g-gap-xl-2xl

{/* Stack Gap */}

Stack Gap (Vertical)

Format: ux4g-stack-gap-{size}

Stack Gap None (0px) ux4g-stack-gap-none

Stack Gap 2X Small (4px) ux4g-stack-gap-2xs

Stack Gap Extra Small (8px) ux4g-stack-gap-xs

Stack Gap Small (12px) ux4g-stack-gap-s

Stack Gap Medium (16px) ux4g-stack-gap-m

Stack Gap Large (24px) ux4g-stack-gap-l

{/* Inline Gap */}

Inline Gap (Horizontal)

Format: ux4g-inline-gap-{size}

Inline Gap None (0px) ux4g-inline-gap-none

Inline Gap 2X Small (2px) ux4g-inline-gap-2xs

Inline Gap Extra Small (4px) ux4g-inline-gap-xs

Inline Gap Small (8px) ux4g-inline-gap-s

Inline Gap Medium (12px) ux4g-inline-gap-m

Inline Gap Large (16px) ux4g-inline-gap-l

); export default GapExample5Demo; ``` Angular: ```html

Utilities

Gap Utilities Reference

A complete reference of all gap (section, stack, and inline) utility classes.

Comprehensive CSS Class Reference

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

Section Gap (Layout)

Format: ux4g-gap-{size}

Gap None (0px) ux4g-gap-none

Gap Extra Small (24px) ux4g-gap-xs

Gap Small (32px) ux4g-gap-s

Gap Medium (48px) ux4g-gap-m

Gap Large (56px) ux4g-gap-l

Gap Extra Large (64px) ux4g-gap-xl

Gap 2X Large (80px) ux4g-gap-2xl

Responsive Section Gap

Format: ux4g-gap-{breakpoint}-{size}

Gap SM None (0px) ux4g-gap-sm-none

Gap SM Small (32px) ux4g-gap-sm-s

Gap SM Medium (48px) ux4g-gap-sm-m

Gap SM Large (56px) ux4g-gap-sm-l

Gap SM Extra Large (64px) ux4g-gap-sm-xl

Gap SM 2X Large (80px) ux4g-gap-sm-2xl

Gap MD None (0px) ux4g-gap-md-none

Gap MD Small (32px) ux4g-gap-md-s

Gap MD Medium (48px) ux4g-gap-md-m

Gap MD Large (56px) ux4g-gap-md-l

Gap MD Extra Large (64px) ux4g-gap-md-xl

Gap LG None (0px) ux4g-gap-lg-none

Gap LG Small (32px) ux4g-gap-lg-s

Gap LG Medium (48px) ux4g-gap-lg-m

Gap LG Large (56px) ux4g-gap-lg-l

Gap LG Extra Large (64px) ux4g-gap-lg-xl

Gap XL None (0px) ux4g-gap-xl-none

Gap XL Medium (48px) ux4g-gap-xl-m

Gap XL Large (56px) ux4g-gap-xl-l

Gap XL Extra Large (64px) ux4g-gap-xl-xl

Gap XL 2X Large (80px) ux4g-gap-xl-2xl

Stack Gap (Vertical)

Format: ux4g-stack-gap-{size}

Stack Gap None (0px) ux4g-stack-gap-none

Stack Gap 2X Small (4px) ux4g-stack-gap-2xs

Stack Gap Extra Small (8px) ux4g-stack-gap-xs

Stack Gap Small (12px) ux4g-stack-gap-s

Stack Gap Medium (16px) ux4g-stack-gap-m

Stack Gap Large (24px) ux4g-stack-gap-l

Inline Gap (Horizontal)

Format: ux4g-inline-gap-{size}

Inline Gap None (0px) ux4g-inline-gap-none

Inline Gap 2X Small (2px) ux4g-inline-gap-2xs

Inline Gap Extra Small (4px) ux4g-inline-gap-xs

Inline Gap Small (8px) ux4g-inline-gap-s

Inline Gap Medium (12px) ux4g-inline-gap-m

Inline Gap Large (16px) ux4g-inline-gap-l

``` ## CSS class reference The following CSS partials define the Gap utility classes used in the examples above: ### gap.utilities.css ```css /* ========================================= GAP UTILITIES (Semantic) Controls spacing between grid/flex items. 1. Section Gap (Layout) 2. Stack Gap (Vertical) 3. Inline Gap (Horizontal) ========================================= */ /* 1.1 Section Gap (Layout Spacing) */ .ux4g-gap-none { gap: var(--ux4g-section-none); } .ux4g-gap-xs { gap: var(--ux4g-section-xs); } .ux4g-gap-s { gap: var(--ux4g-section-s); } .ux4g-gap-m { gap: var(--ux4g-section-m); } .ux4g-gap-l { gap: var(--ux4g-section-l); } .ux4g-gap-xl { gap: var(--ux4g-section-xl); } .ux4g-gap-2xl { gap: var(--ux4g-section-2xl); } /* 1.2 Stack Gap (Vertical Rhythm) */ .ux4g-stack-gap-none { row-gap: var(--ux4g-stack-none); } .ux4g-stack-gap-2xs { row-gap: var(--ux4g-stack-2xs); } .ux4g-stack-gap-xs { row-gap: var(--ux4g-stack-xs); } .ux4g-stack-gap-s { row-gap: var(--ux4g-stack-s); } .ux4g-stack-gap-m { row-gap: var(--ux4g-stack-m); } .ux4g-stack-gap-l { row-gap: var(--ux4g-stack-l); } /* 1.3 Inline Gap (Horizontal Flow) */ .ux4g-inline-gap-none { column-gap: var(--ux4g-inline-none); } .ux4g-inline-gap-2xs { column-gap: var(--ux4g-inline-2xs); } .ux4g-inline-gap-xs { column-gap: var(--ux4g-inline-xs); } .ux4g-inline-gap-s { column-gap: var(--ux4g-inline-s); } .ux4g-inline-gap-m { column-gap: var(--ux4g-inline-m); } .ux4g-inline-gap-l { column-gap: var(--ux4g-inline-l); } /* ================= RESPONSIVE ================= */ /* SM ≥ 576px */ @media (min-width: 576px) { .ux4g-gap-sm-none { gap: var(--ux4g-section-none); } .ux4g-gap-sm-s { gap: var(--ux4g-section-s); } .ux4g-gap-sm-m { gap: var(--ux4g-section-m); } .ux4g-gap-sm-l { gap: var(--ux4g-section-l); } .ux4g-gap-sm-xl { gap: var(--ux4g-section-xl); } .ux4g-gap-sm-2xl { gap: var(--ux4g-section-2xl); } } /* MD ≥ 768px */ @media (min-width: 768px) { .ux4g-gap-md-none { gap: var(--ux4g-section-none); } .ux4g-gap-md-s { gap: var(--ux4g-section-s); } .ux4g-gap-md-m { gap: var(--ux4g-section-m); } .ux4g-gap-md-l { gap: var(--ux4g-section-l); } .ux4g-gap-md-xl { gap: var(--ux4g-section-xl); } } /* LG ≥ 992px */ @media (min-width: 992px) { .ux4g-gap-lg-none { gap: var(--ux4g-section-none); } .ux4g-gap-lg-s { gap: var(--ux4g-section-s); } .ux4g-gap-lg-m { gap: var(--ux4g-section-m); } .ux4g-gap-lg-l { gap: var(--ux4g-section-l); } .ux4g-gap-lg-xl { gap: var(--ux4g-section-xl); } } /* XL ≥ 1200px */ @media (min-width: 1200px) { .ux4g-gap-xl-none { gap: var(--ux4g-section-none); } .ux4g-gap-xl-m { gap: var(--ux4g-section-m); } .ux4g-gap-xl-l { gap: var(--ux4g-section-l); } .ux4g-gap-xl-xl { gap: var(--ux4g-section-xl); } .ux4g-gap-xl-2xl { gap: var(--ux4g-section-2xl); } } ``` ## 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.