<div class="list-wrapper">
<div class="list-header">
<div class="list-header__text">
<h3 class="list-header__title">Notes</h3>
</div>
</div>
<ul class="tab-group">
<li class="tab">
<button class="btn tab__inner tab--is-current " type="button">
<span class="btn__inner">
<span class="btn__text">Guests</span>
</span>
</button>
</li>
<li class="tab">
<button class="btn tab__inner " type="button">
<span class="btn__inner">
<span class="btn__text">Team</span>
</span>
</button>
</li>
<li class="tab">
<button class="btn tab__inner " type="button">
<span class="btn__inner">
<span class="btn__text">Settings</span>
</span>
</button>
</li>
</li>
</ul>
<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=../../images/user-placeholder.png alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Autumn Jacobi</p>
<p class="list-item__subtitle">No Notes</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="22px"
height="22px"
viewBox="0 0 22 22"
enable-background="new 0 0 22 22"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 7.87427H11.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 11.6243H7.875" 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=../../images/user-placeholder.png alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Dylan Moore</p>
<p class="list-item__subtitle">No Notes</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="22px"
height="22px"
viewBox="0 0 22 22"
enable-background="new 0 0 22 22"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 7.87427H11.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 11.6243H7.875" 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=../../images/user-placeholder.png alt=w idth="40" height="40" />
<div class="avatar__indicator"></div>
</div>
</div>
</div>
<div class="list-item__text-wrapper">
<p class="list-item__title">Genoveva Leannon</p>
<p class="list-item__subtitle">No Notes</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="22px"
height="22px"
viewBox="0 0 22 22"
enable-background="new 0 0 22 22"
xml:space="preserve">
<path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 7.87427H11.625" stroke="#0076D6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" d="M5.375 11.6243H7.875" 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": "Notes",
"listHeaderSubtitle": null,
"actions": null,
"items": [
{
"title": "Autumn Jacobi",
"subtitle": "No Notes",
"image": "../../images/user-placeholder.png",
"imageIsAvatar": true,
"showIndicator": true,
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 7.87427H11.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 11.6243H7.875\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
"width": "22",
"height": "22"
}
]
},
{
"title": "Dylan Moore",
"subtitle": "No Notes",
"image": "../../images/user-placeholder.png",
"imageIsAvatar": true,
"showIndicator": true,
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 7.87427H11.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 11.6243H7.875\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
"width": "22",
"height": "22"
}
]
},
{
"title": "Genoveva Leannon",
"subtitle": "No Notes",
"image": "../../images/user-placeholder.png",
"imageIsAvatar": true,
"showIndicator": true,
"actions": [
{
"icon": "<path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.8708 16.5301L8.7775 16.9718L9.21916 13.8784L17.1742 5.92345C17.9064 5.19121 19.0936 5.19121 19.8258 5.92345C20.5581 6.65568 20.5581 7.84288 19.8258 8.57511L11.8708 16.5301Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.375 2.37427C5.375 1.96005 5.71079 1.62427 6.125 1.62427H10.875C11.2892 1.62427 11.625 1.96005 11.625 2.37427V3.37427C11.625 3.78848 11.2892 4.12427 10.875 4.12427H6.125C5.71079 4.12427 5.375 3.78848 5.375 3.37427V2.37427Z\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M11.625 2.87427H14.125C14.8154 2.87427 15.375 3.43391 15.375 4.12427\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M15.375 16.6243V19.1243C15.375 19.8146 14.8154 20.3743 14.125 20.3743H2.875C2.18464 20.3743 1.625 19.8146 1.625 19.1243V4.12427C1.625 3.43391 2.18464 2.87427 2.875 2.87427H5.375\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 7.87427H11.625\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path fill=\"none\" d=\"M5.375 11.6243H7.875\" stroke=\"#0076D6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
"width": "22",
"height": "22"
}
]
}
],
"tabs": [
{
"text": "Guests",
"isCurrent": true
},
{
"text": "Team"
},
{
"text": "Settings"
}
]
}
People Lists group people together.