Status
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
Divider
A divider is a thin line placed either horizontally or vertically between elements.
Contents
Contents
Contents
UsageCopy link to this section
Copy link to this section
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.
Illustration of vertical divider usage.
To break up dense content
Make layouts cleaner and more readable by using dividers to create a visual hierarchy.
Illustration of horizontal divider usage.
To separate 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.
Illustration of horizontal divider usage in XS grid.
KindsCopy link to this section
Copy link to this section
There are two types of dividers: vertical and horizontal. 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. Use the secondary for most use cases, and the primary to provide more emphasis to the division.
Secondary vertical divider
Vertical divider treatment, shown with the secondary 1-pixel weight, between two columns of content.
Primary horizontal divider
Horizontal divider, shown with the primary 4-pixel weight.
ColorCopy link to this section
Copy link to this section
Light mode
| Color | Use cases | Hex |
|---|---|---|
| Gray 300 | Divider color | #E1E1E1 |
LayoutCopy link to this section
Copy link to this section
Specifications
Apply dividers to the right or left of an element. To help with placement, use the grid gutters to align dividers and space content. 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.
Illustration of applying vertical dividers to organize two columns of text. In this example, a margin of 16 pixels is applied to each text box to match the gutter size of an L-Default screen. This allows for equal spacing on each side of the divider.
Illustration of applying a horizontal divider to separate elements in a XS or S grid. In this example, a margin of 16 pixels is applied to a primary divider. This allows for equal spacing on each side of the divider.
Illustration of applying a horizontal divider to separate elements in a XS or S grid. In this example, a margin of 16 pixels is applied to a secondary divider. This allows for equal spacing on each side of the divider.
Contents
Contents
Live demoCopy link to this section
Copy link to this section
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
You are now entering a live demo of the component.
<p>
Dell EMC Ready Solutions for Data Analytics are engineering‑tested platforms have been optimized for performance and scalability,
calculated to lower costs for a strong return on investment (ROI), and designed to simplify deployment and operation of data analytics
projects. Consisting of high‑performance Dell EMC servers, networking and storage — along with best‑in‑class software and services — these
solutions are designed to harness the power of data analytics to drive competitive advantage.
</p>
<hr class="dds__divider" />
<p>
Businesses are making huge progress along their journey to their digital future, but challenges remain, and the next disruption could be
around the corner. Dell Technologies can help with world class, end-to-end services and solutions that span the cloud, data center and the
Edge. Find out what’s possible.
</p>