Horizontal Rule


Spec

Anatomy of the Horizontal Rule

The HTML horizontal rule of this theme is composed of a bottom border and a top border. In the case of a single line rule, the bottom border is used and adjusted to display in the center of the line.

Standard Rule

Double Line Rule

Gradient Rule

Build Your Own Horizontal Rule

A common horizontal rule use case is the inclusion of text or an icon. This is unsupported with “HR” tag but can be achieved by using tail wind classes and the “div” tag. The following are some examples.

Custom Rule with Text
Single Line Rule with with Centered Text

Chapter 1

Single Line Rule with Centered Icon

§

Single Line Rule with Centered Font Awesome Icon


Double Line Rule with Text
Chapter 1

1x Blank Line

Souce Code

<h4 id="anatomy-of-the-horizontal-rule">Anatomy of the Horizontal Rule</h4>
<p>The HTML horizontal rule of this theme is composed of a bottom border and a top border. In the case of a single line rule, the bottom border is used and adjusted to display in the center of the line.</p>
<h5 id="standard-rule">Standard Rule</h5>
<hr />
<h5 id="double-line-rule">Double Line Rule</h5>
<hr class="double" />
<h5 id="gradient-rule">Gradient Rule</h5>
<hr class="gradient" />
<h4 id="build-your-own-horizontal-rule">Build Your Own Horizontal Rule</h4>
<p>A common horizontal rule use case is the inclusion of text or an icon. This is unsupported with "HR" tag but can be achieved by using tail wind classes and the “div” tag. The following are some examples.</p>
<h5 id="custom-rule-with-text">Custom Rule with Text</h5>
<h6>Single Line and Text Centered</h6>
<div class="flex flex-row flex-no-wrap justify-around content-center items-center">
  <div class="w-2/5 sm:1/3 bg-transparent"><hr class="w-full" /></div>
  <div class="text-base text-center text-grey bg-transparent uppercase font-light tracking-wide sm:text-sm">Chapter 1</div>
  <div class="w-2/5 sm:1/3 bg-transparent"><hr class="w-full" /></div>
</div>
<h6>Double Lines and Text Left</h6>
<div class="flex flex-row flex-no-wrap justify-start content-center items-stretch">
  <div class="w-1/6 text-grey bg-transparent uppercase font-light tracking-wide sm:text-sm">Chapter 1</div>
  <hr class="w-full double" />
</div>
<h5 id="custom-rule-with-icon">Custom Rule with Icon</h5>
<div class="flex flex-row flex-no-wrap justify-around content-center items-center">
  <div class="w-2/5 bg-transparent"><hr class="w-full" /></div>
  <div class="text-base text-center text-green bg-transparent">§</div>
  <div class="w-2/5 bg-transparent"><hr class="w-full" /></div>
</div>
<h5 id="custom-rule-with-font-awesome-icon">Custom Rule with Font Awesome Icon</h5>
<div class="flex flex-row flex-no-wrap justify-around content-center items-center">
  <div class="w-2/5 bg-transparent"><hr class="w-full" /></div>
  <div class="text-base text-center text-indigo-lightest bg-transparent"><i class="fa fa-cogs"></i></div>
  <div class="w-2/5 bg-transparent"><hr class="w-full" /></div>
</div>

<p class="bl-1x">1x Blank Line</p>
<div class="w-full icon-sm icon-deeporange-lightest fa-comment-o"><span class="text-sm text-grey-dark pl-1"><a href="http://fontawesome.io/icons/">Font Awesome Icons</a></span></div>