<div class="list-wrapper">
<div class="list-header">
<div class="list-header__text">
<h3 class="list-header__title">Team Schedule</h3>
<p class="list-header__subtitle">Mon, Sep 27</p>
</div>
<ul class="list-header__actions">
<li class="list-header__action-wrapper">
<button class="btn btn-simple btn-small " type="button">
<span class="btn__inner">
<span class="btn__text">Today</span>
</span>
</button>
</li>
<li class="list-header__action-wrapper">
<button class="btn btn-simple btn-small 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="M1.625 5.625C1.625 4.79657 2.29657 4.125 3.125 4.125H18.875C19.7034 4.125 20.375 4.79657 20.375 5.625V18.875C20.375 19.7034 19.7034 20.375 18.875 20.375H3.125C2.29657 20.375 1.625 19.7034 1.625 18.875V5.625Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M1.625 9.125H20.375" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M6.625 6V1.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M15.375 6V1.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.6875 12.25C5.51491 12.25 5.375 12.3899 5.375 12.5625C5.375 12.7351 5.51491 12.875 5.6875 12.875C5.86009 12.875 6 12.7351 6 12.5625C6 12.3899 5.86009 12.25 5.6875 12.25" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.6875 16.625C5.51491 16.625 5.375 16.7649 5.375 16.9375C5.375 17.1101 5.51491 17.25 5.6875 17.25C5.86009 17.25 6 17.1101 6 16.9375C6 16.7649 5.86009 16.625 5.6875 16.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11 12.25C10.8274 12.25 10.6875 12.3899 10.6875 12.5625C10.6875 12.7351 10.8274 12.875 11 12.875C11.1726 12.875 11.3125 12.7351 11.3125 12.5625C11.3125 12.3899 11.1726 12.25 11 12.25" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11 16.625C10.8274 16.625 10.6875 16.7649 10.6875 16.9375C10.6875 17.1101 10.8274 17.25 11 17.25C11.1726 17.25 11.3125 17.1101 11.3125 16.9375C11.3125 16.7649 11.1726 16.625 11 16.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.3125 12.25C16.1399 12.25 16 12.3899 16 12.5625C16 12.7351 16.1399 12.875 16.3125 12.875C16.4851 12.875 16.625 12.7351 16.625 12.5625C16.625 12.3899 16.4851 12.25 16.3125 12.25" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M16.3125 16.625C16.1399 16.625 16 16.7649 16 16.9375C16 17.1101 16.1399 17.25 16.3125 17.25C16.4851 17.25 16.625 17.1101 16.625 16.9375C16.625 16.7649 16.4851 16.625 16.3125 16.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</span>
</button>
</li>
<li class="list-header__action-wrapper">
<button class="btn btn-simple btn-small 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-rule="evenodd" clip-rule="evenodd" d="M16.6667 9.16658H6.52499L11.1833 4.50825L9.99999 3.33325L3.33333 9.99992L9.99999 16.6666L11.175 15.4916L6.52499 10.8333H16.6667V9.16658V9.16658Z"/>
</svg>
</span>
</span>
</button>
</li>
<li class="list-header__action-wrapper">
<button class="btn btn-simple btn-small 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-rule="evenodd" clip-rule="evenodd" d="M10 3.33325L8.825 4.50825L13.475 9.16658H3.33334V10.8333H13.475L8.825 15.4916L10 16.6666L16.6667 9.99992L10 3.33325Z"/>
</svg>
</span>
</span>
</button>
</li>
</ul>
</div>
<ul class="list people-list">
<li class="list-item">
<div class="list-item__image-wrapper">
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Vicenta Maggio</p>
<p class="list-item__subtitle">7am–5pm, Break: 2–3:25pm</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>
</li>
<li class="list-item">
<div class="list-item__image-wrapper">
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1517462964-21fdcec3f25b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c6622d956bd3bb519516691c31141f4&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Madaline Gibson</p>
<p class="list-item__subtitle">9am–6pm, Break: 12–1pm</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>
</li>
<li class="list-item">
<div class="list-item__image-wrapper">
<div class="avatar-wrapper">
<div class="avatar__image-wrapper">
<img class="avatar" src=https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=214b5beac96f7d680a19b3836b28ccc3&auto=format&fit=crop&w=192&h=192&q=80
alt=w idth="40" height="40" />
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Katlynn Pouros</p>
<p class="list-item__subtitle">9am–5pm</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>
</li>
</ul>
</div>
<div class="list-wrapper">
{{> @list-header }}
{{#if bottext}}
{{> @bottext text=bottext}}
{{/if}}
{{#if tabs}}
{{> @tabs}}
{{/if}}
{{> @list }}
</div>
{
"parentClass": "people-list",
"listHeaderTitle": "Team Schedule",
"listHeaderSubtitle": "Mon, Sep 27",
"actions": [
{
"text": "Today",
"class": "btn-simple btn-small"
},
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M1.625 5.625C1.625 4.79657 2.29657 4.125 3.125 4.125H18.875C19.7034 4.125 20.375 4.79657 20.375 5.625V18.875C20.375 19.7034 19.7034 20.375 18.875 20.375H3.125C2.29657 20.375 1.625 19.7034 1.625 18.875V5.625Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M1.625 9.125H20.375\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M6.625 6V1.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M15.375 6V1.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.6875 12.25C5.51491 12.25 5.375 12.3899 5.375 12.5625C5.375 12.7351 5.51491 12.875 5.6875 12.875C5.86009 12.875 6 12.7351 6 12.5625C6 12.3899 5.86009 12.25 5.6875 12.25\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.6875 16.625C5.51491 16.625 5.375 16.7649 5.375 16.9375C5.375 17.1101 5.51491 17.25 5.6875 17.25C5.86009 17.25 6 17.1101 6 16.9375C6 16.7649 5.86009 16.625 5.6875 16.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M11 12.25C10.8274 12.25 10.6875 12.3899 10.6875 12.5625C10.6875 12.7351 10.8274 12.875 11 12.875C11.1726 12.875 11.3125 12.7351 11.3125 12.5625C11.3125 12.3899 11.1726 12.25 11 12.25\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M11 16.625C10.8274 16.625 10.6875 16.7649 10.6875 16.9375C10.6875 17.1101 10.8274 17.25 11 17.25C11.1726 17.25 11.3125 17.1101 11.3125 16.9375C11.3125 16.7649 11.1726 16.625 11 16.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.3125 12.25C16.1399 12.25 16 12.3899 16 12.5625C16 12.7351 16.1399 12.875 16.3125 12.875C16.4851 12.875 16.625 12.7351 16.625 12.5625C16.625 12.3899 16.4851 12.25 16.3125 12.25\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M16.3125 16.625C16.1399 16.625 16 16.7649 16 16.9375C16 17.1101 16.1399 17.25 16.3125 17.25C16.4851 17.25 16.625 17.1101 16.625 16.9375C16.625 16.7649 16.4851 16.625 16.3125 16.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
"class": "btn-simple btn-small"
},
{
"icon": "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.6667 9.16658H6.52499L11.1833 4.50825L9.99999 3.33325L3.33333 9.99992L9.99999 16.6666L11.175 15.4916L6.52499 10.8333H16.6667V9.16658V9.16658Z\"/>",
"class": "btn-simple btn-small"
},
{
"icon": "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10 3.33325L8.825 4.50825L13.475 9.16658H3.33334V10.8333H13.475L8.825 15.4916L10 16.6666L16.6667 9.99992L10 3.33325Z\"/>",
"class": "btn-simple btn-small"
}
],
"items": [
{
"title": "Vicenta Maggio",
"subtitle": "7am–5pm, Break: 2–3:25pm",
"image": "https://images.unsplash.com/photo-1524593689594-aae2f26b75ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4c06a1bc6123a9ac6645a269314334b2&auto=format&fit=crop&w=192&h=192&q=80",
"imageIsAvatar": true,
"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": "Madaline Gibson",
"subtitle": "9am–6pm, Break: 12–1pm",
"image": "https://images.unsplash.com/photo-1517462964-21fdcec3f25b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9c6622d956bd3bb519516691c31141f4&auto=format&fit=crop&w=192&h=192&q=80",
"imageIsAvatar": true,
"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": "Katlynn Pouros",
"subtitle": "9am–5pm",
"image": "https://images.unsplash.com/photo-1489424731084-a5d8b219a5bb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=214b5beac96f7d680a19b3836b28ccc3&auto=format&fit=crop&w=192&h=192&q=80",
"imageIsAvatar": true,
"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\"/>"
}
]
}
]
}
People Lists group people together.