Heartwood

Settings List: With Action 

<div class="list-header">
    <div class="list-header__text">
        <h3 class="list-header__title">Category Settings</h3>
    </div>
</div>
<ul class="list settings-list">
    <li class="list-item">

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="hide">Hide this category</label>
            <p class="list-item__subtitle">Guests cannot book hidden services</p>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="hide" />
                <label class="toggle__label" for="hide" />
            </div>

        </div>
    </li>
</ul>
 
{{> @list-header }}
{{> @list }}
 
{
  "parentClass": "settings-list",
  "listHeaderTitle": "Category Settings",
  "items": [
    {
      "title": "Hide this category",
      "subtitle": "Guests cannot book hidden services",
      "isSetting": true,
      "toggleId": "hide"
    }
  ]
}

Settings List

Settings Lists group related settings together.