Createx UI Kit | Dividers

Horizontal: basic

Result
HTML

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

Horizontal: gradient

Result
HTML

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

Horizontal: light version

Result
HTML

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

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

Vertical: gradient

Use the vertical divider inside flex container only.

Result
HTML

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

Use the vertical divider inside flex container only.

Result
HTML

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>