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

Shadow Utilities Reference

A comprehensive reference of elevation levels and shadow utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

Elevation Levels

Format: ux4g-shadow-{size}

None ux4g-shadow-l0
Layer 1 (Subtle) ux4g-shadow-l1
Layer 2 (Regular) ux4g-shadow-l2
Layer 3 (Large) ux4g-shadow-l3
Layer 4 (Strong) ux4g-shadow-l4
``` React: ```jsx import React from 'react'; const ShadowsExample1Demo = () => ( <>
Utilities

Shadow Utilities Reference

A comprehensive reference of elevation levels and shadow utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

{/* Shadow Table */}

Elevation Levels

Format: ux4g-shadow-{size}

None ux4g-shadow-l0
Layer 1 (Subtle) ux4g-shadow-l1
Layer 2 (Regular) ux4g-shadow-l2
Layer 3 (Large) ux4g-shadow-l3
Layer 4 (Strong) ux4g-shadow-l4
); export default ShadowsExample1Demo; ``` Angular: ```html
Utilities

Shadow Utilities Reference

A comprehensive reference of elevation levels and shadow utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

Elevation Levels

Format: ux4g-shadow-{size}

None ux4g-shadow-l0
Layer 1 (Subtle) ux4g-shadow-l1
Layer 2 (Regular) ux4g-shadow-l2
Layer 3 (Large) ux4g-shadow-l3
Layer 4 (Strong) ux4g-shadow-l4
``` ### 2. Shadow Showcase — Elevation Levels HTML: ```html
...
...
...
...
...
``` React: ```jsx import React from 'react'; const ShadowsExample2Demo = () => ( <>
...
...
...
...
...
); export default ShadowsExample2Demo; ``` Angular: ```html
...
...
...
...
...
``` ### 3. Shadow Showcase — Usage Context HTML: ```html
...
...
``` React: ```jsx import React from 'react'; const ShadowsExample3Demo = () => ( <> {/* Card with subtle shadow */}
...
{/* Surface with regular shadow */}
...
); export default ShadowsExample3Demo; ``` Angular: ```html
...
...
``` ## CSS class reference The following CSS partials define the Shadows utility classes used in the examples above: ### shadow.utilities.css ```css /* Base Shadow Engine */ [class^="ux4g-shadow-"], [class*=" ux4g-shadow-"] { box-shadow: var(--ux4g-shadow-current, none); } /* Shadow Levels (Combined) */ .ux4g-shadow-l0 { --ux4g-shadow-current: var(--ux4g-shadow-l0); } .ux4g-shadow-l1 { --ux4g-shadow-current: var(--ux4g-shadow-l1); } .ux4g-shadow-l2 { --ux4g-shadow-current: var(--ux4g-shadow-l2); } .ux4g-shadow-l3 { --ux4g-shadow-current: var(--ux4g-shadow-l3); } .ux4g-shadow-l4 { --ux4g-shadow-current: var(--ux4g-shadow-l4); } ``` ## 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.