Heartwood

Settings List: Default 

<div class="list-header">
    <div class="list-header__text">
        <h3 class="list-header__title">Categories</h3>
    </div>
</div>
<ul class="list settings-list">
    <li class="list-item list-item-title-only">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="barber">Barber</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="barber" />
                <label class="toggle__label" for="barber" />
            </div>

        </div>
    </li>
    <li class="list-item list-item-title-only">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="brow-and-wax">Brow & Wax</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="brow-and-wax" />
                <label class="toggle__label" for="brow-and-wax" />
            </div>

        </div>
    </li>
    <li class="list-item list-item-title-only">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="featured">Featured</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="featured" />
                <label class="toggle__label" for="featured" />
            </div>

        </div>
    </li>
    <li class="list-item list-item-title-only">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="gucci-and-fire">Gucci & Fire</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="gucci-and-fire" />
                <label class="toggle__label" for="gucci-and-fire" />
            </div>

        </div>
    </li>
    <li class="list-item list-item-title-only">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="style-consulting">Style Consulting</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="style-consulting" />
                <label class="toggle__label" for="style-consulting" />
            </div>

        </div>
    </li>
</ul>
 
{{> @list-header }}
{{> @list }}
 
{
  "parentClass": "settings-list",
  "listHeaderTitle": "Categories",
  "items": [
    {
      "title": "Barber",
      "isSetting": true,
      "toggleId": "barber"
    },
    {
      "title": "Brow & Wax",
      "isSetting": true,
      "toggleId": "brow-and-wax"
    },
    {
      "title": "Featured",
      "isSetting": true,
      "toggleId": "featured"
    },
    {
      "title": "Gucci & Fire",
      "isSetting": true,
      "toggleId": "gucci-and-fire"
    },
    {
      "title": "Style Consulting",
      "isSetting": true,
      "toggleId": "style-consulting"
    }
  ]
}

Settings List

Settings Lists group related settings together.