# Padding Utilities for controlling the padding of an element. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-padding--introduction ## Variants documented in Storybook - Showcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-padding--showcase ## 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 Padding. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Padding Utilities Reference

A complete reference of all padding utility classes, including every responsive variant.

Comprehensive CSS Class Reference

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

Padding (All Sides)

Format: ux4g-{property}{side}-{size}

padding-none (0px) ux4g-p-none
padding-2xs (4px) ux4g-p-2xs
padding-xs (8px) ux4g-p-xs
padding-s (12px) ux4g-p-s
padding-m (16px) ux4g-p-m
padding-l (20px) ux4g-p-l
padding-xl (24px) ux4g-p-xl
padding-2xl (32px) ux4g-p-2xl

Padding Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

padding-x-none (0px) ux4g-px-none
padding-x-2xs (4px) ux4g-px-2xs
padding-x-xs (8px) ux4g-px-xs
padding-x-s (12px) ux4g-px-s
padding-x-m (16px) ux4g-px-m
padding-x-l (20px) ux4g-px-l
padding-x-xl (24px) ux4g-px-xl
padding-x-2xl (32px) ux4g-px-2xl
padding-y-none (0px) ux4g-py-none
padding-y-2xs (4px) ux4g-py-2xs
padding-y-xs (8px) ux4g-py-xs
padding-y-s (12px) ux4g-py-s
padding-y-m (16px) ux4g-py-m
padding-y-l (20px) ux4g-py-l
padding-y-xl (24px) ux4g-py-xl
padding-y-2xl (32px) ux4g-py-2xl

Directional Padding (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

padding-top-none (0px) ux4g-pt-none
padding-top-2xs (4px) ux4g-pt-2xs
padding-top-xs (8px) ux4g-pt-xs
padding-top-s (12px) ux4g-pt-s
padding-top-m (16px) ux4g-pt-m
padding-top-l (20px) ux4g-pt-l
padding-top-xl (24px) ux4g-pt-xl
padding-top-2xl (32px) ux4g-pt-2xl
padding-top-20 (20px) ux4g-pt-20
padding-bottom-none (0px) ux4g-pb-none
padding-bottom-2xs (4px) ux4g-pb-2xs
padding-bottom-xs (8px) ux4g-pb-xs
padding-bottom-s (12px) ux4g-pb-s
padding-bottom-m (16px) ux4g-pb-m
padding-bottom-l (20px) ux4g-pb-l
padding-bottom-xl (24px) ux4g-pb-xl
padding-bottom-2xl (32px) ux4g-pb-2xl
padding-bottom-20 (20px) ux4g-pb-20
padding-left-none (0px) ux4g-pl-none
padding-left-2xs (4px) ux4g-pl-2xs
padding-left-xs (8px) ux4g-pl-xs
padding-left-s (12px) ux4g-pl-s
padding-left-m (16px) ux4g-pl-m
padding-left-l (20px) ux4g-pl-l
padding-left-xl (24px) ux4g-pl-xl
padding-left-2xl (32px) ux4g-pl-2xl
padding-left-20 (20px) ux4g-pl-20
padding-right-none (0px) ux4g-pr-none
padding-right-2xs (4px) ux4g-pr-2xs
padding-right-xs (8px) ux4g-pr-xs
padding-right-s (12px) ux4g-pr-s
padding-right-m (16px) ux4g-pr-m
padding-right-l (20px) ux4g-pr-l
padding-right-xl (24px) ux4g-pr-xl
padding-right-2xl (32px) ux4g-pr-2xl
padding-right-20 (20px) ux4g-pr-20
``` React: ```jsx import React from 'react'; const PaddingExample1Demo = () => ( <>
Utilities

Padding Utilities Reference

A complete reference of all padding utility classes, including every responsive variant.

Comprehensive CSS Class Reference

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

{/* Padding All */}

Padding (All Sides)

Format: ux4g-{property}{side}-{size}

padding-none (0px) ux4g-p-none
padding-2xs (4px) ux4g-p-2xs
padding-xs (8px) ux4g-p-xs
padding-s (12px) ux4g-p-s
padding-m (16px) ux4g-p-m
padding-l (20px) ux4g-p-l
padding-xl (24px) ux4g-p-xl
padding-2xl (32px) ux4g-p-2xl
{/* Padding Axis */}

Padding Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

padding-x-none (0px) ux4g-px-none
padding-x-2xs (4px) ux4g-px-2xs
padding-x-xs (8px) ux4g-px-xs
padding-x-s (12px) ux4g-px-s
padding-x-m (16px) ux4g-px-m
padding-x-l (20px) ux4g-px-l
padding-x-xl (24px) ux4g-px-xl
padding-x-2xl (32px) ux4g-px-2xl
padding-y-none (0px) ux4g-py-none
padding-y-2xs (4px) ux4g-py-2xs
padding-y-xs (8px) ux4g-py-xs
padding-y-s (12px) ux4g-py-s
padding-y-m (16px) ux4g-py-m
padding-y-l (20px) ux4g-py-l
padding-y-xl (24px) ux4g-py-xl
padding-y-2xl (32px) ux4g-py-2xl
{/* Directional Padding */}

Directional Padding (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

padding-top-none (0px) ux4g-pt-none
padding-top-2xs (4px) ux4g-pt-2xs
padding-top-xs (8px) ux4g-pt-xs
padding-top-s (12px) ux4g-pt-s
padding-top-m (16px) ux4g-pt-m
padding-top-l (20px) ux4g-pt-l
padding-top-xl (24px) ux4g-pt-xl
padding-top-2xl (32px) ux4g-pt-2xl
padding-top-20 (20px) ux4g-pt-20
padding-bottom-none (0px) ux4g-pb-none
padding-bottom-2xs (4px) ux4g-pb-2xs
padding-bottom-xs (8px) ux4g-pb-xs
padding-bottom-s (12px) ux4g-pb-s
padding-bottom-m (16px) ux4g-pb-m
padding-bottom-l (20px) ux4g-pb-l
padding-bottom-xl (24px) ux4g-pb-xl
padding-bottom-2xl (32px) ux4g-pb-2xl
padding-bottom-20 (20px) ux4g-pb-20
padding-left-none (0px) ux4g-pl-none
padding-left-2xs (4px) ux4g-pl-2xs
padding-left-xs (8px) ux4g-pl-xs
padding-left-s (12px) ux4g-pl-s
padding-left-m (16px) ux4g-pl-m
padding-left-l (20px) ux4g-pl-l
padding-left-xl (24px) ux4g-pl-xl
padding-left-2xl (32px) ux4g-pl-2xl
padding-left-20 (20px) ux4g-pl-20
padding-right-none (0px) ux4g-pr-none
padding-right-2xs (4px) ux4g-pr-2xs
padding-right-xs (8px) ux4g-pr-xs
padding-right-s (12px) ux4g-pr-s
padding-right-m (16px) ux4g-pr-m
padding-right-l (20px) ux4g-pr-l
padding-right-xl (24px) ux4g-pr-xl
padding-right-2xl (32px) ux4g-pr-2xl
padding-right-20 (20px) ux4g-pr-20
); export default PaddingExample1Demo; ``` Angular: ```html
Utilities

Padding Utilities Reference

A complete reference of all padding utility classes, including every responsive variant.

Comprehensive CSS Class Reference

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

Padding (All Sides)

Format: ux4g-{property}{side}-{size}

padding-none (0px) ux4g-p-none
padding-2xs (4px) ux4g-p-2xs
padding-xs (8px) ux4g-p-xs
padding-s (12px) ux4g-p-s
padding-m (16px) ux4g-p-m
padding-l (20px) ux4g-p-l
padding-xl (24px) ux4g-p-xl
padding-2xl (32px) ux4g-p-2xl

Padding Axis (Horizontal/Vertical)

Format: ux4g-{property}{side}-{size}

padding-x-none (0px) ux4g-px-none
padding-x-2xs (4px) ux4g-px-2xs
padding-x-xs (8px) ux4g-px-xs
padding-x-s (12px) ux4g-px-s
padding-x-m (16px) ux4g-px-m
padding-x-l (20px) ux4g-px-l
padding-x-xl (24px) ux4g-px-xl
padding-x-2xl (32px) ux4g-px-2xl
padding-y-none (0px) ux4g-py-none
padding-y-2xs (4px) ux4g-py-2xs
padding-y-xs (8px) ux4g-py-xs
padding-y-s (12px) ux4g-py-s
padding-y-m (16px) ux4g-py-m
padding-y-l (20px) ux4g-py-l
padding-y-xl (24px) ux4g-py-xl
padding-y-2xl (32px) ux4g-py-2xl

Directional Padding (Top, Bottom, Left, Right)

Format: ux4g-{property}{side}-{size}

padding-top-none (0px) ux4g-pt-none
padding-top-2xs (4px) ux4g-pt-2xs
padding-top-xs (8px) ux4g-pt-xs
padding-top-s (12px) ux4g-pt-s
padding-top-m (16px) ux4g-pt-m
padding-top-l (20px) ux4g-pt-l
padding-top-xl (24px) ux4g-pt-xl
padding-top-2xl (32px) ux4g-pt-2xl
padding-top-20 (20px) ux4g-pt-20
padding-bottom-none (0px) ux4g-pb-none
padding-bottom-2xs (4px) ux4g-pb-2xs
padding-bottom-xs (8px) ux4g-pb-xs
padding-bottom-s (12px) ux4g-pb-s
padding-bottom-m (16px) ux4g-pb-m
padding-bottom-l (20px) ux4g-pb-l
padding-bottom-xl (24px) ux4g-pb-xl
padding-bottom-2xl (32px) ux4g-pb-2xl
padding-bottom-20 (20px) ux4g-pb-20
padding-left-none (0px) ux4g-pl-none
padding-left-2xs (4px) ux4g-pl-2xs
padding-left-xs (8px) ux4g-pl-xs
padding-left-s (12px) ux4g-pl-s
padding-left-m (16px) ux4g-pl-m
padding-left-l (20px) ux4g-pl-l
padding-left-xl (24px) ux4g-pl-xl
padding-left-2xl (32px) ux4g-pl-2xl
padding-left-20 (20px) ux4g-pl-20
padding-right-none (0px) ux4g-pr-none
padding-right-2xs (4px) ux4g-pr-2xs
padding-right-xs (8px) ux4g-pr-xs
padding-right-s (12px) ux4g-pr-s
padding-right-m (16px) ux4g-pr-m
padding-right-l (20px) ux4g-pr-l
padding-right-xl (24px) ux4g-pr-xl
padding-right-2xl (32px) ux4g-pr-2xl
padding-right-20 (20px) ux4g-pr-20
``` ### 2. Showcase — Padding (All Sides) HTML: ```html
p-none
p-2xs
p-xs
p-s
p-m
p-l
p-xl
p-2xl
``` React: ```jsx import React from 'react'; const PaddingExample2Demo = () => ( <>
p-none
p-2xs
p-xs
p-s
p-m
p-l
p-xl
p-2xl
); export default PaddingExample2Demo; ``` Angular: ```html
p-none
p-2xs
p-xs
p-s
p-m
p-l
p-xl
p-2xl
``` ### 3. Showcase — Horizontal Padding HTML: ```html
px-none
px-2xs
px-xs
px-s
px-m
px-l
px-xl
px-2xl
``` React: ```jsx import React from 'react'; const PaddingExample3Demo = () => ( <>
px-none
px-2xs
px-xs
px-s
px-m
px-l
px-xl
px-2xl
); export default PaddingExample3Demo; ``` Angular: ```html
px-none
px-2xs
px-xs
px-s
px-m
px-l
px-xl
px-2xl
``` ### 4. Showcase — Vertical Padding HTML: ```html
py-none
py-2xs
py-xs
py-s
py-m
py-l
py-xl
py-2xl
``` React: ```jsx import React from 'react'; const PaddingExample4Demo = () => ( <>
py-none
py-2xs
py-xs
py-s
py-m
py-l
py-xl
py-2xl
); export default PaddingExample4Demo; ``` Angular: ```html
py-none
py-2xs
py-xs
py-s
py-m
py-l
py-xl
py-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.