<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Kinds:</strong> Terminology updated to Thick and Thin to better reflect intended usage patterns.</li>
<li><strong>Color:</strong> Uses the new token‑based color system for consistent appearance across themes.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Divider provides visual hierarchy to the content and improves readability.</p>
<p>Use the divider to:</p>
<ul>
<li>Separate text into sections, when spacing alone isn’t enough.</li>
<li>Group things, not separate individual items.</li>
<li>Structure lists and menus by distinguishing individual items.</li>
<li>Support step-by-step flows by marking transitions between stages.</li>
</ul>
<p>Dividers and tables both organize content, but they serve different purposes. Choose the component that best fits your use case to keep the experience clear and consistent.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use cases</th>
</tr>
</thead>
<tbody><tr>
<td>Divider</td>
<td>A thin horizontal or vertical line used to separate related content areas.</td>
</tr>
<tr>
<td><a href="/components/table/">Table</a></td>
<td>A structured layout for displaying data organized into rows and columns for comparison, reference, or decision‑making.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A divider is a single element that can be placed horizontally or vertically. Its thickness depends on the divider <a href="/components/divider/?tab=Design#design-kinds">kind</a>.</p>
<details data-name='image-block' data-images='[{"alt":"Divider component","caption":"The divider component contains only one element:\n\n1. Divider","url":"https://dds.dell.com/site/v3/components/divider/divider-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Dividers separate content into groups, sections, options, or parts. Use them sparingly, since negative space often serves the same purpose and too many dividers can overwhelm users.

### Separating related content

Place dividers between content collections to define groups and create a container‑like structure.

<details data-name='image-block' data-images='[{"alt":"Diagram showing vertical divider separating three columns of content.","caption":"Example of vertical divider usage","url":"https://dds.dell.com/site/v3/components/divider/divider-usage-separate-content.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Breaking up dense content

Use dividers to create visual hierarchy and make dense layouts easier to read.

<details data-name='image-block' data-images='[{"alt":"Diagram showing horizontal divider breaking up large text passages.","caption":"Example of horizontal divider usage","url":"https://dds.dell.com/site/v3/components/divider/divider-usage-break-dense-content.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Separating elements in a layout

Use full‑bleed dividers to separate sections or lists, especially on XS (extra small) or S (small) grids. In these layouts, horizontal dividers help organize stacked content.

<details data-name='image-block' data-images='[{"alt":"Diagram showing horizontal divider in XS grid.","caption":"Example of horizontal divider usage in XS (extra small) grid.","url":"https://dds.dell.com/site/v3/components/divider/divider-usage-layout-elements.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

There are two kinds of dividers:

* **Thick divider:** uses a **4-pixel** weight
* **Thin divider:** uses a **1-pixel** weight



Both weights can be applied to **horizontal** or **vertical** dividers.

### Thick

<details data-name='image-block' data-images='[{"alt":"Thick divider using 4‑pixel weight","caption":"Thick divider using 4‑pixel weight.","url":"https://dds.dell.com/site/v3/components/divider/divider-kinds-thick.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Thin

<details data-name='image-block' data-images='[{"alt":"Thin divider using 1‑pixel weight","caption":"Thin divider using 1‑pixel weight.","url":"https://dds.dell.com/site/v3/components/divider/divider-kinds-thin.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

### Orientation

Dividers align horizontally or vertically based on the content layout.

* **Horizontal dividers** separate stacked elements in a top‑to‑bottom flow, creating clear breaks between rows or content groups.
* **Vertical dividers** separate side‑by‑side elements in a left‑to‑right flow, defining boundaries between columns, panels, or adjacent components.

Both orientations support thick and thin weights.

### Specifications

Apply dividers to the right, left, top, or bottom of an element. To maintain alignment and consistent spacing, align dividers to the grid gutter.

Follow the grid-gutter and spacing guidelines:

* **M (medium) to 2XL (2 extra large) grids:** use one or two dividers
* **S (small) to XS (extra small) grids:** replace vertical dividers with horizontal ones to support stacked layouts

<details data-name='image-block' data-images='[{"alt":"Illustration of a thick vertical divider separating two columns of content.","caption":"Example of a thick (4 px) vertical divider separating two columns of content.","url":"https://dds.dell.com/site/v3/components/divider/divider-layout-thick-vertical.png"},{"alt":"Illustration of a thin vertical divider separating two columns of content.","caption":"Example of a thin (1 px) vertical divider separating two columns of content.","url":"https://dds.dell.com/site/v3/components/divider/divider-layout-thin-vertical.png"},{"alt":"Illustration of a thick horizontal divider used in a stacked layout.","caption":"Example of a thick (4 px) horizontal divider used in a stacked layout.","url":"https://dds.dell.com/site/v3/components/divider/divider-layout-thick-horizontal.png"},{"alt":"Illustration of a thin horizontal divider used in a stacked layout.","caption":"Example of a thin (1 px) horizontal divider used in a stacked layout.","url":"https://dds.dell.com/site/v3/components/divider/divider-layout-thin-horizontal.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Standards

### Accessibility

#### **Ensure sufficient color contrast**

Dividers must meet minimum contrast requirements so users can perceive them clearly, especially in low‑vision scenarios. This ensures the divider fulfills its purpose as a visual separator.

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

#### **Maintain recommended spacing for clarity**

Apply the correct spacing around dividers to support clear visual separation. Proper spacing prevents dividers from interfering with text readability or blending into surrounding layout elements.

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

#### **Exclude dividers from screen readers**

Dividers serve as purely visual structural elements and should not be exposed to assistive technologies. Hiding them from screen readers avoids unnecessary noise and ensures smoother navigation for all users.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                              | Collection | CSS var                                        | Preview |
| --------------------------------- | ---------- | ---------------------------------------------- | ------- |
| divider/bold                      | Component  | `var(--dds-divider-bold)`                      | -       |
| color/background/SURFACE/tertiary | Semantic   | `var(--dds-color-background-surface-tertiary)` | #C5D4E3 |
| divider/light                     | Component  | `var(--dds-divider-light)`                     | -       |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-divider--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-divider--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-divider--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-divider--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-divider--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-divider--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

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