Dividers

These dividers are useful to divide content, indicating what is related or not.

Horizontal dividers

is-perforated - to divide related content. Just like perforated paper.
is-divided - to divide none related content

Vertical divider

hx-divider - a vertical divider, fixed height of 20px. Also see the toolbar for examples.

Examples

      

<h5 class="mb-4">Horizontal divider examples</h5>
<div class="hx-columns">
  <div class="hx-column">
    <div class="hx-card">
        <div class="py-8 px-4">Content</div>
        <hr class="is-perforated" />
        <div class="py-4 px-4">Related Content</div>
    </div>
  </div>
   <div class="hx-column">
    <div class="hx-card">
        <div class="py-8 px-4">Content</div>
        <hr class="is-divided" />
        <div class="py-4 px-4">Non Related Content</div>
    </div>
  </div>
</div>

<h5 class="mb-4">Vertical divider examples</h5>

<div class="hx-columns">
  <div class="hx-column is-3">
    <button class="hx-button is-primary">Click me</button>
  </div>
  <div class="hx-column is-3 hx-flex-align-self-center">
    Hello
  </div>
  <div class="hx-divider"></div>
  <div class="hx-column">
    <div class="hx-input-control mt-2">
      <div class="hx-checkbox-control my-0">
        <input name="checkboxGroup1" type="checkbox" class="hx-checkbox" id="option1">
        <label for="option1" class="hx-label">Option 1</label>
      </div>
    </div>
  </div>
</div>

<div class="hx-flex">
  <a href="">Link 1</a>
  <div class="hx-divider"></div>
  <a href="">Link 2</a>
</div>

Horizontal divider examples

Content

Vertical divider examples

Hello

Option 1

Link 1

Link 2