Border

The border component provides the following classes:

Class What it does?
border Styles an element with border on all sides.
border--top Styles an element with a top border.
border--left Styles an element with a left border
border--bottom Styles an element with a bottom border
border--right Styles an element with a right border
border--none Removes the border of an element on all sides.
border__bar--top Styles an element with a top border half the thick of your gutter.
border__bar--bottom Styles an element with a bottom border half the thick of your gutter.
border__bar--left Styles an element with a left border half the thick of your gutter.
border__bar--right Styles an element with a right border half the thick of your gutter.

Note that these classes were generated from mixins. This means that you can use border mixins if you are developing a theme using SCSS.

<p class="border__bar--left padding--l">Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</p>

Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.