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 |
A divider is a thin line placed either horizontally or vertically between elements.
PublishedElement can be used in production | |
PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
React | In backlogElement is in backlog |
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.
Apply dividers between collections of content to delineate groups of content and create the appearance of containers.
Illustration of vertical divider usage.
Make layouts cleaner and more readable by using dividers to create a visual hierarchy.
Illustration of horizontal divider usage.
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.
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.
Vertical divider treatment, shown with the secondary 1-pixel weight, between two columns of content.
Horizontal divider, shown with the primary 4-pixel weight.
Color | Use cases | Hex |
---|---|---|
Gray 300 | Divider color | #E1E1E1 |
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.
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.
<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>
Copy code