# Card Card is a flexible, container like component that visually groups related pieces of information and actions about a single subject. It supports images, text and actions in a flexible content container. | **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-card--introduction ## Variants documented in Storybook - VerticalCards: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-card--verticalcards - HorizontalCards: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-card--horizontalcards ## 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 Card. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Horizontal Cards — Card Filled HTML: ```html

Label

Card Title

Card Sub Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit.

Label

``` React: ```jsx import React from 'react'; const CardExample1Demo = () => ( <> {/* Variant: Horizontal Card - Filled */}

token Label token

Card Title

Card Sub Title

token

token Label

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

Label

Card Title

Card Sub Title

Label

``` ### 2. Horizontal Cards — Card Outline HTML: ```html

Label

Card Title

Card Sub Title

Label

``` React: ```jsx import React from 'react'; const CardExample2Demo = () => ( <> {/* Variant: Horizontal Card - Outline */}

token Label token

Card Title

Card Sub Title

token

token Label

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

Label

Card Title

Card Sub Title

Label

``` ### 3. Horizontal Cards — Card No Fill HTML: ```html

Label

Card Title

Card Sub Title

Label

``` React: ```jsx import React from 'react'; const CardExample3Demo = () => ( <> {/* Variant: Horizontal Card - No Fill */}

token Label token

Card Title

Card Sub Title

token

token Label

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

Label

Card Title

Card Sub Title

Label

``` ### 4. Horizontal Cards — Card Disabled HTML: ```html

Label

Card Title

Card Sub Title

Label

``` React: ```jsx import React from 'react'; const CardExample4Demo = () => ( <> {/* Variant: Horizontal Card - disabled */}

token Label token

Card Title

Card Sub Title

token

token Label

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

Label

Card Title

Card Sub Title

Label

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

Components

Cards

Card is a flexible, container like component that visually groups related pieces of information and actions about a single subject. It supports images, text and actions in a flexible content container. |

Veritcal card

Card filled

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card outline

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card no fill

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Disabled

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Horizontal card

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

CSS Class Reference

Quickly copy variant utility classes for Cards.

Orientation

Vertical Layout ux4g-card-vertical

Horizontal Layout ux4g-card-horizontal

Card Variants

Filled ux4g-card-solid

Outline ux4g-card-outline

No Fill ux4g-card-no-fill

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

Components

Cards

Veritcal card

Card filled

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

Card outline

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

Card no fill

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

Card Disabled

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

Horizontal card

{/* Horizontal card */}

token Label token

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

token Label token

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

token Label token

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

token Label token

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

CSS Class Reference

Quickly copy variant utility classes for Cards.

{/* Orientation Classes */}

Orientation

Vertical Layout ux4g-card-vertical

Horizontal Layout ux4g-card-horizontal

{/* Variant Classes */}

Card Variants

Filled ux4g-card-solid

Outline ux4g-card-outline

No Fill ux4g-card-no-fill

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

Components

Cards

Veritcal card

Card filled

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card outline

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card no fill

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Disabled

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Horizontal card

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

CSS Class Reference

Quickly copy variant utility classes for Cards.

Orientation

Vertical Layout ux4g-card-vertical

Horizontal Layout ux4g-card-horizontal

Card Variants

Filled ux4g-card-solid

Outline ux4g-card-outline

No Fill ux4g-card-no-fill

``` ### 6. Vertical Cards — Card Filled HTML: ```html

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` React: ```jsx import React from 'react'; const CardExample6Demo = () => ( <> {/* Variant: Vertical Card - Filled */}

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

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

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` ### 7. Vertical Cards — Card Outline HTML: ```html

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` React: ```jsx import React from 'react'; const CardExample7Demo = () => ( <> {/* Variant: Vertical Card - Outline */}

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

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

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` ### 8. Vertical Cards — Card No Fill HTML: ```html

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` React: ```jsx import React from 'react'; const CardExample8Demo = () => ( <> {/* Variant: Vertical Card - No Fill */}

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

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

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` ### 9. Vertical Cards — Card Disabled HTML: ```html

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` React: ```jsx import React from 'react'; const CardExample9Demo = () => ( <> {/* Variant: Vertical Card - disabled */}

token Label token

token Label

Card Title

Card Sub Title

token

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

token Label

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

Label

Card Title

Card Sub Title

Lorem ipsum is a dummy or placeholder text commonly used in graphic design, publishing, and web development.

Label

``` ## 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.