Skip to main content
Design system

Divider

A divider is a thin rule or line that creates visual separation in a layout.

Bundle size: 4.79 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Divider } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

Anatomy

Note: Image is not to scale

  1. Divider

Options

Orientation

Dividers can be used to separate individual items in a list, or to to provide clearer visual distinction between two or more grouped elements. They can be oriented vertically or horizontally, depending on the layout in which they occur.

Color

Sometimes it's helpful to use dividers as a means of delineating sections of a page or key areas of content. In many cases, a “strong” divider placed above the content can be used to mark the start of a new section and helps distinguish the area from the surrounding layout.

Behavior

Fill Container

By default, a divider line should span the full horizontal or vertical dimension of its parent element. The actual height or width of the containing element should derive from its content, unless otherwise specified.

API Reference

Divider

PropDescriptionTypeDefaultRequired
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
variantSets the color of the divider
enum
strong | default
default False
orientationEither `vertical` or `horizontal`. Defaults to `horizontal`.
enum
horizontal | vertical
----False
decorativeWhether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree.
enum
boolean
----False
asChild
enum
boolean
----False