Heartwood

Settings List: Reminders 

<div class="list-header">
    <div class="list-header__text">
        <h3 class="list-header__title">Reminders</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="before">Send me a reminder before each shift</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="before" />
                <label class="toggle__label" for="before" />
            </div>

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

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="sunday">Send me my schedule for the week every Sunday evening</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="sunday" />
                <label class="toggle__label" for="sunday" />
            </div>

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

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="changed">Let me know when my schedule has changed</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="changed" />
                <label class="toggle__label" for="changed" />
            </div>

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

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="morning">Send me the team's Schedule first thing in the morning</label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="morning" />
                <label class="toggle__label" for="morning" />
            </div>

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

        <div class="list-item__text-wrapper">
            <label class="list-item__title" for="teammate">Notify me when a teammate's availability changes </label>
        </div>
        <div class="toggle__wrapper">
            <div class="toggle">
                <input class="toggle__input" type="checkbox" id="teammate" />
                <label class="toggle__label" for="teammate" />
            </div>

        </div>
    </li>
</ul>
 
{{> @list-header }}
{{> @list }}
 
{
  "parentClass": "settings-list",
  "listHeaderTitle": "Reminders",
  "items": [
    {
      "title": "Send me a reminder before each shift",
      "isSetting": true,
      "toggleId": "before"
    },
    {
      "title": "Send me my schedule for the week every Sunday evening",
      "isSetting": true,
      "toggleId": "sunday"
    },
    {
      "title": "Let me know when my schedule has changed",
      "isSetting": true,
      "toggleId": "changed"
    },
    {
      "title": "Send me the team's Schedule first thing in the morning",
      "isSetting": true,
      "toggleId": "morning"
    },
    {
      "title": "Notify me when a teammate's availability changes ",
      "isSetting": true,
      "toggleId": "teammate"
    }
  ]
}

Settings List

Settings Lists group related settings together.