Separators
Vanilla gives you multiple ways to separate parts of the content with a horizontal line.
Horizontal rule
Use the standard <hr>
element to introduce section breaks.
Muted horizontal rule
Add the 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 <hr>
.
Separator
To separate block sections of the page, use the separator component <hr class="p-separator">
.
Bordered strips
For content contained in strips, use the bordered strip variant.
Import
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.
@import 'patterns_separator';
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.