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 |
|---|---|---|---|---|
1 | Divider | The divider is an <hr> HTML tag that comprises of a styled border |
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 |
|---|---|---|---|---|
| Vertical | MQ<boolean> | If provided, changes the flow of the Divider to vertical. |
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 |
|---|---|---|
| Variations | Relevant variations (style, size, orientation etc.) | |
| Interactive states | All interactive states that are applicable (hover, active, focus, focus, disabled, error etc). | |
| Defined behaviours | Guidelines for layout, animation, interactions, etc. | |
| Usage guidelines | Includes a list of dos and don’ts that highlight best practices and common mistakes to avoid. | |
| Accessibility guidelines | Follows WCAG 2.0 standards (AA). Accessibility documentation defined including focus order, keyboard interactions and ARIA. | |
| SEO guidelines | Conforms to best practice SEO techniques. SEO considerations defined. | |
| Props | Details of component properties - their name, type, options, default, whether it’s required and their description have been defined. | |
| Technical performance considerations | Details on how this component may impact performance. | |
| Available in UI kit | Included within Figma Web Gallery file. | |
| Design specifications | Detailed design specification including sizing, spacing and design tokens defined. | |
| Themes | Displays correctly across light and dark themes. |
Cant find what you are looking for?
Cant find what you are looking for?