<h2>When to use</h2>
<p>Divider and table components can be used to separate content, but don’t have the same purpose. Identify the use case your application needs and apply the correct component to create a clear experience for all users.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Divider</td>
<td>A divider is a thin line placed either horizontally or vertically between elements, used to separate content.</td>
</tr>
<tr>
<td><a href="/components/table/">Table</a></td>
<td>A table displays complex groups of information divided by columns and lines, for the purpose of reference, comparison, or choice.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Divider component","caption":"The divider component contains only one element, which is the divider itself. It can be applied horizontally or vertically, and can vary on the thickness, depending on its kind.\n\n1. The divider component.","url":"https://dds.dell.com/site/production/78/b9/Divider_Anatomy_bb66cdcf65.png"}]' data-numberofcolumns='1'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/chunking/","type":"External"},"title":"How Chunking Helps Content Processing","description":"Read the Nielsen Norman Group&#39;s article on chunking content.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Dividers are a subtle way to separate content into groups, sections, options, or parts. Many times, negative space will accomplish the same goal, so use them sparingly, as excessive use might overwhelm a user.

### Separating related content

Apply dividers between collections of content to delineate groups of content and create the appearance of containers.

<details data-name='image-block' data-images='[{"alt":"Diagram showing vertical divider separating three columns of content.","caption":"Illustration of vertical divider usage","url":"https://dds.dell.com/site/stage/90/15/Divider_Usage_Separate_Related_Groups_836fca34c0.png"}]' data-numberofcolumns='1'></details>

### Breaking up dense content

Make layouts cleaner and more readable by using dividers to create a visual hierarchy.

<details data-name='image-block' data-images='[{"alt":"Diagram showing horizontal divider breaking up large text passages.","caption":"Illustration of horizontal divider usage","url":"https://dds.dell.com/site/stage/97/bd/Divider_Usage_Break_Dense_Content_f4efc3314f.png"}]' data-numberofcolumns='1'></details>

### Separating elements in a layout

Full-bleed dividers are useful for outlining sections or lists, particularly on XS (extra small) or S (small) grids. In this case, horizontal dividers were used to separate stacks of content.

<details data-name='image-block' data-images='[{"alt":"Diagram showing horizontal divider in XS grid.","caption":"Illustration of horizontal divider usage in XS grid","url":"https://dds.dell.com/site/stage/29/42/Divider_Usage_Layout_Elements_84a049ac79.png"}]' data-numberofcolumns='1'></details>

## Kinds

There are two kinds of dividers: primary and secondary. The primary divider is a 4-pixel border, and the secondary is 1-pixel border. Primary or secondary weights can be used with either vertical or horizontal dividers.

### Primary horizontal divider

<details data-name='image-block' data-images='[{"alt":"Horizontal divider use case with primary weight.","caption":"Horizontal divider, shown with the primary 4-pixel weight","url":"https://dds.dell.com/site/production/2d/a1/2_VA_eeaea337c1.png"}]' data-numberofcolumns='1'></details>

### Secondary vertical divider

<details data-name='image-block' data-images='[{"alt":"Vertical divider use case with secondary weight.","caption":"Vertical divider treatment, shown with the secondary 1-pixel weight, between two columns of content","url":"https://dds.dell.com/site/production/cc/06/1_VA_305ee0aa31.png"}]' data-numberofcolumns='1'></details>

## Layout

### Specifications

Apply dividers to the right or left, top or bottom of an element. To align and have equal spacing on each side of the dividers, use the grid gutters and following pixels guidelines:

* For M (medium) to 2XL (2 extra large) grids, use one to two dividers. 
* For S (small) to XS (extra small) grids, exchange vertical dividers for horizontal dividers to allow for stacking.

<details data-name='image-block' data-images='[{"alt":"Diagram showing primary vertical divider spacing between elements.","caption":"Vertical dividers separating two columns of text. In this example, a margin of 16 pixels is applied to a primary divider, which is 4 pixels weight.","url":"https://dds.dell.com/site/production/b4/e8/Divider_Specifications_af08dd27cd.png"},{"alt":"Diagram showing secondary vertical divider spacing between elements.","caption":"Vertical dividers separating two columns of text. In this example, a margin of 16 pixels is applied to a secondary divider, which is 1 pixel weight.","url":"https://dds.dell.com/site/production/75/bc/Divider_Specifications_2_28da0d8a9a.png"},{"alt":"Diagram showing primary horizontal divider spacing between elements.","caption":"Horizontal divider separating elements in a XS or S grid. In this example, a margin of 16 pixels is applied to a primary divider, which is 4 pixels weight.","url":"https://dds.dell.com/site/stage/0f/18/Divider_Sizing_Spacing_Horizontal_4px_c5fd851880.png"},{"alt":"Diagram showing secondary horizontal divider spacing between elements.","caption":"Horizontal divider separating elements in a XS or S grid. In this example, a margin of 16 pixels is applied to a secondary divider, which is 1 pixel weight.","url":"https://dds.dell.com/site/stage/ef/3f/Divider_Sizing_Spacing_Horizontal_1px_5b8060ab13.png"}]' data-numberofcolumns='2'></details>

## Standards

### Accessibility

#### **Verify color contrast for dividers**

It is crucial for dividers to maintain a minimum contrast on the page they are applied to. This ensures users perceive them effectively and that they fulfill their intended purpose.

WCAG 2.2: [1.4.3: Contrast (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)

#### **Add the recommended spacing and ensure visual clarity**

Applying the correct spacing next to dividers ensures an accessible and clear user experience. Make sure the text is presented in a way that is not interfered by layout or affects its readability.

WCAG 2.2: [1.4.8: Visual Presentation (Level AAA)](https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation.html)

#### **Dividers should not be included in screen readers**

They should be considered as static structural elements, as their purpose is to divide and separate content. This ensures a smooth navigation for all users.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-divider--horizontal)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-divider--horizontal&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-divider--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-divider--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-divider--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-divider--docs&viewMode=docs&websiteFrame=true'></details>

A divider is a thin line placed either horizontally or vertically between elements.

Divider

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
