Vanilla gives you multiple ways to separate parts of the content with a horizontal line.
Use the standard
<hr> element to introduce section breaks.
Muted horizontal rule
is-muted class to an
<hr> to make the horizontal rule lighter in colour.
This can be useful when trying to create a more subtle partitioning within a section within a container, or between standard horizontal rules.
Fixed width horizontal rule
Often it is useful to add a rule that aligns with content placed in a grid
row class. One way to do that is to wrap an
<hr> in a
div with class
row. To avoid the need for a wrapping element, add the class
is-fixed-width directly on the
To separate block sections of the page, use the separator component
For content contained in strips, use the bordered strip variant.
The styles for the horizontal line element are included in Vanilla base.
To import the separator component copy the snippets below and include it in your main Sass file.
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.