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.