<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 }}
{
  "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 List

Settings Lists group related settings together.