Newskit Logo
About

Components

Divider

A divider is used to provide visual separation of different content. Dividers can be applied vertically or horizontally.

Status

Supported

Introduced

v3.8.0
View code

Status

Supported

Introduced

Anatomy

The Divider contains one required element.

ItemNameDescriptionComponentOptional

Options

The Divider has an option that can be used to provide an appropriate experience for different use cases.

Orientation

A Divider can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.

Orientation

A Divider can be displayed horizontally or vertically to effectively and appropriately use the space on a screen.

Example

Below are examples of using the Divider:

With Stack

In this example, we demonstrate how to use the divider inside a

Stack
. In scenarios where you want equal spacing, we would recommend using this approach over the Block examples below. We use
flow=horizontal-stretch
and wrap the
Divider
in a
StackChild
to get it to stretch to the height of the container.

With Block

This approach should be used where you have irregular spacing between elements.

Horizontal Divider

In this example, we demonstrate the divider as a visual separator between two block elements. The container

StyledBlock
is being used to constrain the divider's width.

Vertical Divider

In this example, we demonstrate the vertical divider, used as a visual separator between two inline blocks. We use

InlineDividerContainer
to constrain the height of the block.

Usage

The following guidance describes how and when to appropriately use a Divider component.

Do

Dividers should be used when there is a requirement for a semantic divider element.

Where there is need for a decorative border using a border on a StylePreset may be more appropriate.

API

The Divider has a prop that can be used to define an appropriate experience for different use cases.

NameTypeDefaultDescriptionRequired

Compliance

All of the components in the NewsKit design system go through a comprehensive set of checks to ensure that we are producing compliant and best practice components.

FeatureDescriptionStatus

Need Help?

Cant find what you are looking for?

Need Help?

Cant find what you are looking for?