# Display Quickly and responsively toggle the display value of components and more with our display utilities. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-display--introduction ## Variants documented in Storybook - DisplayShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-display--displayshowcase ## 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 Display. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Display Showcase — Display None HTML: ```html

This element is hidden with .ux4g-d-none

The element is here but hidden.

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

This element is hidden with .ux4g-d-none

The element is here but hidden.

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

This element is hidden with .ux4g-d-none

The element is here but hidden.

``` ### 2. Display Showcase — Display Inline HTML: ```html

Inline Item 1

Inline Item 2

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

Inline Item 1

Inline Item 2

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

Inline Item 1

Inline Item 2

``` ### 3. Display Showcase — Display Inline-Block HTML: ```html

Inline Block 1

Inline Block 2

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

Inline Block 1

Inline Block 2

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

Inline Block 1

Inline Block 2

``` ### 4. Display Showcase — Display Block HTML: ```html

Block Item 1

Block Item 2

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

Block Item 1

Block Item 2

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

Block Item 1

Block Item 2

``` ### 5. Display Showcase — Display Table System HTML: ```html

Header 1

Header 2

Cell 1.1

Cell 1.2

Cell 2.1

Cell 2.2

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

Header 1

Header 2

Cell 1.1

Cell 1.2

Cell 2.1

Cell 2.2

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

Header 1

Header 2

Cell 1.1

Cell 1.2

Cell 2.1

Cell 2.2

``` ### 6. Display Showcase — Display Flex HTML: ```html

Flex Item 1

Flex Item 2

Flex Item 3

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

Flex Item 1

Flex Item 2

Flex Item 3

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

Flex Item 1

Flex Item 2

Flex Item 3

``` ### 7. Display Showcase — Display Inline-Flex HTML: ```html

Inline-Flex 1

Inline-Flex 2

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

Inline-Flex 1

Inline-Flex 2

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

Inline-Flex 1

Inline-Flex 2

``` ### 8. Display Showcase — Display Contents HTML: ```html

Child 1

Child 2

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

Child 1

Child 2

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

Child 1

Child 2

``` ### 9. Display Showcase — Display List-Item HTML: ```html

Custom List Item 1

Custom List Item 2

Custom List Item 3

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

Custom List Item 1

Custom List Item 2

Custom List Item 3

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

Custom List Item 1

Custom List Item 2

Custom List Item 3

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

Utilities

Display Utilities

Quickly and responsively toggle the display value of components and more with our display utilities.

Comprehensive CSS Class Reference

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

Base Display

Format: ux4g-d-{display}

None ux4g-d-none

Inline ux4g-d-inline

Inline Block ux4g-d-inline-block

Block ux4g-d-block

Table ux4g-d-table

Table Row ux4g-d-table-row

Table Cell ux4g-d-table-cell

Flex ux4g-d-flex

Inline Flex ux4g-d-inline-flex

Contents ux4g-d-contents

List Item ux4g-d-list-item

Print Display

Format: ux4g-d-{display}

Print None ux4g-d-print-none

Print Inline ux4g-d-print-inline

Print Inline Block ux4g-d-print-inline-block

Print Block ux4g-d-print-block

Print Table ux4g-d-print-table

Print Flex ux4g-d-print-flex

Responsive Display

Format: ux4g-d-{display}

Sm None ux4g-d-sm-none

Sm Inline ux4g-d-sm-inline

Sm Inline Block ux4g-d-sm-inline-block

Sm Block ux4g-d-sm-block

Sm Grid ux4g-d-sm-grid

Sm Table ux4g-d-sm-table

Sm Flex ux4g-d-sm-flex

Md None ux4g-d-md-none

Md Inline ux4g-d-md-inline

Md Inline Block ux4g-d-md-inline-block

Md Block ux4g-d-md-block

Md Grid ux4g-d-md-grid

Md Table ux4g-d-md-table

Md Flex ux4g-d-md-flex

Lg None ux4g-d-lg-none

Lg Inline ux4g-d-lg-inline

Lg Inline Block ux4g-d-lg-inline-block

Lg Block ux4g-d-lg-block

Lg Grid ux4g-d-lg-grid

Lg Table ux4g-d-lg-table

Lg Flex ux4g-d-lg-flex

Xl None ux4g-d-xl-none

Xl Inline ux4g-d-xl-inline

Xl Inline Block ux4g-d-xl-inline-block

Xl Block ux4g-d-xl-block

Xl Grid ux4g-d-xl-grid

Xl Table ux4g-d-xl-table

Xl Flex ux4g-d-xl-flex

2xl None ux4g-d-2xl-none

2xl Inline ux4g-d-2xl-inline

2xl Inline Block ux4g-d-2xl-inline-block

2xl Block ux4g-d-2xl-block

2xl Grid ux4g-d-2xl-grid

2xl Table ux4g-d-2xl-table

2xl Flex ux4g-d-2xl-flex

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

Utilities

Display Utilities

Quickly and responsively toggle the display value of components and more with our display utilities.

Comprehensive CSS Class Reference

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

{/* Base Display */}

Base Display

Format: ux4g-d-{display}

None ux4g-d-none

Inline ux4g-d-inline

Inline Block ux4g-d-inline-block

Block ux4g-d-block

Table ux4g-d-table

Table Row ux4g-d-table-row

Table Cell ux4g-d-table-cell

Flex ux4g-d-flex

Inline Flex ux4g-d-inline-flex

Contents ux4g-d-contents

List Item ux4g-d-list-item

{/* Print Display */}

Print Display

Format: ux4g-d-{display}

Print None ux4g-d-print-none

Print Inline ux4g-d-print-inline

Print Inline Block ux4g-d-print-inline-block

Print Block ux4g-d-print-block

Print Table ux4g-d-print-table

Print Flex ux4g-d-print-flex

{/* Responsive Display */}

Responsive Display

Format: ux4g-d-{display}

Sm None ux4g-d-sm-none

Sm Inline ux4g-d-sm-inline

Sm Inline Block ux4g-d-sm-inline-block

Sm Block ux4g-d-sm-block

Sm Grid ux4g-d-sm-grid

Sm Table ux4g-d-sm-table

Sm Flex ux4g-d-sm-flex

Md None ux4g-d-md-none

Md Inline ux4g-d-md-inline

Md Inline Block ux4g-d-md-inline-block

Md Block ux4g-d-md-block

Md Grid ux4g-d-md-grid

Md Table ux4g-d-md-table

Md Flex ux4g-d-md-flex

Lg None ux4g-d-lg-none

Lg Inline ux4g-d-lg-inline

Lg Inline Block ux4g-d-lg-inline-block

Lg Block ux4g-d-lg-block

Lg Grid ux4g-d-lg-grid

Lg Table ux4g-d-lg-table

Lg Flex ux4g-d-lg-flex

Xl None ux4g-d-xl-none

Xl Inline ux4g-d-xl-inline

Xl Inline Block ux4g-d-xl-inline-block

Xl Block ux4g-d-xl-block

Xl Grid ux4g-d-xl-grid

Xl Table ux4g-d-xl-table

Xl Flex ux4g-d-xl-flex

2xl None ux4g-d-2xl-none

2xl Inline ux4g-d-2xl-inline

2xl Inline Block ux4g-d-2xl-inline-block

2xl Block ux4g-d-2xl-block

2xl Grid ux4g-d-2xl-grid

2xl Table ux4g-d-2xl-table

2xl Flex ux4g-d-2xl-flex

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

Utilities

Display Utilities

Quickly and responsively toggle the display value of components and more with our display utilities.

Comprehensive CSS Class Reference

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

Base Display

Format: ux4g-d-{display}

None ux4g-d-none

Inline ux4g-d-inline

Inline Block ux4g-d-inline-block

Block ux4g-d-block

Table ux4g-d-table

Table Row ux4g-d-table-row

Table Cell ux4g-d-table-cell

Flex ux4g-d-flex

Inline Flex ux4g-d-inline-flex

Contents ux4g-d-contents

List Item ux4g-d-list-item

Print Display

Format: ux4g-d-{display}

Print None ux4g-d-print-none

Print Inline ux4g-d-print-inline

Print Inline Block ux4g-d-print-inline-block

Print Block ux4g-d-print-block

Print Table ux4g-d-print-table

Print Flex ux4g-d-print-flex

Responsive Display

Format: ux4g-d-{display}

Sm None ux4g-d-sm-none

Sm Inline ux4g-d-sm-inline

Sm Inline Block ux4g-d-sm-inline-block

Sm Block ux4g-d-sm-block

Sm Grid ux4g-d-sm-grid

Sm Table ux4g-d-sm-table

Sm Flex ux4g-d-sm-flex

Md None ux4g-d-md-none

Md Inline ux4g-d-md-inline

Md Inline Block ux4g-d-md-inline-block

Md Block ux4g-d-md-block

Md Grid ux4g-d-md-grid

Md Table ux4g-d-md-table

Md Flex ux4g-d-md-flex

Lg None ux4g-d-lg-none

Lg Inline ux4g-d-lg-inline

Lg Inline Block ux4g-d-lg-inline-block

Lg Block ux4g-d-lg-block

Lg Grid ux4g-d-lg-grid

Lg Table ux4g-d-lg-table

Lg Flex ux4g-d-lg-flex

Xl None ux4g-d-xl-none

Xl Inline ux4g-d-xl-inline

Xl Inline Block ux4g-d-xl-inline-block

Xl Block ux4g-d-xl-block

Xl Grid ux4g-d-xl-grid

Xl Table ux4g-d-xl-table

Xl Flex ux4g-d-xl-flex

2xl None ux4g-d-2xl-none

2xl Inline ux4g-d-2xl-inline

2xl Inline Block ux4g-d-2xl-inline-block

2xl Block ux4g-d-2xl-block

2xl Grid ux4g-d-2xl-grid

2xl Table ux4g-d-2xl-table

2xl Flex ux4g-d-2xl-flex

``` ## CSS class reference The following CSS partials define the Display utility classes used in the examples above: ### display.utilities.css ```css /* ========================================= DISPLAY UTILITIES Author: UX4G Based on Bootstrap's display utilities. ========================================= */ .ux4g-d-none { display: none !important; } .ux4g-d-inline { display: inline !important; } .ux4g-d-inline-block { display: inline-block !important; } .ux4g-d-block { display: block !important; } .ux4g-d-table { display: table !important; } .ux4g-d-table-row { display: table-row !important; } .ux4g-d-table-cell { display: table-cell !important; } .ux4g-d-flex { display: flex !important; } .ux4g-d-inline-flex { display: inline-flex !important; } .ux4g-d-contents { display: contents !important; } .ux4g-d-list-item { display: list-item !important; } ``` ### display-responsive.utilities.css ```css /* ========================================= RESPONSIVE DISPLAY UTILITIES Author: UX4G Notation: .ux4g-d-{breakpoint}-{value} ========================================= */ /* SM ≥ 576px */ @media (min-width: 576px) { .ux4g-sm-d-none { display: none !important ;} .ux4g-sm-d-inline { display: inline !important ;} .ux4g-sm-d-inline-block { display: inline-block !important ;} .ux4g-sm-d-block { display: block !important ;} .ux4g-sm-d-grid { display: grid !important ;} .ux4g-sm-d-table { display: table !important ;} .ux4g-sm-d-table-row { display: table-row !important ;} .ux4g-sm-d-table-cell { display: table-cell !important ;} .ux4g-sm-d-flex { display: flex !important ;} .ux4g-sm-d-inline-flex { display: inline-flex !important ;} } /* MD ≥ 768px */ @media (min-width: 768px) { .ux4g-md-d-none { display: none !important ;} .ux4g-md-d-inline { display: inline !important ;} .ux4g-md-d-inline-block { display: inline-block !important ;} .ux4g-md-d-block { display: block !important ;} .ux4g-md-d-grid { display: grid !important ;} .ux4g-md-d-table { display: table !important ;} .ux4g-md-d-table-row { display: table-row !important ;} .ux4g-md-d-table-cell { display: table-cell !important ;} .ux4g-md-d-flex { display: flex !important ;} .ux4g-md-d-inline-flex { display: inline-flex !important ;} } /* LG ≥ 992px */ @media (min-width: 992px) { .ux4g-lg-d-none { display: none !important ;} .ux4g-lg-d-inline { display: inline !important ;} .ux4g-lg-d-inline-block { display: inline-block !important ;} .ux4g-lg-d-block { display: block !important ;} .ux4g-lg-d-grid { display: grid !important ;} .ux4g-lg-d-table { display: table !important ;} .ux4g-lg-d-table-row { display: table-row !important ;} .ux4g-lg-d-table-cell { display: table-cell !important ;} .ux4g-lg-d-flex { display: flex !important ;} .ux4g-lg-d-inline-flex { display: inline-flex !important ;} } /* XL ≥ 1200px */ @media (min-width: 1200px) { .ux4g-xl-d-none { display: none !important ;} .ux4g-xl-d-inline { display: inline !important ;} .ux4g-xl-d-inline-block { display: inline-block !important ;} .ux4g-xl-d-block { display: block !important ;} .ux4g-xl-d-grid { display: grid !important ;} .ux4g-xl-d-table { display: table !important ;} .ux4g-xl-d-table-row { display: table-row !important ;} .ux4g-xl-d-table-cell { display: table-cell !important ;} .ux4g-xl-d-flex { display: flex !important ;} .ux4g-xl-d-inline-flex { display: inline-flex !important ;} } /* 2XL ≥ 1400px */ @media (min-width: 1400px) { .ux4g-2xl-d-none { display: none !important ;} .ux4g-2xl-d-inline { display: inline !important ;} .ux4g-2xl-d-inline-block { display: inline-block !important ;} .ux4g-2xl-d-block { display: block !important ;} .ux4g-2xl-d-grid { display: grid !important ;} .ux4g-2xl-d-table { display: table !important ;} .ux4g-2xl-d-table-row { display: table-row !important ;} .ux4g-2xl-d-table-cell { display: table-cell !important ;} .ux4g-2xl-d-flex { display: flex !important ;} .ux4g-2xl-d-inline-flex { display: inline-flex !important ;} } /* Print Utilities */ @media print { .ux4g-d-print-none { display: none !important ;} .ux4g-d-print-inline { display: inline !important ;} .ux4g-d-print-inline-block { display: inline-block !important ;} .ux4g-d-print-block { display: block !important ;} .ux4g-d-print-grid { display: grid !important ;} .ux4g-d-print-table { display: table !important ;} .ux4g-d-print-table-row { display: table-row !important ;} .ux4g-d-print-table-cell { display: table-cell !important ;} .ux4g-d-print-flex { display: flex !important ;} .ux4g-d-print-inline-flex { display: inline-flex !important ;} } ``` ## 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.