Divider

Overview

A divider is a thin line that separates content helping to create visual grouped layouts.

Anatomy

The divider is an hr tag that comprises of a styled border. It can flow horizontal or vertical. The divider is set to be 100% of its container's corresponding width or height depending on the flow of the divider. This means that if you want to restrain its size, you will need to wrap it in a container with the corresponding size.

Props

The divider has a number of props to facilitate a variety of uses. Custom and required props are detailed below:

verticalMQ<boolean> = false

If provided changes the flow of the divider to vertical.

overridesobject

If provided, overrides the respective presets for the component. Here are the overrides that the Divider accepts:

stylePresetMQ<string>

If provided, overrides the style preset applied to the Divider. The style preset can modify the borderStyle, borderColor and borderWidth.

Refer to the defaults below for the object structure:

{
  stylePreset: "divider"
}

Playground

VerticalUnsettrue

import React from 'react';
import { Divider } from 'newskit';

export default () => <Divider />;

For more information on overriding component defaults, see the docs here.

Spacing

The divider does not apply any spacing presets. So in order to add space around it, you will need to wrap it in a corresponding Block or Stack component, then you can apply the spacing presets to the container. Here are a few examples to demonstrate the usages of a container elements to set spacings:

Note: The divider always stretches to 100% of the corresponding size of the container.

With Stack

In this example, we demonstrate how to use the divider inside a Stack. 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

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.