# Divider Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-divider--introduction ## Variants documented in Storybook - Divider: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-divider--divider ## 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 Divider. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Divider — Horizontal Divider HTML: ```html
Item 1
Item 2
``` React: ```jsx import React from 'react'; const DividerExample1Demo = () => ( <> {/* Variant: Horizontal Divider */}
Item 1
Item 2
); export default DividerExample1Demo; ``` Angular: ```html
Item 1
Item 2
``` ### 2. Divider — Vertical Divider HTML: ```html
Item 1
Item 2
Item 3
``` React: ```jsx import React from 'react'; const DividerExample2Demo = () => ( <> {/* Variant: Vertical Divider */}
Item 1
Item 2
Item 3
); export default DividerExample2Demo; ``` Angular: ```html
Item 1
Item 2
Item 3
``` ### 3. Introduction — Introduction HTML: ```html
Components

Divider

Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information.

Implementation Showcase

Visual demonstration of horizontal and vertical dividers.

Horizontal Divider

Item 1
Item 2

Vertical Divider

Item 1
Item 2
Item 3

CSS Class Reference

Quickly copy utility classes for Dividers.

Divider Classes

Horizontal Divider ux4g-divider-horizontal
Vertical Divider ux4g-divider-vertical
``` React: ```jsx import React from 'react'; const DividerExample3Demo = () => ( <>
Components

Divider

Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information.

Implementation Showcase

Visual demonstration of horizontal and vertical dividers.

{/* Horizontal Showcase */}

Horizontal Divider

Item 1
Item 2
{/* Vertical Showcase */}

Vertical Divider

Item 1
Item 2
Item 3

CSS Class Reference

Quickly copy utility classes for Dividers.

{/* Divider Classes */}

Divider Classes

Horizontal Divider ux4g-divider-horizontal
Vertical Divider ux4g-divider-vertical
); export default DividerExample3Demo; ``` Angular: ```html
Components

Divider

Divider is a thin line that groups content in lists and containers. It helps in improving content organization by separating content visually, making it easier for users to scan and understand information.

Implementation Showcase

Visual demonstration of horizontal and vertical dividers.

Horizontal Divider

Item 1
Item 2

Vertical Divider

Item 1
Item 2
Item 3

CSS Class Reference

Quickly copy utility classes for Dividers.

Divider Classes

Horizontal Divider ux4g-divider-horizontal
Vertical Divider ux4g-divider-vertical
``` ## 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.