Horizontal Rule
Last updated: 9/20/21
Use a Horizontal Rule to draw a line to divide content.
Styles
Use the base class pier-hr to create a Horizontal Rule. Use the modifier classes pier-hr--dark or pier-hr--hero to change the style.
HTML markup
<hr class="pier-hr -m-b-5" />
<hr class="pier-hr pier-hr--dark -m-b-5" />
<hr class="pier-hr pier-hr--hero" />
Sizes
Use the modifier classes pier-hr--sm, pier-hr--md, or pier-hr--lg to change the size of the Horizontal Rule.
HTML markup
<hr class="pier-hr pier-hr--sm -m-b-5" />
<hr class="pier-hr pier-hr--md -m-b-5" />
<hr class="pier-hr pier-hr--lg" />
Dark
Use the modifier classes pier-hr--white to change the style of the Horizontal Rule to white.
HTML markup
<hr class="pier-hr -m-b-5" />
<hr class="pier-hr pier-hr--white -m-b-5" />
<hr class="pier-hr pier-hr--dark -m-b-5" />
<hr class="pier-hr pier-hr--hero" />
© 2021 Gumgum, Inc.