- Taxonomic name: A-DIVIDER-LINE
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Divider line
Divider lines are simple elements used to separate of content on a page or within a component, and are available in a number of styles and with different spacing options.
Design and usage
Structure
- 1px line spanning across a content section or card.
- Optional spacing above and below from 0px to 80px.
- Spacing can be set for all screen sizes or individually for mobile, tablet and desktop.
- Built to work on light and dark accent coloured backgrounds.
Accessibility and screen readers
- Grey or colour divider lines permitted on white #fff, light grey #eee and light blue backgrounds or cards #e5edf8.
- White divider lines #fff for dark coloured backgrounds or cards.
Placement
- Can be positioned horizontally as a section divider on components, pages or cards.
Use case and exception scenarios
- Divider line addition is an aesthetic inclusion to provide a separation for content.
- Depending on the colour background it is being framed on, project teams are free to choose its colour from any of the available Framework colours.
Design notes
- 1px width
-
All BG colours permitted. Use the following divider line colours:
-
On white, light grey, light blue backgrounds can use:
- Solid #ccc
- Solid #eee
- Dotted #ccc
-
Dark accent colours can use:
- Solid #fff
- Solid #fff, 50% opacity
- Dotted #fff
- Can span full or partial content section or card component.
- Can be used in conjunction with optional keylines on cards.
-
Examples
Interactive example
Code example
<hr class="a-divider-line [ Modifier ]" />Development and test
Notes for developers
Designed to be used with <hr /> elements (or other elements as required) to separate content (or define a change) in a block of content.
Always use with modifiers to determine spacing and styling
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-divider-line |
Base style for <hr/> element |
Yes | hr |
Strips out default browser styling of <hr/> element |
.a-divider-line--horizontal-solid |
Solid 1px horizontal border | .a-divider-line |
||
.a-divider-line--horizontal-dashed |
Dashed 1px horizontal border | .a-divider-line |
||
.a-divider-line--horizontal-solid-light |
Solid 1px horizontal border in lighter shade of grey or 50% opacity white on dark accents | .a-divider-line |
||
.a-divider-line--columns |
Divider lines to include at the top of a right hand column | .a-divider-line |
This applies an unpadded divider line to separate the contents of what were the left and right columns of a layout when the columns become stacked on tablet or mobile; this divider line is hidden at desktop | |
.a-divider-line--5-all |
Modifier adding a 5px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--10-all |
Modifier adding a 10px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--15-all |
Modifier adding a 15px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--20-all |
Modifier adding a 20px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--25-all |
Modifier adding a 25px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--30-all |
Modifier adding a 30px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--35-all |
Modifier adding a 35px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--40-all |
Modifier adding a 40px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--45-all |
Modifier adding a 45px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--50-all |
Modifier adding a 50px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--55-all |
Modifier adding a 55px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--60-all |
Modifier adding a 60px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--65-all |
Modifier adding a 65px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--70-all |
Modifier adding a 70px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--75-all |
Modifier adding a 75px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--80-all |
Modifier adding a 80px margin above and below the border at all screen sizes | .a-divider-line |
||
.a-divider-line--5-small |
Modifier adding a 5px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--10-small |
Modifier adding a 10px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--15-small |
Modifier adding a 15px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--20-small |
Modifier adding a 20px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--25-small |
Modifier adding a 25px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--30-small |
Modifier adding a 30px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--35-small |
Modifier adding a 35px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--40-small |
Modifier adding a 40px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--45-small |
Modifier adding a 45px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--50-small |
Modifier adding a 50px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--55-small |
Modifier adding a 55px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--60-small |
Modifier adding a 60px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--65-small |
Modifier adding a 65px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--70-small |
Modifier adding a 70px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--75-small |
Modifier adding a 75px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--80-small |
Modifier adding a 80px margin above and below the border at mobile screen size | .a-divider-line |
||
.a-divider-line--5-medium |
Modifier adding a 5px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--10-medium |
Modifier adding a 10px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--15-medium |
Modifier adding a 15px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--20-medium |
Modifier adding a 20px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--25-medium |
Modifier adding a 25px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--30-medium |
Modifier adding a 30px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--35-medium |
Modifier adding a 35px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--40-medium |
Modifier adding a 40px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--45-medium |
Modifier adding a 45px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--50-medium |
Modifier adding a 50px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--55-medium |
Modifier adding a 55px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--60-medium |
Modifier adding a 60px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--65-medium |
Modifier adding a 65px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--70-medium |
Modifier adding a 70px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--75-medium |
Modifier adding a 75px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--80-medium |
Modifier adding a 80px margin above and below the border at tablet screen size | .a-divider-line |
||
.a-divider-line--5-large |
Modifier adding a 5px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--10-large |
Modifier adding a 10px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--15-large |
Modifier adding a 15px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--20-large |
Modifier adding a 20px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--25-large |
Modifier adding a 25px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--30-large |
Modifier adding a 30px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--35-large |
Modifier adding a 35px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--40-large |
Modifier adding a 40px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--45-large |
Modifier adding a 45px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--50-large |
Modifier adding a 50px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--55-large |
Modifier adding a 55px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--60-large |
Modifier adding a 60px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--65-large |
Modifier adding a 65px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--70-large |
Modifier adding a 70px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--75-large |
Modifier adding a 75px margin above and below the border at desktop screen size | .a-divider-line |
||
.a-divider-line--80-large |
Modifier adding a 80px margin above and below the border at desktop screen size | .a-divider-line |
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: Component renamed from a-keyline-divider to differentiate from 4px coloured keylines used above cards, to the left of assumptions, and so on.