---
title: Dividers & expanders
layout: common-ux-layout.hbs
---

<h2>Dividers</h2>

<section class="sg-section">
  <div class="sg-grid responsive">
    <label>divider</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html"><hr></div>
    </div>

    <label>form-divider</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html"><hr class="form-divider"></div>
    </div>

    <label>price-divider</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html"><hr class="price-divider"></div>
    </div>

    <label>strike-divider</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>strike_divider text='Average for June'}}</div>
    </div>

    <label>strike divider</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>strike_divider text='Average for June'}}</div>
    </div>

    <h2>Expanders</h2>
    <label>strike divider</label>
    <div class="sg-item">
      <div class=" module-library-block" data-code="html">{{>strike_divider text='Visa alla (166)' cssClass='show-more-items-strike-text'}}</div>
    </div>

    <label>TUI Expander</label>
    <div class="sg-item">
      <div class="module-library-block" data-code="html">{{>facts_icon_list facts-icon-list}}{{>tui_expander}}</div>
    </div>
  </div>
</section>