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