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
Status
Supported
Introduced
v3.8.0
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 |
|---|