# Image Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-image--introduction ## Variants documented in Storybook - SharpRatios: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-image--sharpratios - RoundedRatios: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-image--roundedratios ## 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 Image. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Image

Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces.

Implementation Showcase

Visual demonstration of various aspect ratios and semantic overlays.

Sharp & Overlays

Sharp 1:1
Sharp 16:9
Bottom Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Top Title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rounded & Full Height

Rounded 1:1
Rounded 16:9
Full Height Overlay
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Descriptive Label
Sunt in culpa qui officia deserunt mollit anim id est laborum. Nam libero tempore, cum soluta nobis est eligendi optio cumque.

CSS Class Reference

Quickly copy aspect ratio and treatment utilities for images.

Aspect Ratio Utilities

ux4g-ratio-1-1
ux4g-ratio-4-3
ux4g-ratio-3-2
ux4g-ratio-16-10
ux4g-ratio-16-9
ux4g-ratio-2-1
ux4g-ratio-5-2
ux4g-ratio-3-1
ux4g-ratio-2-3
ux4g-ratio-3-4

Treatment & Overlay Utilities

Rounded Corners (12px) ux4g-img-rounded
Overlay Container ux4g-img-overlay
Overlay Position Top ux4g-img-overlay-top
Overlay Position Bottom ux4g-img-overlay-bottom
Full Height Overlay (on position) ux4g-h-100
``` React: ```jsx import React from 'react'; const ImageExample1Demo = () => ( <>
Components

Image

Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces.

Implementation Showcase

Visual demonstration of various aspect ratios and semantic overlays.

{/* Sharp Showcase */}

Sharp & Overlays

Sharp 1:1
Sharp 16:9
Bottom Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Top Title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
{/* Rounded Showcase */}

Rounded & Full Height

Rounded 1:1
Rounded 16:9
Full Height Overlay
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Descriptive Label
Sunt in culpa qui officia deserunt mollit anim id est laborum. Nam libero tempore, cum soluta nobis est eligendi optio cumque.

CSS Class Reference

Quickly copy aspect ratio and treatment utilities for images.

{/* Ratio Utilities */}

Aspect Ratio Utilities

ux4g-ratio-1-1
ux4g-ratio-4-3
ux4g-ratio-3-2
ux4g-ratio-16-10
ux4g-ratio-16-9
ux4g-ratio-2-1
ux4g-ratio-5-2
ux4g-ratio-3-1
ux4g-ratio-2-3
ux4g-ratio-3-4
{/* Treatment Utilities */}

Treatment & Overlay Utilities

Rounded Corners (12px) ux4g-img-rounded
Overlay Container ux4g-img-overlay
Overlay Position Top ux4g-img-overlay-top
Overlay Position Bottom ux4g-img-overlay-bottom
Full Height Overlay (on position) ux4g-h-100
); export default ImageExample1Demo; ``` Angular: ```html
Components

Image

Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces.

Implementation Showcase

Visual demonstration of various aspect ratios and semantic overlays.

Sharp & Overlays

Sharp 1:1
Sharp 16:9
Bottom Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Top Title
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rounded & Full Height

Rounded 1:1
Rounded 16:9
Full Height Overlay
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Descriptive Label
Sunt in culpa qui officia deserunt mollit anim id est laborum. Nam libero tempore, cum soluta nobis est eligendi optio cumque.

CSS Class Reference

Quickly copy aspect ratio and treatment utilities for images.

Aspect Ratio Utilities

ux4g-ratio-1-1
ux4g-ratio-4-3
ux4g-ratio-3-2
ux4g-ratio-16-10
ux4g-ratio-16-9
ux4g-ratio-2-1
ux4g-ratio-5-2
ux4g-ratio-3-1
ux4g-ratio-2-3
ux4g-ratio-3-4

Treatment & Overlay Utilities

Rounded Corners (12px) ux4g-img-rounded
Overlay Container ux4g-img-overlay
Overlay Position Top ux4g-img-overlay-top
Overlay Position Bottom ux4g-img-overlay-bottom
Full Height Overlay (on position) ux4g-h-100
``` ### 2. Rounded Ratios — Rounded Aspect Ratios HTML: ```html 1:1 4:3 3:2 16:10 16:9 2:1 5:2 3:1 1:1.6 2:3 3:4 ``` React: ```jsx import React from 'react'; const ImageExample2Demo = () => ( <> {/* Variant: Rounded Image Ratio - 1:1 */} 1:1 {/* Variant: Rounded Image Ratio - 4:3 */} 4:3 {/* Variant: Rounded Image Ratio - 3:2 */} 3:2 {/* Variant: Rounded Image Ratio - 16:10 */} 16:10 {/* Variant: Rounded Image Ratio - 16:9 */} 16:9 {/* Variant: Rounded Image Ratio - 2:1 */} 2:1 {/* Variant: Rounded Image Ratio - 5:2 */} 5:2 {/* Variant: Rounded Image Ratio - 3:1 */} 3:1 {/* Variant: Rounded Image Ratio - 1:1.6 */} 1:1.6 {/* Variant: Rounded Image Ratio - 2:3 */} 2:3 {/* Variant: Rounded Image Ratio - 3:4 */} 3:4 ); export default ImageExample2Demo; ``` Angular: ```html 1:1 4:3 3:2 16:10 16:9 2:1 5:2 3:1 1:1.6 2:3 3:4 ``` ### 3. Rounded Ratios — Overlay Bottom (Rounded) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` React: ```jsx import React from 'react'; const ImageExample3Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
); export default ImageExample3Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` ### 4. Rounded Ratios — Overlay Top (Rounded) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` React: ```jsx import React from 'react'; const ImageExample4Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
); export default ImageExample4Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` ### 5. Rounded Ratios — Full Height Overlay (Rounded) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
``` React: ```jsx import React from 'react'; const ImageExample5Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
); export default ImageExample5Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
``` ### 6. Sharp Ratios — Sharp Aspect Ratios HTML: ```html 1:1 4:3 3:2 16:10 16:9 2:1 5:2 3:1 1:1.6 2:3 3:4 ``` React: ```jsx import React from 'react'; const ImageExample6Demo = () => ( <> {/* Variant: Sharp Image Ratio - 1:1 */} 1:1 {/* Variant: Sharp Image Ratio - 4:3 */} 4:3 {/* Variant: Sharp Image Ratio - 3:2 */} 3:2 {/* Variant: Sharp Image Ratio - 16:10 */} 16:10 {/* Variant: Sharp Image Ratio - 16:9 */} 16:9 {/* Variant: Sharp Image Ratio - 2:1 */} 2:1 {/* Variant: Sharp Image Ratio - 5:2 */} 5:2 {/* Variant: Sharp Image Ratio - 3:1 */} 3:1 {/* Variant: Sharp Image Ratio - 1:1.6 */} 1:1.6 {/* Variant: Sharp Image Ratio - 2:3 */} 2:3 {/* Variant: Sharp Image Ratio - 3:4 */} 3:4 ); export default ImageExample6Demo; ``` Angular: ```html 1:1 4:3 3:2 16:10 16:9 2:1 5:2 3:1 1:1.6 2:3 3:4 ``` ### 7. Sharp Ratios — Overlay Bottom (Sharp) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` React: ```jsx import React from 'react'; const ImageExample7Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
); export default ImageExample7Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` ### 8. Sharp Ratios — Overlay Top (Sharp) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` React: ```jsx import React from 'react'; const ImageExample8Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
); export default ImageExample8Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:1
Title
Lorem ipsum is a dummy or placeholder.
token
3:1
5:2
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
5:2
``` ### 9. Sharp Ratios — Full Height Overlay (Sharp) HTML: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
``` React: ```jsx import React from 'react'; const ImageExample9Demo = () => ( <>
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
); export default ImageExample9Demo; ``` Angular: ```html
1:1
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
1:1
4:3
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
4:3
3:4
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
3:4
16:9
Title
Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.
token
16:9
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.