Divider

This is a horizontal line used to divide sections.

Properties

Name
Default
Description
color
var(--accent-lightest)
The color of the divider.
height
1
The height of the divider in pixels (px).
width
100
The width of the divider as a percentage (%).
margin
0
The margin of the divider in pixels (px).
align
center
The alignment of the divider
  • start
  • center
  • end

Examples

Here, we have a simple divider with the default settings.

<Divider />

with align="center"

<Divider 
    color=var(--red-light) 
    height={3} 
    width={50} 
    margin={3} 
    align="center"
/>

with align="start"

<Divider 
    color=var(--blue-light) 
    height={2} 
    width={80} 
    margin={5} 
    align="start"
/>
<Divider 
    color="var(--green-light)"
    height={4} 
    width={70} 
    margin={7} 
    align="end"
/>