Dividers

Horizontal and vertical content dividers.

Createx component

Horizontal: basic


<!-- Basic horizontal divider -->
<hr>

Horizontal: gradient


<!-- Horizontal gradient divider -->
<hr class="hr-gradient">

Horizontal: light version



<!-- Horizontal light divider -->
<hr class="hr-light">

<!-- Horizontal gradient light divider -->
<hr class="hr-gradient hr-light">

Vertical: gradient

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
<!-- Vertical divider -->
<div class="row">
  <div class="col py-3">
    Lorem ipsum...
  </div>

    <!-- divider -->
    <span class="divider-vertical"></span>
  <div class="col py-3">
    Lorem ipsum...
  </div>

    <!-- divider -->
    <span class="divider-vertical"></span>
  <div class="col py-3">
    Lorem ipsum...
  </div>
</div>

Vertical: gradient light version

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus cupiditate, consequatur vitae quo laborum facere?
<!-- Vertical divider light -->
<div class="row">
  <div class="col py-3">
    Lorem ipsum...
  </div>

    <!-- divider -->
    <span class="divider-vertical divider-light"></span>
  <div class="col py-3">
    Lorem ipsum...
  </div>

    <!-- divider -->
    <span class="divider-vertical divider-light"></span>
  <div class="col py-3">
    Lorem ipsum...
  </div>
</div>
Top