Preview
Hr
Applies $separator styling defined at _config.scss.
It won’t be affected if $separators is set to false. <hr> is a semantical element and we understand it requires to be visible no matter what.
It also eliminates ridge/bevel effects.
The whole separators strategy will likely be refactored soon. They’re not consistent enough.
Example
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias nihil eveniet tempore debitis nostrum sit dolorum fuga, adipisci ducimus. Odit voluptas, doloremque assumenda temporibus necessitatibus voluptate ab tenetur illo nobis.</p>
<hr>
<p>If you can't see the horizontal rule - but can see the additional space - this means $separator variable is set to true</p>
Assets
- Filesystem Path: src/components/html/hr/_hr.scss
- Size: 109 Bytes
-
Content:
hr { height: 0; overflow: visible; border:none; border-bottom: $separator-width solid $separator-color; }