Components
Divider
A divider is used to provide visual separation of different content. Dividers can be applied vertically or horizontally.
Status
Supported
Introduced
Anatomy
The Divider contains one required element.
| Item | Name | Description | Component | Optional |
|---|
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
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
Vertical Divider
In this example, we demonstrate the vertical divider, used as a visual separator between two inline blocks. We use
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.
| Name | Type | Default | Description | Required |
|---|
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.
| Feature | Description | Status |
|---|