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.