# Divider

### Usage

A divider is a thin line that groups content in lists, layouts and can be used in tables when needed. See tables for further clarification on when to use a divider.

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAb6FXWly2ggQ9NQpI1%2F-MAb6bf3uIWpyZfrAwv5%2FDividers.png?alt=media\&token=707d97cb-af4c-48ab-bf18-f6c7f408a901)

### Best Practices

* Use dividers to separate content into clear groups. 
* Dividers should be noticeable in a layout, but not jarring. 
* Dividers should only be used if elements cannot be separated using white space. 
* Use dividers sparingly, to create groupings rather than separate items.
* Dividers can be used vertically to help group content within a table. 

### Divider size

Divider do not have any states

* Colour Grey L70 or white if a dark background is being used
* Horizontal divider - 1px height max
* Vertical divider - 1px width max