Divider
A simple way to divide content on your pages. It is a great way to organize and clean up a page.
- Use a color picker to style your lines
- Add header text to your divider line
- Style header text
- Choose a line thickness
- Select a style line style that matches your content
Example
For our Divider stack examples we’ve divided several paragraphs below with different divider lines and styled each one uniquely.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Header
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Using Divider
Style
Style
Opt to use the default Divider styling or to use a color picker to customize the Divider line.
Divider Type
Allows you to choose what type of divider line you wish to use. You can choose form Solid, Dashed, Dotted, Double or Solid with Label. If using the Double style you will want to make sure to use a width of 3px or larger.
Thickness
Set the size of your divider line.
Width
You can choose how wide you wish your divider line to be. By default it is 100% in width, filling up any parent stack it is placed within. You can set one width for all breakpoints, or choose to set a different width at each of the three breakpoints.
Header
These options are enabled only when using the "Solid with Label" Divider Type.
Header
Insert your own custom header text in your divider.
Header Color
Select the color you wish your header to be using a custom color picker.
Uppercase Title
Enable to force the header label to be all uppercase letters.