Skip to main content
Design system

Divider

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

Bundle size: 5.68 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Divider } from "@washingtonpost/wpds-ui-kit"
|Copy

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
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