Shipyard doesn’t make any assumptions on how you want to common tags like an hr to styled. As a result, we would recommend extending the .hr class in your own SASS files to achieve the results below on all hr tags (e.g. @extend .hr).
Please note that the code examples below are not possible without hr { @extend .hr } somewhere in your application’s sass files. If you haven’t done this, then you’ll need to include the .hr class on every horizontal rule.
<hr />
.hr-thin<hr class="hr-thin" />
Useful when you have a horizontal rule on a darker background.
<hr class="hr-dark" />
Useful when you have a horizontal rule on a lighter background.
<hr class="hr-light" />
Here’s the raw CSS output if you’d like a peak under the hood.
.hr { height: 0; border: 0 solid rgba(89,123,145,0.12); overflow: visible; position: relative; border-width: 2px 0 0; margin: 20px 0 }
@media screen and (min-width: 576px) {
.hr { margin: 30px 0 }
}
.hr-dark { border-color: rgba(89,123,145,0.3) }
.hr-light { border-color: rgba(89,123,145,0.08) }
.hr-thin { border-width: 1px 0 0 }