<!-- 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>
<!-- 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>
<!-- 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>
<!-- Teammate Services -->
<div class="list-header">
<div class="list-header__text">
<h3 class="list-header__title">Serviecs</h3>
</div>
</div>
<ul class="list settings-list">
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="beard-tinting">Beard Tinting</label>
<p class="list-item__subtitle">$20 | 40min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="beard-tinting" />
<label class="toggle__label" for="beard-tinting" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="hair-tinting">Hair Tinting</label>
<p class="list-item__subtitle">$30 | 40min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="hair-tinting" />
<label class="toggle__label" for="hair-tinting" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="shampoo">Shampoo</label>
<p class="list-item__subtitle">$7 | 30min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="shampoo" />
<label class="toggle__label" for="shampoo" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="the-regular">The Regular</label>
<p class="list-item__subtitle">$32.55 | 50min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="the-regular" />
<label class="toggle__label" for="the-regular" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="signature-follow-up">Signature Follow-Up</label>
<p class="list-item__subtitle">Free | 30min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="signature-follow-up" />
<label class="toggle__label" for="signature-follow-up" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="young-spruce">Young Spruce</label>
<p class="list-item__subtitle">$23 | 50min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="young-spruce" />
<label class="toggle__label" for="young-spruce" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="signature">Signature</label>
<p class="list-item__subtitle">$40 | 1hr 5min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="signature" />
<label class="toggle__label" for="signature" />
</div>
</div>
</li>
<li class="list-item">
<div class="list-item__text-wrapper">
<label class="list-item__title" for="clean-up">Clean Up</label>
<p class="list-item__subtitle">$20 | 35min</p>
</div>
<div class="list-item__actions-wrapper">
<button class="btn btn-simple btn-small list-item__action btn-icon-only " type="button">
<span class="btn__inner">
<span class="btn__icon-wrapper">
<?xml version="1.0" encoding="utf-8"?>
<svg
class='btn__icon '
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enable-background="new 0 0 24 24"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.29 3.05762L18.9417 5.70928" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</div>
<div class="toggle__wrapper">
<div class="toggle">
<input class="toggle__input" type="checkbox" id="clean-up" />
<label class="toggle__label" for="clean-up" />
</div>
</div>
</li>
</ul>
{{> @list-header }}
{{> @list }}
/* Default */
{
"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"
}
]
}
/* With Action */
{
"parentClass": "settings-list",
"listHeaderTitle": "Category Settings",
"items": [
{
"title": "Hide this category",
"subtitle": "Guests cannot book hidden services",
"isSetting": true,
"toggleId": "hide"
}
]
}
/* Reminders */
{
"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"
}
]
}
/* Teammate Services */
{
"parentClass": "settings-list",
"listHeaderTitle": "Serviecs",
"items": [
{
"title": "Beard Tinting",
"subtitle": "$20 | 40min",
"isSetting": true,
"toggleId": "beard-tinting",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Hair Tinting",
"subtitle": "$30 | 40min",
"isSetting": true,
"toggleId": "hair-tinting",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Shampoo",
"subtitle": "$7 | 30min",
"isSetting": true,
"toggleId": "shampoo",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "The Regular",
"subtitle": "$32.55 | 50min",
"isSetting": true,
"toggleId": "the-regular",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Signature Follow-Up",
"subtitle": "Free | 30min",
"isSetting": true,
"toggleId": "signature-follow-up",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Young Spruce",
"subtitle": "$23 | 50min",
"isSetting": true,
"toggleId": "young-spruce",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Signature",
"subtitle": "$40 | 1hr 5min",
"isSetting": true,
"toggleId": "signature",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
},
{
"title": "Clean Up",
"subtitle": "$20 | 35min",
"isSetting": true,
"toggleId": "clean-up",
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8709 12.7801L8.77759 13.2226L9.21925 10.1284L17.1743 2.17345C17.9065 1.44121 19.0937 1.44121 19.8259 2.17345C20.5582 2.90568 20.5582 4.09288 19.8259 4.82511L11.8709 12.7801Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.29 3.05762L18.9417 5.70928\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.625 12.875V19.125C16.625 19.8154 16.0654 20.375 15.375 20.375H2.875C2.18464 20.375 1.625 19.8154 1.625 19.125V6.625C1.625 5.93464 2.18464 5.375 2.875 5.375H9.125\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
}
]
}
]
}
Settings Lists group related settings together.