ListBuilt revision v17.10.0 CSS core TopicsHuman supportBring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry. ListOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><button type="button" id="list-new-invoice" data-kit-role="primary-action" commandfor="list-new-invoice-dialog" command="show-modal"><span data-kit-region="label">New invoice</span></button><a href="../layout-list/#layout-list">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded='{"locale":"en-GB","pageSize":2}'>
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice reference search">
<div data-kit-role="form-group" id="list-scan-form-group">
<label for="list-scan-search">Search invoice references</label>
<div data-kit-region="control">
<input id="list-scan-search" name="search" type="search" enterkeyhint="search" placeholder="Find invoices by reference">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-scan-search-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Scan</span></button>
</div>
<div data-kit-region="stream"><video data-kit-region="camera" muted playsinline></video><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button></div>
</div>
</section>
<section data-kit-region="rows" aria-label="Invoices by reference">
<div data-kit-region="notices" aria-live="polite"></div>
<p data-kit-region="nothing-matches" hidden>No invoices match <span data-kit-region="applied"></span>.</p>
<div data-kit-role="action-group" hidden><a href="" data-kit-role="secondary-action"><span data-kit-region="label">Clear search</span></a></div>
<article data-kit-role="row" id="list-scan-INV-1042" data-kit-fields='{"filters":{},"place":1,"search":["INV-1042"],"sorts":{}}'><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/">INV-1042</a></div></div></div></div></article>
<article data-kit-role="row" id="list-scan-INV-2075" data-kit-fields='{"filters":{},"place":2,"search":["INV-2075"],"sorts":{}}'><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/">INV-2075</a></div></div></div></div></article>
<article data-kit-role="row" id="list-scan-INV-3896" data-kit-fields='{"filters":{},"place":3,"search":["INV-3896"],"sorts":{}}' hidden><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../record/">INV-3896</a></div></div></div></div></article>
</section>
<footer data-kit-region="count-continuation">
<p><span>Invoices <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">3</span></span><span hidden>Invoice <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">3</span></span></p><nav aria-label="Invoice reference pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-saved-views">
<a href="?view=all&page=1"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="?view=awaiting&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">Awaiting payment</span><span data-kit-region="reserve" aria-hidden="true">Awaiting payment</span> <span data-kit-region="changed">Changed</span></a>
<a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span><span data-kit-region="reserve" aria-hidden="true">Overdue</span></a>
<a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span><span data-kit-region="reserve" aria-hidden="true">Paid this month</span></a>
<a href="?view=drafts&page=1"><span data-kit-region="name">Drafts</span><span data-kit-region="reserve" aria-hidden="true">Drafts</span></a>
<a href="?view=cancelled&page=1"><span data-kit-region="name">Cancelled</span><span data-kit-region="reserve" aria-hidden="true">Cancelled</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-saved-views-more" popover="auto">
<ul>
<li hidden><a href="?view=all&page=1"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="?view=awaiting&page=1" aria-current="page"><span data-kit-region="name">Awaiting payment</span> <span data-kit-region="changed">Changed</span></a></li>
<li hidden><a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span></a></li>
<li hidden><a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span></a></li>
<li hidden><a href="?view=drafts&page=1"><span data-kit-region="name">Drafts</span></a></li>
<li hidden><a href="?view=cancelled&page=1"><span data-kit-region="name">Cancelled</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="form-group"><label for="list-filter">Search invoices</label><div data-kit-region="control"><input id="list-filter" type="search" enterkeyhint="search" value="Oakmere Primary School" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-filter-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<form><button type="button" data-kit-role="secondary-action" popovertarget="kit-list-filters"><span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span></button><div data-kit-region="filters" id="kit-list-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall, Small Hall</span></span></button>
<div data-kit-role="popover" id="list-room-filter" popover="auto">
<fieldset data-kit-role="selection-control" data-kit-region="group" id="list-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="main-hall" checked>Main Hall</label>
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="small-hall" checked>Small Hall</label>
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="garden-room">Garden Room</label>
</fieldset>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?view=awaiting&overdue=30&page=1" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-overdue-filter"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button>
<div data-kit-role="popover" id="list-overdue-filter" popover="auto">
<div data-kit-role="form-group"><label for="list-overdue">Overdue</label><div data-kit-region="select"><select id="list-overdue" name="overdue"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?view=awaiting&room=main-hall,small-hall&page=1" aria-label="Clear Overdue"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button>
<div data-kit-role="popover" id="list-status-filter" popover="auto">
<div data-kit-role="form-group"><label for="list-status">Status</label><div data-kit-region="select"><select id="list-status" name="status"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="more" id="list-more-filters" data-kit-fit="pending" hidden>
<button type="button" data-kit-role="secondary-action" popovertarget="list-more-filters-popover"><span data-kit-region="label"><span data-kit-region="name">More filters</span><span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span></span></button>
<div data-kit-role="popover" id="list-more-filters-popover" popover="auto">
<ul>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall, Small Hall</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?view=awaiting&overdue=30&page=1" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-overdue-filter"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?view=awaiting&room=main-hall,small-hall&page=1" aria-label="Clear Overdue"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button></li>
</ul>
</div>
</div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-sort-form-group"><label for="list-sort">Sort</label><div data-kit-region="select"><select id="list-sort"><option value="relevance" selected>Relevance</option><option value="invoice">Invoice, A to Z</option><option value="invoice-desc">Invoice, Z to A</option><option value="amount-desc">Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<a data-kit-region="clear-filters" href="?view=awaiting&page=1">Clear filters</a>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save view</span></button></div></form>
</section>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Columns and selection actions">
<div data-kit-region="columns"><button data-kit-role="secondary-action" popovertarget="list-columns" type="button"><span data-kit-region="label">Columns</span></button><div data-kit-role="popover" id="list-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-columns-order"><article data-kit-role="row" id="list-columns-invoice"><label data-kit-region="selection"><input aria-describedby="list-columns-invoice-reason" aria-labelledby="list-columns-invoice-subject" checked data-kit-role="selection-control" disabled type="checkbox"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="list-columns-invoice-reason">Names each invoice</span></span></div></div></div></div></article><article data-kit-role="row" id="list-columns-amount-due"><button type="button" tabindex="-1" data-kit-region="handle" id="list-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-columns-amount-due-handle list-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-columns-amount-due-subject">Amount due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-columns-amount-due-move list-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-columns-amount-due-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-columns-due-date"><button type="button" tabindex="-1" data-kit-region="handle" id="list-columns-due-date-handle" aria-label="Move" aria-labelledby="list-columns-due-date-handle list-columns-due-date-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-columns-due-date-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="due-date"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-columns-due-date-subject">Due date</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-columns-due-date-move list-columns-due-date-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-columns-due-date-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-columns-room"><button type="button" tabindex="-1" data-kit-region="handle" id="list-columns-room-handle" aria-label="Move" aria-labelledby="list-columns-room-handle list-columns-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-columns-room-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="room"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-columns-room-subject">Room</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-columns-room-move list-columns-room-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-columns-room-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><div data-kit-region="drop-line" hidden aria-hidden="true"></div><dialog aria-labelledby="list-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-columns-order-move"><h2 data-kit-region="heading" id="list-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2><div data-kit-region="form-groups"><div data-kit-role="form-group" id="list-columns-order-move-place"><label for="list-columns-order-move-place-control">Place it</label><div data-kit-region="select"><select id="list-columns-order-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div><div data-kit-role="form-group" id="list-columns-order-move-row"><label for="list-columns-order-move-row-control">Column</label><div data-kit-region="select"><select id="list-columns-order-move-row-control" name="row"><option value="list-columns-amount-due">Amount due</option><option value="list-columns-due-date">Due date</option><option value="list-columns-room">Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div><div data-kit-role="action-group"><div data-kit-region="actions"><button data-kit-role="primary-action" type="button"><span data-kit-region="label">Move</span></button><button data-kit-modal-close data-kit-role="secondary-action" type="button"><span data-kit-region="label">Keep the order</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div></dialog></div></div></div>
<p data-kit-role="status-line" role="status" aria-live="polite">All <span data-kit-role="amount">2</span> on this page selected</p><button type="button" data-kit-region="select-all">Select all <span data-kit-role="amount">24</span> invoices</button><button type="button" data-kit-region="clear-selection">Clear selection</button><div data-kit-role="action-group"><a data-kit-role="secondary-action" href="../record/"><span data-kit-region="label">Review selected</span></a></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=invoice"><span data-kit-region="label">Invoice</span></a></th><th data-kit-holds="pane-divider" scope="col" data-kit-column="amount" id="list-amount-due"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=amount-desc"><span data-kit-region="label">Amount due</span></a><div aria-controls="list-amount-due" aria-labelledby="list-amount-due" aria-orientation="vertical" data-kit-role="pane-divider" id="list-amount-due-divider" role="separator" tabindex="0"><span data-kit-region="grip"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></span></div></th></tr></thead>
<tbody>
<tr id="list-invoice-main-hall"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School invoice awaiting final address confirmation</a><span data-kit-region="supporting">Main Hall hire</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion" open><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content" data-kit-authored-text="true"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="../record/">@Aisha Khan</a> to confirm <strong>the address</strong> for <span data-kit-region="mention">B-1042 Garden room</span> before <time datetime="2025-03-14">14 March 2025</time>.<br>Read the <a href="https://example.com/hire-terms">hire terms</a> first, <em>then</em> use <code>4721</code> at the gate.</p><ul><li><p>Bring your own chairs.</p></li><li><p>Leave the hall by ten.</p></li></ul><ol><li><p>Ring the bell by the side gate.</p></li><li><p>Wait for the caretaker.</p></li></ol><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Deposit paid</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Key returned</p></li></ul><blockquote><p>The side door sticks in the cold.</p></blockquote><pre><code>Gate: 4721
Alarm: 0990</code></pre><p>Floor plan: <a href="../record/">garden-room-plan.pdf</a></p></div></details></td></tr>
<tr id="list-invoice-small-hall"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a><span data-kit-region="supporting">Small Hall hire</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£276.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion"><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Payment details</dt><dd data-kit-region="value">Payment details are available after the address is confirmed.</dd></dl></div></div></details></td></tr>
</tbody>
<tfoot data-kit-region="total"><tr><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject">Total due</th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£360.00</div><span data-kit-region="supporting">Price when paying by credit card, including the processing fee: <span data-kit-role="amount">£370.80</span></span></div></td></tr></tfoot>
</table></div>
</section>
<footer data-kit-region="count-continuation">
<p>Invoices <span data-kit-role="amount">11</span>–<span data-kit-role="amount">12</span> of <span data-kit-role="amount">24</span></p>
<form data-kit-region="rows-per-page">
<div data-kit-role="form-group" id="list-rows-per-page">
<label for="list-rows-per-page-control">Rows per page</label>
<div data-kit-region="select"><select id="list-rows-per-page-control" name="rows_per_page">
<option selected value="2">2</option><option value="10">10</option><option value="25">25</option>
</select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</form>
<nav data-kit-role="pager" aria-label="Invoice pages">
<span data-kit-region="desk-window"><a href="?view=all&page=5" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&page=4" aria-label="Page 4">4</a><a href="?view=all&page=5" aria-label="Page 5">5</a><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><a href="?view=all&page=7" aria-label="Page 7">7</a><a href="?view=all&page=8" aria-label="Page 8">8</a><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</a><a href="?view=all&page=7" rel="next">Next</a></span>
<span data-kit-region="phone-window"><a href="?view=all&page=5" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</a><a href="?view=all&page=7" rel="next">Next</a></span>
</nav>
<form data-kit-region="go-to-page">
<div data-kit-role="form-group" id="list-go-to-page">
<label for="list-go-to-page-control" id="list-go-to-page-label">Go to page</label>
<div data-kit-number='{"fraction":false,"locale":"en-GB","max":12,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-go-to-page-control-number-field">
<input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value="">
<input type="hidden" name="page" value="">
</div>
</div>
</form>
</footer>
</div>
<dialog id="list-new-invoice-dialog" data-kit-role="dialog" aria-labelledby="list-new-invoice-title">
<h2 data-kit-region="heading" id="list-new-invoice-title">New invoice</h2>
<div data-kit-region="form-groups">
<form id="list-new-invoice-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-new-invoice-hirer">
<label for="list-new-invoice-hirer-control">Hirer</label>
<input id="list-new-invoice-hirer-control" name="hirer" type="text">
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-new-invoice-form" data-kit-role="primary-action"><span data-kit-region="label">Create invoice</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-new-invoice-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
<div id="stacked-lists">
<div data-kit-layout="list" id="stacked-list-first">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="stacked-list-second">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
</div>
<div data-kit-layout="list" id="layout-list-comparison">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Rooms">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0">
<table data-kit-table="comparison">
<caption>Room use this quarter</caption>
<thead data-kit-region="column-headings"><tr><th scope="col">Room</th><th scope="col" data-kit-column="amount">Hours booked</th><th scope="col" data-kit-column="amount">Hires</th><th scope="col" data-kit-column="amount">Income</th></tr></thead>
<tbody><tr>
<th scope="row"><article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Main Hall</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp">
<a data-kit-region="subject" href="../record/">Main Hall</a>
</div>
</div>
</div>
</div>
</article></th>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">64 hrs</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">22</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£1,280.00</div></td>
</tr>
<tr><td colspan="4"><details data-kit-region="expansion" open><summary><span data-kit-region="label">Room details</span></summary><div data-kit-region="content" data-kit-authored-text="true"><p>Evening hires filled every weekday slot.</p></div></details></td></tr>
<tr>
<th scope="row"><article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Garden Room and the kitchen beside it</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp">
<a data-kit-region="subject" href="../record/">Garden Room and the kitchen beside it</a>
</div>
</div>
</div>
</div>
</article></th>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">38 hrs</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">15</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£570.00</div></td>
</tr>
<tr><td colspan="4"><details data-kit-region="expansion"><summary><span data-kit-region="label">Room details</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Busiest day</dt><dd data-kit-region="value">Saturday</dd></dl></div></div></details></td></tr>
<tr>
<th scope="row"><article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Meeting Room</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp">
<a data-kit-region="subject" href="../record/">Meeting Room</a>
</div>
</div>
</div>
</div>
</article></th>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">12 hrs</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">9</div></td>
<td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£180.00</div></td>
</tr>
</tbody>
<tfoot data-kit-region="total"><tr><th scope="row">All rooms<span data-kit-region="supporting">Price when paying by credit card, including the processing fee: <span data-kit-role="amount">£2,090.90</span></span></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">114 hrs</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">46</div></td><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£2,030.00</div></td></tr></tfoot>
</table>
</div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-empty-region">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="columns-selection-actions" aria-label="Columns and selection actions"></section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-selected">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-nothing-selected">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Selection actions">
<p data-kit-role="status-line" role="status" aria-live="polite"></p><div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="list-nothing-selected-remind" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="list-nothing-selected-remind-words"><span data-kit-region="label">Send reminders</span></button><p data-kit-region="words" id="list-nothing-selected-remind-words">Select invoices to send reminders.</p></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" id="list-nothing-selected-page" /><span>Select every invoice on this page</span></label></th><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr><tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Riverside Choir invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Riverside Choir</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£120.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-filters-only">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" aria-label="Invoice filters">
<form><div data-kit-role="form-group" data-kit-holds="help"><label for="list-hirer-filter">Filter by hirer</label><div data-kit-region="control"><input id="list-hirer-filter" type="search" enterkeyhint="search" aria-describedby="list-hirer-filter-help"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-hirer-filter-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div><span data-kit-region="help" id="list-hirer-filter-help">Find invoices by hirer name.</span></div>
</form>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-saved-views-only">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" aria-label="Invoice views">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-saved-views-2">
<a href="?view=all&page=1"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="?view=awaiting&page=1"><span data-kit-region="name">Awaiting payment</span><span data-kit-region="reserve" aria-hidden="true">Awaiting payment</span></a>
<a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span><span data-kit-region="reserve" aria-hidden="true">Overdue</span></a>
<a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span><span data-kit-region="reserve" aria-hidden="true">Paid this month</span></a>
<a href="?view=drafts&page=1"><span data-kit-region="name">Drafts</span><span data-kit-region="reserve" aria-hidden="true">Drafts</span></a>
<a href="?view=cancelled&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">Cancelled</span><span data-kit-region="reserve" aria-hidden="true">Cancelled</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-saved-views-2-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-saved-views-2-more" popover="auto">
<ul>
<li hidden><a href="?view=all&page=1"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="?view=awaiting&page=1"><span data-kit-region="name">Awaiting payment</span></a></li>
<li hidden><a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span></a></li>
<li hidden><a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span></a></li>
<li hidden><a href="?view=drafts&page=1"><span data-kit-region="name">Drafts</span></a></li>
<li hidden><a href="?view=cancelled&page=1" aria-current="page"><span data-kit-region="name">Cancelled</span></a></li>
</ul>
</div>
</div>
</nav>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-cards">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" aria-label="Room views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-saved-views-3">
<a href="?view=all&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">All rooms</span><span data-kit-region="reserve" aria-hidden="true">All rooms</span></a>
<a href="?view=attention&page=1"><span data-kit-region="name">Needs attention</span><span data-kit-region="reserve" aria-hidden="true">Needs attention</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-saved-views-3-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-saved-views-3-more" popover="auto">
<ul>
<li hidden><a href="?view=all&page=1" aria-current="page"><span data-kit-region="name">All rooms</span></a></li>
<li hidden><a href="?view=attention&page=1"><span data-kit-region="name">Needs attention</span></a></li>
</ul>
</div>
</div>
</nav>
<button type="button" data-kit-role="secondary-action" popovertarget="list-cards-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="list-cards-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-cards-sort-form-group"><label for="list-cards-sort">Sort</label><div data-kit-region="select"><select id="list-cards-sort"><option value="room" selected>Room name, A to Z</option><option value="room-desc">Room name, Z to A</option><option value="booking-desc">Next booking, latest first</option><option value="booking">Next booking, earliest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</section>
<section data-kit-region="cards" aria-label="Rooms">
<div data-kit-region="notices" aria-live="polite"></div>
<div>
<article data-kit-role="card">
<h3 data-kit-region="subject"><a href="../role-card/#role-card">Main Hall</a></h3>
<div data-kit-region="stamps">
<span data-kit-role="stamp" data-kit-state="attention">Deposit awaiting payment</span>
<span data-kit-role="stamp" data-kit-state="neutral">Keys not collected</span>
<span data-kit-role="stamp" data-kit-state="settled">Insurance on file</span>
</div>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Next booking</dt><dd data-kit-region="value"><time datetime="2025-04-12">12 April 2025</time></dd></dl>
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£240.00</dd></dl>
</div>
<div data-kit-role="action-group">
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send reminder</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Hold the room</span></button>
</div>
</article>
<article data-kit-role="card">
<h3 data-kit-region="subject"><a href="../role-card/#role-card">Meeting Room</a></h3>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Next booking</dt><dd data-kit-region="value"><time datetime="2025-04-17">17 April 2025</time></dd></dl>
</div>
<div data-kit-role="action-group">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open bookings</span></button>
</div>
</article>
<article data-kit-role="card">
<h3 data-kit-region="subject"><a href="../role-card/#role-card">Garden Room and the kitchen beside it</a></h3>
<div data-kit-region="stamps">
<span data-kit-role="stamp" data-kit-state="alert">Boiler out of service</span>
</div>
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Oakmere Primary School</dd></dl>
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Last cleaned</dt><dd data-kit-region="value"><time datetime="2025-04-07">7 April 2025</time></dd></dl>
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Capacity</dt><dd data-kit-region="value" data-kit-role="amount">40 seated</dd></dl>
</div>
<div data-kit-role="action-group">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Report fixed</span></button>
</div>
</article>
</div>
</section>
<footer data-kit-region="count-continuation">
<p>Rooms <span data-kit-role="amount">1</span>–<span data-kit-role="amount">3</span> of <span data-kit-role="amount">6</span></p>
<nav data-kit-role="pager" aria-label="Room pages"><span data-kit-region="desk-window"><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?view=all&page=2" aria-label="Page 2, last page">2</a><a href="?view=all&page=2" rel="next">Next</a></span><span data-kit-region="phone-window"><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?view=all&page=2" aria-label="Page 2, last page">2</a><a href="?view=all&page=2" rel="next">Next</a></span></nav>
</footer>
</div>
<div data-kit-layout="list" id="layout-list-search-filters">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice search and filters">
<div data-kit-role="form-group"><label for="list-search-filters-hirer">Search invoices</label><div data-kit-region="control"><input id="list-search-filters-hirer" type="search" enterkeyhint="search" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-search-filters-hirer-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="list-search-filters-sheet"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="list-search-filters-sheet" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group" data-kit-region="sort" id="list-search-filters-sort-form-group"><label for="list-search-filters-sort">Sort</label><div data-kit-region="select"><select id="list-search-filters-sort"><option value="invoice" selected>Invoice, A to Z</option><option value="invoice-desc">Invoice, Z to A</option><option value="amount-desc">Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject" aria-sort="ascending"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=invoice-desc"><span data-kit-region="label">Invoice</span></a></th><th scope="col" data-kit-column="amount"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=amount-desc"><span data-kit-region="label">Amount due</span></a></th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-search-alone">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice search">
<div data-kit-role="form-group"><label for="list-search-alone-hirer">Search invoices</label><div data-kit-region="control"><input id="list-search-alone-hirer" type="search" enterkeyhint="search" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-search-alone-hirer-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-narrow-desk" style="inline-size: min(100%, var(--kit-desk-width));">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice views and search">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-saved-views-4">
<a href="?view=all&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="?view=awaiting&page=1"><span data-kit-region="name">Awaiting payment</span><span data-kit-region="reserve" aria-hidden="true">Awaiting payment</span></a>
<a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span><span data-kit-region="reserve" aria-hidden="true">Overdue</span></a>
<a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span><span data-kit-region="reserve" aria-hidden="true">Paid this month</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-saved-views-4-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-saved-views-4-more" popover="auto">
<ul>
<li hidden><a href="?view=all&page=1" aria-current="page"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="?view=awaiting&page=1"><span data-kit-region="name">Awaiting payment</span></a></li>
<li hidden><a href="?view=overdue&page=1"><span data-kit-region="name">Overdue</span></a></li>
<li hidden><a href="?view=paid&page=1"><span data-kit-region="name">Paid this month</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="form-group"><label for="list-narrow-desk-hirer">Search invoices</label><div data-kit-region="control"><input id="list-narrow-desk-hirer" type="search" enterkeyhint="search" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-narrow-desk-hirer-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-sheet"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="list-narrow-desk-sheet" data-kit-role="phone-sheet" popover="auto">
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall, Small Hall</span></span></button>
<div data-kit-role="popover" id="list-narrow-desk-room-filter" popover="auto">
<fieldset data-kit-role="selection-control" data-kit-region="group" id="list-narrow-desk-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="main-hall" checked>Main Hall</label>
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="small-hall" checked>Small Hall</label>
<label><input data-kit-role="selection-control" type="checkbox" name="room" value="garden-room">Garden Room</label>
</fieldset>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?view=all&overdue=30&page=1" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-overdue-filter"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button>
<div data-kit-role="popover" id="list-narrow-desk-overdue-filter" popover="auto">
<div data-kit-role="form-group"><label for="list-narrow-desk-overdue">Overdue</label><div data-kit-region="select"><select id="list-narrow-desk-overdue" name="overdue"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
<a data-kit-role="icon-action" data-kit-region="clear" href="?view=all&room=main-hall,small-hall&page=1" aria-label="Clear Overdue"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a>
</div>
<div data-kit-region="filter">
<button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button>
<div data-kit-role="popover" id="list-narrow-desk-status-filter" popover="auto">
<div data-kit-role="form-group"><label for="list-narrow-desk-status">Status</label><div data-kit-region="select"><select id="list-narrow-desk-status" name="status"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</div>
<div data-kit-region="more" id="list-narrow-desk-more-filters" data-kit-fit="pending" hidden>
<button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-more-filters-popover"><span data-kit-region="label"><span data-kit-region="name">More filters</span><span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span></span></button>
<div data-kit-role="popover" id="list-narrow-desk-more-filters-popover" popover="auto">
<ul>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-room-filter"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall, Small Hall</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?view=all&overdue=30&page=1" aria-label="Clear Room"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-overdue-filter"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button><a data-kit-role="icon-action" data-kit-region="clear" href="?view=all&room=main-hall,small-hall&page=1" aria-label="Clear Overdue"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></a></li>
<li><button type="button" data-kit-role="secondary-action" popovertarget="list-narrow-desk-status-filter"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button></li>
</ul>
</div>
</div>
<div data-kit-role="form-group" data-kit-region="sort" id="list-narrow-desk-sort-form-group"><label for="list-narrow-desk-sort">Sort</label><div data-kit-region="select"><select id="list-narrow-desk-sort"><option value="invoice" selected>Invoice, A to Z</option><option value="invoice-desc">Invoice, Z to A</option><option value="amount-desc">Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject" aria-sort="ascending"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=invoice-desc"><span data-kit-region="label">Invoice</span></a></th><th scope="col" data-kit-column="amount"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=amount-desc"><span data-kit-region="label">Amount due</span></a></th></tr></thead>
<tbody><tr><th scope="row" data-kit-column="subject"><a href="../record/">Oakmere Primary School</a></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr></tbody>
</table></div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-records-table">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Payments">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0">
<table data-kit-table="records" data-kit-print-form="rows">
<caption>Payments received</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" id="select-all-payments" data-kit-state="mixed" checked><span>Select all payments</span></label></th><th scope="col" data-kit-column="subject">Payment</th><th scope="col">Received</th><th scope="col">Reference</th><th scope="col">Payer account</th><th scope="col">Method</th><th scope="col" data-kit-column="time">Matched</th><th scope="col" data-kit-column="amount">Fee</th><th scope="col" data-kit-column="amount">Net</th><th scope="col" data-kit-column="amount">Hourly rate</th><th scope="col">Paid towards</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
<tbody>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="payment" value="card" checked><span>Select Card payment</span></label></td><th scope="row" data-kit-column="subject" data-label="Payment"><div data-kit-region="value"><a href="../record/">Card payment</a></div></th><td data-label="Received"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-02-03">3 February 2025</time>, after the card payment was matched to the outstanding Main Hall invoice, the corrected billing address was confirmed by the hirer and the duplicate reference was removed</div><span data-kit-region="supporting">Statement checked</span></div></td><td data-label="Reference"><div data-kit-region="value"><div data-kit-region="fact">TXN20250203417</div></div></td><td data-label="Payer account"><div data-kit-region="value"><div data-kit-region="fact">GB82WEST12345698765432</div></div></td><td data-label="Method"><div data-kit-region="value"><div data-kit-region="fact">Contactless</div></div></td><td data-kit-column="time" data-label="Matched"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-02-04">4 February 2025</time></div></div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£0.60</div></div></td><td data-kit-column="amount" data-label="Net"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£39.40</div></div></td><td data-kit-column="amount" data-label="Hourly rate"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£20.00</div></div></td><td data-label="Paid towards"><div data-kit-region="value"><div data-kit-region="fact">Main Hall invoice of <span data-kit-role="amount">£84.00</span></div></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£40.00</div></div></td></tr>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="payment" value="transfer"><span>Select Bank transfer</span></label></td><th scope="row" data-kit-column="subject" data-label="Payment"><div data-kit-region="value"><a href="../record/">Bank transfer</a></div></th><td data-label="Received"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-01-28">28 January 2025</time></div></div></td><td data-label="Reference"><div data-kit-region="value"><div data-kit-region="fact">TXN20250128391</div></div></td><td data-label="Payer account"><div data-kit-region="value"><div data-kit-region="fact">GB33BUKB20201555555555</div></div></td><td data-label="Method"><div data-kit-region="value"><div data-kit-region="fact"><span>Transfer sent on </span><time datetime="2025-01-27">27 January 2025</time> from the hirer's second account and cleared the next working day</div></div></td><td data-kit-column="time" data-label="Matched"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-01-29">29 January 2025</time></div></div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></div></td><td data-kit-column="amount" data-label="Net"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£24.00</div></div></td><td data-kit-column="amount" data-label="Hourly rate"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£12.00</div></div></td><td data-label="Paid towards"><div data-kit-region="value"><div data-kit-region="fact">Small Hall invoice of <span data-kit-role="amount">£24.00</span></div></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£24.00</div></div></td></tr>
</tbody>
<tfoot data-kit-region="total"><tr><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject" data-label="Payment"><div data-kit-region="value">Total received</div></th><td data-label="Received"><div data-kit-region="value"></div></td><td data-label="Reference"><div data-kit-region="value"></div></td><td data-label="Payer account"><div data-kit-region="value"></div></td><td data-label="Method"><div data-kit-region="value"></div></td><td data-kit-column="time" data-label="Matched"><div data-kit-region="value"></div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="value"></div></td><td data-kit-column="amount" data-label="Net"><div data-kit-region="value"></div></td><td data-kit-column="amount" data-label="Hourly rate"><div data-kit-region="value"></div></td><td data-label="Paid towards"><div data-kit-region="value"></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£64.00</div></div></td></tr></tfoot>
</table>
</div>
</section>
</div>
<div data-kit-layout="list" id="layout-list-wide-records-actions">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Payments">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Payments received</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject">Payment</th><th scope="col">Received</th><th scope="col">Reference</th><th scope="col">Payer account</th><th scope="col">Method</th><th scope="col" data-kit-column="time">Matched</th><th scope="col" data-kit-column="amount">Fee</th><th scope="col" data-kit-column="amount">Net</th><th scope="col" data-kit-column="amount">Hourly rate</th><th scope="col">Paid towards</th><th scope="col" data-kit-column="amount">Amount</th><td data-kit-column="actions"></td></tr></thead>
<tbody>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="wide-payment" value="card" /><span>Select Card payment</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Card payment</a></th><td data-label="Received"><div data-kit-region="fact"><time datetime="2025-02-03">3 February 2025</time>, after the card payment was matched to the outstanding Main Hall invoice, the corrected billing address was confirmed by the hirer and the duplicate reference was removed</div></td><td data-label="Reference"><div data-kit-region="fact">TXN20250203417</div></td><td data-label="Payer account"><div data-kit-region="fact">GB82WEST12345698765432</div></td><td data-label="Method"><div data-kit-region="fact">Contactless</div></td><td data-kit-column="time" data-label="Matched"><div data-kit-region="fact"><time datetime="2025-02-04">4 February 2025</time></div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£0.60</div></td><td data-kit-column="amount" data-label="Net"><div data-kit-region="fact" data-kit-role="amount">£39.40</div></td><td data-kit-column="amount" data-label="Hourly rate"><div data-kit-region="fact" data-kit-role="amount">£20.00</div></td><td data-label="Paid towards"><div data-kit-region="fact">Main Hall invoice of <span data-kit-role="amount">£84.00</span></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£40.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Receipt</span></button><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="wide-payment" value="transfer" /><span>Select Bank transfer</span></label></td><th scope="row" data-kit-column="subject"><a href="../record/">Bank transfer</a></th><td data-label="Received"><div data-kit-region="fact"><time datetime="2025-01-28">28 January 2025</time></div></td><td data-label="Reference"><div data-kit-region="fact">TXN20250128391</div></td><td data-label="Payer account"><div data-kit-region="fact">GB33BUKB20201555555555</div></td><td data-label="Method"><div data-kit-region="fact"><span>Transfer sent on </span><time datetime="2025-01-27">27 January 2025</time> from the hirer's second account and cleared the next working day</div></td><td data-kit-column="time" data-label="Matched"><div data-kit-region="fact"><time datetime="2025-01-29">29 January 2025</time></div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£0.00</div></td><td data-kit-column="amount" data-label="Net"><div data-kit-region="fact" data-kit-role="amount">£24.00</div></td><td data-kit-column="amount" data-label="Hourly rate"><div data-kit-region="fact" data-kit-role="amount">£12.00</div></td><td data-label="Paid towards"><div data-kit-region="fact">Small Hall invoice of <span data-kit-role="amount">£24.00</span></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£24.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Receipt</span></button><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
</tbody>
<tfoot data-kit-region="total"><tr><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject">Total received</th><td data-label="Received"></td><td data-label="Reference"></td><td data-label="Payer account"></td><td data-label="Method"></td><td data-kit-column="time" data-label="Matched"></td><td data-kit-column="amount" data-label="Fee"></td><td data-kit-column="amount" data-label="Net"></td><td data-kit-column="amount" data-label="Hourly rate"></td><td data-label="Paid towards"></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£64.00</div></td><td data-kit-column="actions"></td></tr></tfoot>
</table></div>
</section>
</div>
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort">
<div data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-date-filter-after" type="button">
<span data-kit-region="label"><span data-kit-region="name">Issued</span></span>
</button><div data-kit-role="popover" id="list-date-filter-after" popover="auto">
<div data-kit-role="form-group" id="list-filter-range-after">
<fieldset>
<legend id="list-filter-range-after-label">Issued</legend>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","openEnd":true,"openEnds":"either","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2026-09-15"}" data-kit-role="date-range" id="list-filter-range-after-control-date-range">
<span data-kit-region="end"><label for="list-filter-range-after-control">From</label><label for="list-filter-range-after-control" hidden>Dates</label><input id="list-filter-range-after-control" data-kit-region="first" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-after-control-resolved" aria-expanded="false" aria-controls="list-filter-range-after-control-layer"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span data-kit-region="end"><label for="list-filter-range-after-control-last">Until</label><input id="list-filter-range-after-control-last" data-kit-region="last" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-after-control-resolved"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span id="list-filter-range-after-control-preset-dates" data-kit-region="preset-dates" hidden></span>
<span id="list-filter-range-after-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-filter-range-after-control-calendar" type="button">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="issued_after[first]" value="">
<input type="hidden" name="issued_after[last]" value="">
<input type="hidden" name="issued_after[preset]">
<div data-kit-role="popover" id="list-filter-range-after-control-layer" popover="manual" data-kit-region="presets-and-months">
<div id="list-filter-range-after-control-months" data-kit-region="months"></div>
</div>
</div>
</fieldset>
</div>
</div></div>
</section>
<section data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p>No entries shown.</p></section>
</div>
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort">
<div data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-date-filter-before" type="button">
<span data-kit-region="label"><span data-kit-region="name">Issued</span></span>
</button><div data-kit-role="popover" id="list-date-filter-before" popover="auto">
<div data-kit-role="form-group" id="list-filter-range-before">
<fieldset>
<legend id="list-filter-range-before-label">Issued</legend>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","openEnd":true,"openEnds":"either","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2026-09-15"}" data-kit-role="date-range" id="list-filter-range-before-control-date-range">
<span data-kit-region="end"><label for="list-filter-range-before-control">From</label><label for="list-filter-range-before-control" hidden>Dates</label><input id="list-filter-range-before-control" data-kit-region="first" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-before-control-resolved" aria-expanded="false" aria-controls="list-filter-range-before-control-layer"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span data-kit-region="end"><label for="list-filter-range-before-control-last">Until</label><input id="list-filter-range-before-control-last" data-kit-region="last" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-before-control-resolved"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span id="list-filter-range-before-control-preset-dates" data-kit-region="preset-dates" hidden></span>
<span id="list-filter-range-before-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-filter-range-before-control-calendar" type="button">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="issued_before[first]" value="">
<input type="hidden" name="issued_before[last]" value="">
<input type="hidden" name="issued_before[preset]">
<div data-kit-role="popover" id="list-filter-range-before-control-layer" popover="manual" data-kit-region="presets-and-months">
<div id="list-filter-range-before-control-months" data-kit-region="months"></div>
</div>
</div>
</fieldset>
</div>
</div></div>
</section>
<section data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p>No entries shown.</p></section>
</div>
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort">
<div data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-date-filter-between" type="button">
<span data-kit-region="label"><span data-kit-region="name">Issued</span></span>
</button><div data-kit-role="popover" id="list-date-filter-between" popover="auto">
<div data-kit-role="form-group" id="list-filter-range-between">
<fieldset>
<legend id="list-filter-range-between-label">Issued</legend>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","openEnd":true,"openEnds":"either","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2026-09-15"}" data-kit-role="date-range" id="list-filter-range-between-control-date-range">
<span data-kit-region="end"><label for="list-filter-range-between-control">From</label><label for="list-filter-range-between-control" hidden>Dates</label><input id="list-filter-range-between-control" data-kit-region="first" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-between-control-resolved" aria-expanded="false" aria-controls="list-filter-range-between-control-layer"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span data-kit-region="end"><label for="list-filter-range-between-control-last">Until</label><input id="list-filter-range-between-control-last" data-kit-region="last" type="text" autocomplete="off" value="" aria-describedby="list-filter-range-between-control-resolved"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span id="list-filter-range-between-control-preset-dates" data-kit-region="preset-dates" hidden></span>
<span id="list-filter-range-between-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-filter-range-between-control-calendar" type="button">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="issued_between[first]" value="">
<input type="hidden" name="issued_between[last]" value="">
<input type="hidden" name="issued_between[preset]">
<div data-kit-role="popover" id="list-filter-range-between-control-layer" popover="manual" data-kit-region="presets-and-months">
<div id="list-filter-range-between-control-months" data-kit-region="months"></div>
</div>
</div>
</fieldset>
</div>
</div></div>
</section>
<section data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p>No entries shown.</p></section>
</div>
</main>
</div>
List, fitting-saved-viewsOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-fitting-saved-views">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-fitting-saved-views-saved-views">
<a href="?view=all&page=1"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="?view=overdue&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">Overdue</span><span data-kit-region="reserve" aria-hidden="true">Overdue</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-fitting-saved-views-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-fitting-saved-views-saved-views-more" popover="auto">
<ul>
<li hidden><a href="?view=all&page=1"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="?view=overdue&page=1" aria-current="page"><span data-kit-region="name">Overdue</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="form-group"><label for="list-filter">Search invoices</label><div data-kit-region="control"><input id="list-filter" type="search" enterkeyhint="search" value="Oakmere Primary School" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-filter-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<form><button type="button" data-kit-role="secondary-action" popovertarget="kit-list-filters"><span data-kit-region="label">Filters</span></button><div data-kit-region="filters" id="kit-list-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-role="form-group"><label for="list-status">Status</label><div data-kit-region="select"><select id="list-status"><option>Any status</option><option>Unpaid</option><option>Paid</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group"><label for="list-overdue">Days past the payment due date</label><div data-kit-region="select"><select id="list-overdue"><option>Any</option><option>Over 30 days</option><option>Over 60 days</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-sort-form-group"><label for="list-sort">Sort</label><div data-kit-region="select"><select id="list-sort"><option value="relevance" selected>Relevance</option><option value="invoice">Invoice, A to Z</option><option value="invoice-desc">Invoice, Z to A</option><option value="amount-desc">Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div></form>
</section>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Columns and selection actions">
<div data-kit-region="columns"><button data-kit-role="secondary-action" popovertarget="list-fitting-columns" type="button"><span data-kit-region="label">Columns</span></button><div data-kit-role="popover" id="list-fitting-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-fitting-columns-order"><article data-kit-role="row" id="list-fitting-columns-invoice"><label data-kit-region="selection"><input aria-describedby="list-fitting-columns-invoice-reason" aria-labelledby="list-fitting-columns-invoice-subject" checked data-kit-role="selection-control" disabled type="checkbox"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-fitting-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="list-fitting-columns-invoice-reason">Names each invoice</span></span></div></div></div></div></article><article data-kit-role="row" id="list-fitting-columns-amount-due"><button type="button" tabindex="-1" data-kit-region="handle" id="list-fitting-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-fitting-columns-amount-due-handle list-fitting-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-fitting-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-fitting-columns-amount-due-subject">Amount due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-fitting-columns-amount-due-move list-fitting-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-fitting-columns-amount-due-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-fitting-columns-due-date"><button type="button" tabindex="-1" data-kit-region="handle" id="list-fitting-columns-due-date-handle" aria-label="Move" aria-labelledby="list-fitting-columns-due-date-handle list-fitting-columns-due-date-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-fitting-columns-due-date-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="due-date"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-fitting-columns-due-date-subject">Due date</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-fitting-columns-due-date-move list-fitting-columns-due-date-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-fitting-columns-due-date-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-fitting-columns-room"><button type="button" tabindex="-1" data-kit-region="handle" id="list-fitting-columns-room-handle" aria-label="Move" aria-labelledby="list-fitting-columns-room-handle list-fitting-columns-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-fitting-columns-room-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="room"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-fitting-columns-room-subject">Room</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-fitting-columns-room-move list-fitting-columns-room-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-fitting-columns-room-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><div data-kit-region="drop-line" hidden aria-hidden="true"></div><dialog aria-labelledby="list-fitting-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-fitting-columns-order-move"><h2 data-kit-region="heading" id="list-fitting-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2><div data-kit-region="form-groups"><div data-kit-role="form-group" id="list-fitting-columns-order-move-place"><label for="list-fitting-columns-order-move-place-control">Place it</label><div data-kit-region="select"><select id="list-fitting-columns-order-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div><div data-kit-role="form-group" id="list-fitting-columns-order-move-row"><label for="list-fitting-columns-order-move-row-control">Column</label><div data-kit-region="select"><select id="list-fitting-columns-order-move-row-control" name="row"><option value="list-fitting-columns-amount-due">Amount due</option><option value="list-fitting-columns-due-date">Due date</option><option value="list-fitting-columns-room">Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div><div data-kit-role="action-group"><div data-kit-region="actions"><button data-kit-role="primary-action" type="button"><span data-kit-region="label">Move</span></button><button data-kit-modal-close data-kit-role="secondary-action" type="button"><span data-kit-region="label">Keep the order</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div></dialog></div></div></div>
<p data-kit-role="status-line" role="status" aria-live="polite"></p><div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="review-selected" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="review-selected-words"><span data-kit-region="label">Review selected</span></button><p data-kit-region="words" id="review-selected-words">Select an invoice to review.</p></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Overdue invoices</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=invoice"><span data-kit-region="label">Invoice</span></a></th><th scope="col" data-kit-column="amount"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=amount-desc"><span data-kit-region="label">Amount due</span></a></th></tr></thead>
<tbody>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School invoice awaiting final address confirmation</a><span data-kit-region="supporting">Main Hall hire</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion" open><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content" data-kit-authored-text="true"><p>Contact Maya to confirm the billing address.</p></div></details></td></tr>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a><span data-kit-region="supporting">Awaiting payment</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion"><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Payment details</dt><dd data-kit-region="value">Payment details are available after the address is confirmed.</dd></dl></div></div></details></td></tr>
</tbody>
<tfoot data-kit-region="total"><tr><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject">Total due</th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£168.00</div></td></tr></tfoot>
</table></div>
</section>
<footer data-kit-region="count-continuation">
<p>Invoice <span data-kit-role="amount">6</span> of <span data-kit-role="amount">12</span> · <span data-kit-role="amount">1</span> per page</p>
<nav data-kit-role="pager" aria-label="Invoice pages">
<span data-kit-region="desk-window"><a href="?view=all&page=5" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&page=4" aria-label="Page 4">4</a><a href="?view=all&page=5" aria-label="Page 5">5</a><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><a href="?view=all&page=7" aria-label="Page 7">7</a><a href="?view=all&page=8" aria-label="Page 8">8</a><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</a><a href="?view=all&page=7" rel="next">Next</a></span>
<span data-kit-region="phone-window"><a href="?view=all&page=5" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</a><a href="?view=all&page=7" rel="next">Next</a></span>
</nav>
</footer>
</div>
</main>
</div>
List, historyOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">History</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-history">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="History filters">
<div data-kit-role="form-group"><label for="history-search">Search history</label><div data-kit-region="control"><input id="history-search" type="search" enterkeyhint="search" value="" placeholder="Find a change or person"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="history-search-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-list-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-list-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="history-who">Who</label><div data-kit-region="select"><select id="history-who"><option value="everyone" selected>Everyone</option><option value="maya-patel">Maya Patel</option><option value="tom-reid">Tom Reid</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group"><label for="history-when">When</label><div data-kit-region="select"><select id="history-when"><option value="today">Today</option><option value="this-week">This week</option><option value="this-month">This month</option><option value="all-time" selected>All time</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</section>
<section data-kit-region="rows" aria-label="History">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="day" aria-labelledby="history-day-today">
<h3 id="history-day-today"><time datetime="2025-04-15">15 April 2025</time></h3>
<p data-kit-region="entry"><span data-kit-role="avatar" data-kit-size="small" aria-hidden="true"><span data-kit-region="initials">M</span></span>Maya Patel marked <a data-kit-region="subject" href="../../record/">Invoice OH-INV-003 for the Oakmere Primary School spring term</a> paid after the bank transfer arrived. <span data-kit-region="time"><time datetime="2025-04-15T14:20+01:00">14:20</time></span></p>
<p data-kit-region="entry"><span data-kit-role="avatar" data-kit-size="small" aria-hidden="true"><span data-kit-region="initials">T</span><span data-kit-region="picture" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+")"></span></span>Tom Reid moved <a data-kit-region="subject" href="../../record/">Yoga class</a> to Thursday because the Main Hall floor is being cleaned. <span data-kit-region="time"><time datetime="2025-04-15T10:05+01:00">10:05</time></span></p>
</section>
<section data-kit-region="day" aria-labelledby="history-day-yesterday">
<h3 id="history-day-yesterday"><time datetime="2025-04-14">14 April 2025</time></h3>
<p data-kit-region="entry"><span data-kit-role="avatar" data-kit-size="small" aria-hidden="true"><span data-kit-region="initials">M</span></span>Maya Patel sent <a data-kit-region="subject" href="../../record/">Invoice OH-INV-003</a> to Oakmere Primary School. <span data-kit-region="time"><time datetime="2025-04-14T16:45+01:00">16:45</time></span></p>
</section>
</section>
<footer data-kit-region="count-continuation"><p>3 entries shown</p></footer>
</div>
</main>
</div>
List, periodOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Hires</h1><p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">Monday, 14 April 2025</time></span><span>5 hires</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-period">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="range" aria-label="Hire views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-period-saved-views">
<a href="?view=all&day=2025-04-14" aria-current="page" data-kit-state="current"><span data-kit-region="name">All hires</span><span data-kit-region="reserve" aria-hidden="true">All hires</span></a>
<a href="?view=needs-room&day=2025-04-14"><span data-kit-region="name">Needs a room</span><span data-kit-region="reserve" aria-hidden="true">Needs a room</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-period-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-period-saved-views-more" popover="auto">
<ul>
<li hidden><a href="?view=all&day=2025-04-14" aria-current="page"><span data-kit-region="name">All hires</span></a></li>
<li hidden><a href="?view=needs-room&day=2025-04-14"><span data-kit-region="name">Needs a room</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-region="range">
<strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong>
<a data-kit-role="secondary-action" data-kit-region="today" href="?view=all&day=today"><span data-kit-region="label">Today</span></a>
<a data-kit-role="icon-action" data-kit-region="previous" href="?view=all&day=2025-04-13" rel="prev" aria-label="Previous day"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a>
<a data-kit-role="icon-action" data-kit-region="next" href="?view=all&day=2025-04-15" rel="next" aria-label="Next day"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a>
<form><div data-kit-region="date"><div data-kit-role="form-group" id="list-period-date"><label for="list-period-date-control" id="list-period-date-label">Go to a day</label><div data-kit-role="date-field" id="list-period-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}'><input id="list-period-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="list-period-date-control-resolved" aria-expanded="false" aria-controls="list-period-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="list-period-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="list-period-date-control-calendar" aria-label="Calendar" aria-describedby="list-period-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-14"><div id="list-period-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></form>
</div>
<button type="button" data-kit-role="secondary-action" popovertarget="kit-list-period-filters"><span data-kit-region="label">Filters</span></button>
<div data-kit-region="filters" id="kit-list-period-filters" data-kit-role="phone-sheet" popover="auto">
<div data-kit-role="form-group"><label for="list-period-room">Room</label><div data-kit-region="select"><select id="list-period-room"><option>Any room</option><option>Main Hall</option><option>Garden room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div>
</section>
<section data-kit-region="rows" aria-label="Hires">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0">
<table data-kit-table="records">
<caption>Hires on 14 April 2025</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hire</th><th scope="col" data-kit-column="time">Time</th><th scope="col">Room</th></tr></thead>
<tbody>
<tr><th scope="row" data-kit-column="subject"><a href="../../record/">Toddler group</a></th><td data-kit-column="time" data-label="Time"><div data-kit-region="fact"><time datetime="2025-04-14T09:30+01:00"><span>09:30–</span><wbr><span>11:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Garden room</div></td></tr>
<tr><th scope="row" data-kit-column="subject"><a href="../../record/">Pilates with Jo</a></th><td data-kit-column="time" data-label="Time"><div data-kit-region="fact"><time datetime="2025-04-14T12:00+01:00"><span>12:00–</span><wbr><span>13:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere WI</a></th><td data-kit-column="time" data-label="Time"><div data-kit-region="fact"><time datetime="2025-04-14T14:00+01:00"><span>14:00–</span><wbr><span>16:00</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr><th scope="row" data-kit-column="subject"><a href="../../record/">St Anne’s Scout Group</a></th><td data-kit-column="time" data-label="Time"><div data-kit-region="fact"><time datetime="2025-04-14T18:00+01:00"><span>18:00–</span><wbr><span>19:30</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr><th scope="row" data-kit-column="subject"><a href="../../record/">Brookfield Choir</a></th><td data-kit-column="time" data-label="Time"><div data-kit-region="fact"><time datetime="2025-04-14T19:30+01:00"><span>19:30–</span><wbr><span>21:30</span></time></div></td><td data-label="Room"><div data-kit-region="fact">Garden room</div></td></tr>
</tbody>
</table>
</div>
</section>
<footer data-kit-region="count-continuation">
<p><span data-kit-role="amount">5</span> hires</p>
</footer>
</div>
</main>
</div>
List, groupedOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Invoices</h1><p data-kit-region="lede"><span>Grouped by status</span><span>32 invoices</span></p></div>
<div data-kit-region="actions"><button type="button" id="list-grouped-new-invoice" data-kit-role="primary-action" commandfor="list-grouped-new-invoice-dialog" command="show-modal"><span data-kit-region="label">New invoice</span></button><a href="../../layout-list/#layout-list-grouped">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-grouped-saved-views">
<a href="?view=all&group=status&sort=amount-desc" aria-current="page" data-kit-state="current"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="?view=unpaid&group=status&sort=amount-desc"><span data-kit-region="name">Unpaid</span><span data-kit-region="reserve" aria-hidden="true">Unpaid</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-grouped-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-grouped-saved-views-more" popover="auto">
<ul>
<li hidden><a href="?view=all&group=status&sort=amount-desc" aria-current="page"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="?view=unpaid&group=status&sort=amount-desc"><span data-kit-region="name">Unpaid</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="form-group"><label for="list-grouped-search">Search invoices</label><div data-kit-region="control"><input id="list-grouped-search" type="search" enterkeyhint="search" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-grouped-search-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<form><button type="button" data-kit-role="secondary-action" popovertarget="kit-list-grouped-filters"><span data-kit-region="label">Filters</span></button><div data-kit-region="filters" id="kit-list-grouped-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-role="form-group" data-kit-region="sort" id="list-grouped-sort-form-group"><label for="list-grouped-sort">Sort</label><div data-kit-region="select"><select id="list-grouped-sort"><option value="hirer">Hirer, A to Z</option><option value="hirer-desc">Hirer, Z to A</option><option value="due-desc">Due, newest first</option><option value="due">Due, oldest first</option><option value="amount-desc" selected>Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group"><label for="list-grouped-grouping">Group by</label><div data-kit-region="select"><select id="list-grouped-grouping"><option>None</option><option selected>Status</option><option>Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div></form>
</section>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Columns and selection actions">
<div data-kit-region="columns"><button data-kit-role="secondary-action" popovertarget="list-grouped-columns" type="button"><span data-kit-region="label">Columns</span></button><div data-kit-role="popover" id="list-grouped-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-grouped-columns-order"><article data-kit-role="row" id="list-grouped-columns-hirer"><label data-kit-region="selection"><input aria-describedby="list-grouped-columns-hirer-reason" aria-labelledby="list-grouped-columns-hirer-subject" checked data-kit-role="selection-control" disabled type="checkbox"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-grouped-columns-hirer-subject">Hirer</span><span data-kit-region="supporting" id="list-grouped-columns-hirer-reason">Names each invoice</span></span></div></div></div></div></article><article data-kit-role="row" id="list-grouped-columns-due"><button type="button" tabindex="-1" data-kit-region="handle" id="list-grouped-columns-due-handle" aria-label="Move" aria-labelledby="list-grouped-columns-due-handle list-grouped-columns-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-grouped-columns-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="due"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-grouped-columns-due-subject">Due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-grouped-columns-due-move list-grouped-columns-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-grouped-columns-due-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-grouped-columns-room"><button type="button" tabindex="-1" data-kit-region="handle" id="list-grouped-columns-room-handle" aria-label="Move" aria-labelledby="list-grouped-columns-room-handle list-grouped-columns-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-grouped-columns-room-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="room"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-grouped-columns-room-subject">Room</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-grouped-columns-room-move list-grouped-columns-room-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-grouped-columns-room-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-grouped-columns-amount-due"><button type="button" tabindex="-1" data-kit-region="handle" id="list-grouped-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-grouped-columns-amount-due-handle list-grouped-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-grouped-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-grouped-columns-amount-due-subject">Amount due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-grouped-columns-amount-due-move list-grouped-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-grouped-columns-amount-due-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-grouped-columns-invoice"><button type="button" tabindex="-1" data-kit-region="handle" id="list-grouped-columns-invoice-handle" aria-label="Move" aria-labelledby="list-grouped-columns-invoice-handle list-grouped-columns-invoice-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-grouped-columns-invoice-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="invoice"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-grouped-columns-invoice-subject">Invoice</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-grouped-columns-invoice-move list-grouped-columns-invoice-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-grouped-columns-invoice-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><div data-kit-region="drop-line" hidden aria-hidden="true"></div><dialog aria-labelledby="list-grouped-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-grouped-columns-order-move"><h2 data-kit-region="heading" id="list-grouped-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2><div data-kit-region="form-groups"><div data-kit-role="form-group" id="list-grouped-columns-order-move-place"><label for="list-grouped-columns-order-move-place-control">Place it</label><div data-kit-region="select"><select id="list-grouped-columns-order-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div><div data-kit-role="form-group" id="list-grouped-columns-order-move-row"><label for="list-grouped-columns-order-move-row-control">Column</label><div data-kit-region="select"><select id="list-grouped-columns-order-move-row-control" name="row"><option value="list-grouped-columns-due">Due</option><option value="list-grouped-columns-room">Room</option><option value="list-grouped-columns-amount-due">Amount due</option><option value="list-grouped-columns-invoice">Invoice</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div><div data-kit-role="action-group"><div data-kit-region="actions"><button data-kit-role="primary-action" type="button"><span data-kit-region="label">Move</span></button><button data-kit-modal-close data-kit-role="secondary-action" type="button"><span data-kit-region="label">Keep the order</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div></dialog></div></div></div>
<p data-kit-role="status-line" role="status" aria-live="polite"><span data-kit-role="amount">2</span> selected</p><button type="button" data-kit-region="clear-selection">Clear selection</button><div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send reminders</span></button></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices by status</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" id="list-grouped-select-page" data-kit-state="mixed" checked /><span>Select every invoice on this page</span></label></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" href="?view=all&group=status&sort=hirer"><span data-kit-region="label">Hirer</span></a></th><th scope="col" data-kit-column="time"><a data-kit-role="subtle-action" data-kit-region="sort" href="?view=all&group=status&sort=due-desc"><span data-kit-region="label">Due</span></a></th><th scope="col">Room requested for the booking</th><th scope="col" data-kit-column="amount" aria-sort="descending"><a data-kit-role="subtle-action" data-kit-region="sort" href="?view=all&group=status&sort=amount"><span data-kit-region="label">Amount due</span></a></th><td data-kit-column="actions"></td></tr></thead>
<tbody data-kit-region="group" id="invoices-overdue">
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select every overdue invoice</span></label></td><th scope="rowgroup" colspan="5"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="alert">Overdue</span></span><span data-kit-region="count">6</span></summary></details><button type="button" data-kit-role="icon-action" commandfor="list-grouped-new-invoice-dialog" command="show-modal" aria-label="New invoice in Overdue"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div></th></tr>
<tr id="grouped-invoice-brookfield-choir"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Brookfield Choir invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Brookfield Choir</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-03-03">3 March 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£640.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-oakmere-wi"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere WI invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere WI</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-03-10">10 March 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£420.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-st-anne-s-scout-group"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select St Anne’s Scout Group invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">St Anne’s Scout Group</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-02-28">28 February 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£315.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-pilates-with-jo"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Pilates with Jo invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Pilates with Jo</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-03-14">14 March 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£210.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-toddler-group"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Toddler group invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Toddler group</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-03-07">7 March 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£96.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-chess-club"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Chess club invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Chess club</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-02-21">21 February 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Meeting Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£48.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
</tbody>
<tbody data-kit-region="group" id="invoices-awaiting">
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" id="list-grouped-select-awaiting" data-kit-state="mixed" checked /><span>Select every invoice awaiting payment</span></label></td><th scope="rowgroup" colspan="5"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="attention">Awaiting payment</span></span><span data-kit-region="count">14</span></summary></details><button type="button" data-kit-role="icon-action" commandfor="list-grouped-new-invoice-dialog" command="show-modal" aria-label="New invoice in Awaiting payment"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div></th></tr>
<tr id="grouped-invoice-oakmere-primary-school"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-30">30 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£1,280.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-riverside-dance"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" checked /><span>Select Riverside Dance invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Dance</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-25">25 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£860.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-greenway-nursery"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Greenway Nursery invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Greenway Nursery</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-02">2 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£540.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-hillside-bridge-club"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Hillside Bridge Club invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Hillside Bridge Club</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-28">28 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Meeting Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£380.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-parish-council"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Parish Council invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Parish Council</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-05">5 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£300.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-yoga-with-priya"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Yoga with Priya invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Yoga with Priya</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-22">22 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£240.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-book-group"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Book group invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Book group</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-30">30 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Meeting Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£120.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-knit-and-natter"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Knit and natter invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Knit and natter</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-09">9 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£90.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-tai-chi"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Tai chi invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Tai chi</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-03">3 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£72.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-line-dancing"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Line dancing invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Line dancing</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-06">6 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£64.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-baby-sensory"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Baby sensory invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Baby sensory</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-29">29 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£60.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-craft-club"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Craft club invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Craft club</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-12">12 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£48.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-ukulele-group"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Ukulele group invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Ukulele group</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-01">1 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Meeting Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£36.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-walking-football"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Walking football invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Walking football</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-05-08">8 May 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£30.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
</tbody>
<tbody data-kit-region="group" id="invoices-paid">
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select every paid invoice</span></label></td><th scope="rowgroup" colspan="5"><div data-kit-region="line"><details><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="settled">Paid</span></span><span data-kit-region="count">12</span></summary></details><button type="button" id="grouped-invoices-paid-new" data-kit-state="inert" disabled aria-describedby="grouped-invoices-paid-new-words" data-kit-role="icon-action" commandfor="list-grouped-new-invoice-dialog" command="show-modal" aria-label="New invoice in Paid"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div><p data-kit-region="words" id="grouped-invoices-paid-new-words">Check the group before adding an invoice.</p></th></tr>
<tr id="grouped-invoice-lions-club"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Lions Club invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Lions Club</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-04-01">1 April 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£450.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
<tr id="grouped-invoice-mothers-union"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Mothers’ Union invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Mothers’ Union</a></th><td data-kit-column="time" data-label="Due"><div data-kit-region="fact"><time datetime="2025-03-28">28 March 2025</time></div></td><td data-label="Room requested for the booking"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£160.00</div></td><td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="subtle-action"><span data-kit-region="label">Duplicate</span></button></div></td></tr>
</tbody>
</table></div>
</section>
<footer data-kit-region="count-continuation">
<p>Invoices <span data-kit-role="amount">1</span> to <span data-kit-role="amount">22</span> of <span data-kit-role="amount">32</span></p>
</footer>
</div>
<dialog id="list-grouped-new-invoice-dialog" data-kit-role="dialog" aria-labelledby="list-grouped-new-invoice-title">
<h2 data-kit-region="heading" id="list-grouped-new-invoice-title">New invoice</h2>
<div data-kit-region="form-groups">
<form id="list-grouped-new-invoice-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-grouped-new-invoice-hirer">
<label for="list-grouped-new-invoice-hirer-control">Hirer</label>
<input id="list-grouped-new-invoice-hirer-control" name="hirer" type="text">
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-grouped-new-invoice-form" data-kit-role="primary-action"><span data-kit-region="label">Create invoice</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-grouped-new-invoice-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
<div data-kit-layout="list" id="layout-list-grouped-rows">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Rooms">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="group" id="rooms-open">
<div data-kit-region="group-heading"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="settled">Open</span></span><span data-kit-region="count">2</span></summary></details><button type="button" id="grouped-rooms-open-new" data-kit-state="inert" disabled aria-describedby="grouped-rooms-open-new-words" data-kit-role="icon-action" commandfor="list-grouped-new-room-dialog" command="show-modal" aria-label="New room in Open"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div><p data-kit-region="words" id="grouped-rooms-open-new-words">Check the group before adding a room.</p></div>
<article data-kit-role="row" id="grouped-room-main-hall">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Main Hall</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">120</span></span></p></div>
</div>
</div>
</div>
</article>
<article data-kit-role="row" id="grouped-room-garden-room">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Garden Room</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">40</span></span></p></div>
</div>
</div>
</div>
</article>
</div>
<div data-kit-region="group" id="rooms-closed">
<div data-kit-region="group-heading"><div data-kit-region="line"><details><summary><span data-kit-region="value"><span data-kit-role="stamp" data-kit-state="neutral">Closed for repair</span></span><span data-kit-region="count">1</span></summary></details><button type="button" data-kit-role="icon-action" commandfor="list-grouped-new-room-dialog" command="show-modal" aria-label="New room in Closed for repair"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div></div>
<article data-kit-role="row" id="grouped-room-small-hall">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Small Hall</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">60</span></span></p></div>
</div>
</div>
</div>
</article>
</div>
</section>
</div>
<dialog id="list-grouped-new-room-dialog" data-kit-role="dialog" aria-labelledby="list-grouped-new-room-title">
<h2 data-kit-region="heading" id="list-grouped-new-room-title">New room</h2>
<div data-kit-region="form-groups">
<form id="list-grouped-new-room-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-grouped-new-room-name">
<label for="list-grouped-new-room-name-control">Room name</label>
<input id="list-grouped-new-room-name-control" name="name" type="text" data-kit-paste='{"kind":"rooms","locale":"en-GB"}'>
<div id="list-grouped-new-room-name-paste" data-kit-region="paste" hidden>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
<button type="submit" data-kit-role="secondary-action" name="names"><span data-kit-region="label"></span></button>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-grouped-new-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create room</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-grouped-new-room-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
<div data-kit-layout="list" id="layout-list-grouped-room">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Bookings">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="group" id="bookings-main-hall">
<div data-kit-region="group-heading"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><a href="../../record/">Main Hall</a></span><span data-kit-region="count">2</span></summary></details><button type="button" data-kit-role="icon-action" commandfor="list-grouped-new-booking-main-hall-dialog" command="show-modal" aria-label="New booking in Main Hall"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div></div>
<article data-kit-role="row" id="grouped-booking-priya-shah">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Priya Shah</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-06-14T18:00+01:00"><span>14 June 2025</span><wbr><span> at 18:00</span></time></span></p></div>
</div>
</div>
</div>
</article>
<article data-kit-role="row" id="grouped-booking-tom-reed">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Tom Reed</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-06-21T10:00+01:00"><span>21 June 2025</span><wbr><span> at 10:00</span></time></span></p></div>
</div>
</div>
</div>
</article>
</div>
<div data-kit-region="group" id="bookings-garden-room">
<div data-kit-region="group-heading"><div data-kit-region="line"><details open><summary><span data-kit-region="value"><a href="../../record/">Garden Room</a></span><span data-kit-region="count">1</span></summary></details><button type="button" data-kit-role="icon-action" commandfor="list-grouped-new-booking-garden-room-dialog" command="show-modal" aria-label="New booking in Garden Room"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"/></svg></button></div></div>
<article data-kit-role="row" id="grouped-booking-ana-lima">
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Ana Lima</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-06-15T12:00+01:00"><span>15 June 2025</span><wbr><span> at 12:00</span></time></span></p></div>
</div>
</div>
</div>
</article>
</div>
</section>
</div>
<dialog id="list-grouped-new-booking-main-hall-dialog" data-kit-role="dialog" aria-labelledby="list-grouped-new-booking-main-hall-title">
<h2 data-kit-region="heading" id="list-grouped-new-booking-main-hall-title">New booking</h2>
<div data-kit-region="form-groups">
<form id="list-grouped-new-booking-main-hall-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-grouped-new-booking-main-hall-hirer">
<label for="list-grouped-new-booking-main-hall-hirer-control">Hirer</label>
<input id="list-grouped-new-booking-main-hall-hirer-control" name="hirer" type="text">
</div>
<div data-kit-role="form-group" id="list-grouped-new-booking-main-hall-room">
<label for="list-grouped-new-booking-main-hall-room-control" id="list-grouped-new-booking-main-hall-room-label">Room</label>
<div data-kit-role="record-picker" data-kit-width="medium" id="list-grouped-new-booking-main-hall-room-control-record-picker">
<div data-kit-region="control">
<input id="list-grouped-new-booking-main-hall-room-control" type="text" role="combobox" value="Main Hall" aria-autocomplete="list" aria-expanded="false" aria-controls="list-grouped-new-booking-main-hall-room-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-grouped-new-booking-main-hall-room-control-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
<input type="hidden" name="room" value="r-main-hall">
<ul id="list-grouped-new-booking-main-hall-room-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="list-grouped-new-booking-main-hall-room-label">
<li id="list-grouped-new-booking-main-hall-room-control-match-r-main-hall" role="option" data-value="r-main-hall"><span data-kit-region="match-name">Main Hall</span><span data-kit-region="match-fact">Seats 120</span></li>
<li id="list-grouped-new-booking-main-hall-room-control-match-r-garden-room" role="option" data-value="r-garden-room"><span data-kit-region="match-name">Garden Room</span><span data-kit-region="match-fact">Seats 40</span></li>
<li id="list-grouped-new-booking-main-hall-room-control-match-r-small-hall" role="option" data-value="r-small-hall"><span data-kit-region="match-name">Small Hall</span><span data-kit-region="match-fact">Seats 60</span></li>
</ul>
</div>
</div>
<output for="list-grouped-new-booking-main-hall-room-control">Main Hall</output>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-grouped-new-booking-main-hall-form" data-kit-role="primary-action"><span data-kit-region="label">Create booking</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-grouped-new-booking-main-hall-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
<dialog id="list-grouped-new-booking-garden-room-dialog" data-kit-role="dialog" aria-labelledby="list-grouped-new-booking-garden-room-title">
<h2 data-kit-region="heading" id="list-grouped-new-booking-garden-room-title">New booking</h2>
<div data-kit-region="form-groups">
<form id="list-grouped-new-booking-garden-room-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-grouped-new-booking-garden-room-hirer">
<label for="list-grouped-new-booking-garden-room-hirer-control">Hirer</label>
<input id="list-grouped-new-booking-garden-room-hirer-control" name="hirer" type="text">
</div>
<div data-kit-role="form-group" id="list-grouped-new-booking-garden-room-room">
<label for="list-grouped-new-booking-garden-room-room-control" id="list-grouped-new-booking-garden-room-room-label">Room</label>
<div data-kit-role="record-picker" data-kit-width="medium" id="list-grouped-new-booking-garden-room-room-control-record-picker">
<div data-kit-region="control">
<input id="list-grouped-new-booking-garden-room-room-control" type="text" role="combobox" value="Garden Room" aria-autocomplete="list" aria-expanded="false" aria-controls="list-grouped-new-booking-garden-room-room-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-grouped-new-booking-garden-room-room-control-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
<input type="hidden" name="room" value="r-garden-room">
<ul id="list-grouped-new-booking-garden-room-room-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="list-grouped-new-booking-garden-room-room-label">
<li id="list-grouped-new-booking-garden-room-room-control-match-r-main-hall" role="option" data-value="r-main-hall"><span data-kit-region="match-name">Main Hall</span><span data-kit-region="match-fact">Seats 120</span></li>
<li id="list-grouped-new-booking-garden-room-room-control-match-r-garden-room" role="option" data-value="r-garden-room"><span data-kit-region="match-name">Garden Room</span><span data-kit-region="match-fact">Seats 40</span></li>
<li id="list-grouped-new-booking-garden-room-room-control-match-r-small-hall" role="option" data-value="r-small-hall"><span data-kit-region="match-name">Small Hall</span><span data-kit-region="match-fact">Seats 60</span></li>
</ul>
</div>
</div>
<output for="list-grouped-new-booking-garden-room-room-control">Garden Room</output>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-grouped-new-booking-garden-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create booking</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-grouped-new-booking-garden-room-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
</main>
</div>
List, desktop-onlyOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header"><div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Invoices</h1><p data-kit-region="lede"><span>Awaiting payment</span></p></div><div data-kit-region="actions"><a href="../../layout-list/#layout-list-desktop-only">CSS core</a></div></header>
<main data-kit-region="body">
<div data-kit-layout="list"><div data-kit-region="notices" aria-live="polite"></div><section data-kit-region="rows" aria-label="Invoices"><div data-kit-region="notices" aria-live="polite"></div>
<article data-kit-role="row" id="desktop-facts-row">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">INV-001<span data-kit-region="supporting" data-kit-desktop-only="true">Hire of Main Hall.</span></a><span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span></div>
<div data-kit-region="facts-column">
<p data-kit-region="facts" data-kit-desktop-only="true"><span data-kit-region="fact">Hirer: Priya Shah</span></p>
<p data-kit-region="facts" data-kit-desktop-only="true"><span data-kit-region="fact">Amount: <span data-kit-role="amount">£25.00</span></span></p>
</div>
</div></div></div>
</article>
</section><footer data-kit-region="count-continuation"><p>1 invoice</p></footer></div>
<p class="specimen-case-line">As a records table.</p>
<div data-kit-layout="list"><div data-kit-region="notices" aria-live="polite"></div><section data-kit-region="rows" aria-label="Invoices"><div data-kit-region="notices" aria-live="polite"></div>
<div class="specimen-table-contained">
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col">Status</th><th scope="col">Hirer</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
<tbody><tr id="desktop-facts-record"><th scope="row" data-kit-column="subject"><a href="../../record/">INV-001</a><span data-kit-region="supporting" data-kit-desktop-only="true">Hire of Main Hall.</span></th><td data-label="Status"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span></div></td><td data-label="Hirer" data-kit-desktop-only="true"><div data-kit-region="fact">Priya Shah</div></td><td data-label="Amount" data-kit-column="amount" data-kit-desktop-only="true"><div data-kit-region="fact" data-kit-role="amount">£25.00</div></td></tr></tbody>
</table></div>
</div>
</section><footer data-kit-region="count-continuation"><p>1 invoice</p></footer></div>
</main>
</div>
List, newOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Rooms</h1><p data-kit-region="lede"><span>1 room</span></p></div>
<div data-kit-region="actions"><button type="button" id="list-new-room" data-kit-role="primary-action" commandfor="list-new-room-dialog" command="show-modal"><span data-kit-region="label">New room</span></button><a href="../../layout-list/#layout-list-new">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Rooms" data-kit-new="list-new-room">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Room</th><th scope="col" data-kit-column="amount">Capacity</th></tr></thead>
<tbody><tr id="list-new-room-main-hall"><th scope="row" data-kit-column="subject"><a href="../../record/">Main Hall</a></th><td data-kit-column="amount" data-label="Capacity"><div data-kit-region="fact" data-kit-role="amount">40</div></td></tr></tbody>
</table></div>
</section>
<footer data-kit-region="count-continuation"><p>1 room</p></footer>
</div>
<dialog id="list-new-room-dialog" data-kit-role="dialog" aria-labelledby="list-new-room-title">
<h2 data-kit-region="heading" id="list-new-room-title">New room</h2>
<div data-kit-region="form-groups">
<form id="list-new-room-form">
<div data-kit-role="form-group" data-kit-width="medium" id="list-new-room-name">
<label for="list-new-room-name-control">Room name</label>
<input id="list-new-room-name-control" name="name" type="text" data-kit-paste='{"kind":"rooms","locale":"en-GB"}'>
<div id="list-new-room-name-paste" data-kit-region="paste" hidden>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
<button type="submit" data-kit-role="secondary-action" name="names"><span data-kit-region="label"></span></button>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-new-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create room</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-new-room-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</dialog>
</main>
</div>
List, new record-pickerOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Invoices</h1><p data-kit-region="lede"><span>1 invoice</span></p></div>
<div data-kit-region="actions"><button type="button" id="list-new-picker-invoice" data-kit-role="primary-action" commandfor="list-new-picker-invoice-dialog" command="show-modal"><span data-kit-region="label">New invoice</span></button><a href="../../../layout-list/#layout-list-new-record-picker">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col">Hirer</th></tr></thead>
<tbody><tr id="list-new-picker-invoice-first"><th scope="row" data-kit-column="subject"><a href="../../../record/">INV-001</a></th><td data-label="Hirer"><div data-kit-region="fact">Priya Shah</div></td></tr></tbody>
</table></div>
</section>
<footer data-kit-region="count-continuation"><p>1 invoice</p></footer>
</div>
<dialog id="list-new-picker-invoice-dialog" data-kit-role="dialog" aria-labelledby="list-new-picker-invoice-title">
<h2 data-kit-region="heading" id="list-new-picker-invoice-title">New invoice</h2>
<div data-kit-region="form-groups">
<form id="list-new-picker-invoice-form">
<div data-kit-role="form-group" id="list-new-picker-invoice-hirer">
<label for="list-new-picker-invoice-hirer-control" id="list-new-picker-invoice-hirer-label">Hirer</label>
<div data-kit-role="record-picker" data-kit-width="medium" data-kit-query-event="search_hirers" id="list-new-picker-invoice-hirer-control-record-picker">
<div data-kit-region="control">
<input id="list-new-picker-invoice-hirer-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="list-new-picker-invoice-hirer-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
<input type="hidden" name="hirer">
<ul id="list-new-picker-invoice-hirer-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="list-new-picker-invoice-hirer-label">
<li id="list-new-picker-invoice-hirer-control-match-priya-shah" role="option" data-value="priya-shah"><span data-kit-region="match-name">Priya Shah</span><span data-kit-region="match-fact">Leeds</span></li>
<li id="list-new-picker-invoice-hirer-control-match-tom-reid" role="option" data-value="tom-reid"><span data-kit-region="match-name">Tom Reid</span><span data-kit-region="match-fact">York</span></li>
</ul>
</div>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-new-picker-invoice-form" data-kit-role="primary-action"><span data-kit-region="label">Create invoice</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-new-picker-invoice-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</dialog>
</main>
</div>
List, new number-fieldOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Contributions</h1><p data-kit-region="lede"><span>1 contribution</span></p></div>
<div data-kit-region="actions"><button type="button" id="list-new-contribution" data-kit-role="primary-action" commandfor="list-new-contribution-dialog" command="show-modal"><span data-kit-region="label">New contribution</span></button><a href="../../../layout-list/#layout-list-new-number-field">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Contributions">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Contribution</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
<tbody><tr id="list-new-contribution-first"><th scope="row" data-kit-column="subject"><a href="../../../record/">CT-001</a></th><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£25.00</div></td></tr></tbody>
</table></div>
</section>
<footer data-kit-region="count-continuation"><p>1 contribution</p></footer>
</div>
<dialog id="list-new-contribution-dialog" data-kit-role="dialog" aria-labelledby="list-new-contribution-title">
<h2 data-kit-region="heading" id="list-new-contribution-title">New contribution</h2>
<div data-kit-region="form-groups">
<form id="list-new-contribution-form">
<div data-kit-role="form-group" id="list-new-contribution-amount">
<label for="list-new-contribution-amount-control" id="list-new-contribution-amount-label">Amount</label>
<div data-kit-number='{"currency":"GBP","fraction":false,"locale":"en-GB"}' data-kit-role="number-field" data-kit-width="short" id="list-new-contribution-amount-control-number-field">
<span data-kit-region="unit">£</span>
<input autocomplete="off" autocorrect="off" id="list-new-contribution-amount-control" inputmode="decimal" spellcheck="false" type="text" value="">
<input type="hidden" name="amount" value="">
</div>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="list-new-contribution-form" data-kit-role="primary-action"><span data-kit-region="label">Create contribution</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="list-new-contribution-dialog" command="close"><span data-kit-region="label">Cancel</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</dialog>
</main>
</div>
List, inboxOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Inbox</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-inbox">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="action-group" aria-label="Notification views and actions">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-inbox-saved-views">
<a href="?view=inbox" aria-current="page" data-kit-state="current"><span data-kit-region="name">Inbox</span><span data-kit-region="reserve" aria-hidden="true">Inbox</span></a>
<a href="?view=snoozed"><span data-kit-region="name">Snoozed</span><span data-kit-region="reserve" aria-hidden="true">Snoozed</span></a>
<a href="?view=done"><span data-kit-region="name">Done</span><span data-kit-region="reserve" aria-hidden="true">Done</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-inbox-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-inbox-saved-views-more" popover="auto">
<ul>
<li hidden><a href="?view=inbox" aria-current="page"><span data-kit-region="name">Inbox</span></a></li>
<li hidden><a href="?view=snoozed"><span data-kit-region="name">Snoozed</span></a></li>
<li hidden><a href="?view=done"><span data-kit-region="name">Done</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Mark all read</span></button><p data-kit-role="status-line" role="status" aria-live="polite">Marks the 3 unread notifications as read.</p><div data-kit-region="routes"><a href="../../settings/">Notification settings</a></div></div>
</section>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Selection actions">
<p data-kit-role="status-line" role="status" aria-live="polite"><span data-kit-role="amount">1</span> selected</p><button type="button" data-kit-region="clear-selection">Clear selection</button><div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button></div>
</section>
<section data-kit-region="rows" aria-label="Notifications">
<div data-kit-region="notices" aria-live="polite"></div>
<article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="oakmere-paid" checked><span>Select Oakmere Primary School invoice</span></label>
<span data-kit-region="unread" role="img" aria-label="Unread"></span>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Oakmere Primary School invoice</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Aisha Khan paid it · 09:12</span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button><div id="inbox-oakmere-paid-fold" data-kit-role="action-menu"><button aria-controls="inbox-oakmere-paid-fold-layer" aria-haspopup="menu" aria-label="More actions for this notification" data-kit-role="icon-action" id="inbox-oakmere-paid-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="inbox-oakmere-paid-fold-layer" popover="manual" role="menu" aria-labelledby="inbox-oakmere-paid-fold-trigger"></ul></div></div>
</div>
</article>
<article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="main-hall-tuesday"><span>Select Main Hall booking on Tuesday</span></label>
<span data-kit-region="unread" role="img" aria-label="Unread"></span>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Main Hall booking on Tuesday</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">3 updates, latest Tom Reid moved it to 18:00 · 08:40</span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button><div id="inbox-main-hall-tuesday-fold" data-kit-role="action-menu"><button aria-controls="inbox-main-hall-tuesday-fold-layer" aria-haspopup="menu" aria-label="More actions for this notification" data-kit-role="icon-action" id="inbox-main-hall-tuesday-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="inbox-main-hall-tuesday-fold-layer" popover="manual" role="menu" aria-labelledby="inbox-main-hall-tuesday-fold-trigger"></ul></div></div>
</div>
<details data-kit-role="disclosure" data-kit-region="expansion">
<summary><span data-kit-region="label">2 earlier updates</span></summary>
<div data-kit-region="content">
<div data-kit-role="fact-group">
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Maya Patel</dt><dd data-kit-region="value">Added the Garden Room</dd></dl>
<dl data-kit-role="labelled-fact"><dt data-kit-region="name">Aisha Khan</dt><dd data-kit-region="value">Booked it</dd></dl>
</div>
</div>
</details>
</article>
<article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="riverside-reminder"><span>Select Riverside Dance invoice</span></label>
<span data-kit-region="unread" role="img" aria-label="Unread"></span>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Riverside Dance invoice</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Maya Patel sent a reminder · Yesterday</span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button><div id="inbox-riverside-reminder-fold" data-kit-role="action-menu"><button aria-controls="inbox-riverside-reminder-fold-layer" aria-haspopup="menu" aria-label="More actions for this notification" data-kit-role="icon-action" id="inbox-riverside-reminder-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="inbox-riverside-reminder-fold-layer" popover="manual" role="menu" aria-labelledby="inbox-riverside-reminder-fold-trigger"></ul></div></div>
</div>
</article>
<article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="garden-room-approved"><span>Select Garden Room hire</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Garden Room hire</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Tom Reid approved it · Yesterday</span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button><div id="inbox-garden-room-approved-fold" data-kit-role="action-menu"><button aria-controls="inbox-garden-room-approved-fold-layer" aria-haspopup="menu" aria-label="More actions for this notification" data-kit-role="icon-action" id="inbox-garden-room-approved-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="inbox-garden-room-approved-fold-layer" popover="manual" role="menu" aria-labelledby="inbox-garden-room-approved-fold-trigger"></ul></div></div>
</div>
</article>
<article data-kit-role="row">
<label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="brookfield-note"><span>Select Brookfield Choir invoice</span></label>
<div data-kit-region="content-column">
<div data-kit-region="subject-column">
<div data-kit-region="line">
<div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Brookfield Choir invoice</a></div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Maya Patel added a note · Monday</span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Snooze</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Unsubscribe</span></button><div id="inbox-brookfield-note-fold" data-kit-role="action-menu"><button aria-controls="inbox-brookfield-note-fold-layer" aria-haspopup="menu" aria-label="More actions for this notification" data-kit-role="icon-action" id="inbox-brookfield-note-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="inbox-brookfield-note-fold-layer" popover="manual" role="menu" aria-labelledby="inbox-brookfield-note-fold-trigger"></ul></div></div>
</div>
</article>
</section>
</div>
</main>
</div>
List, refused-undoOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-refused-undo">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-role="refusal" id="list-undo-refused-1" role="alert" aria-atomic="true">
<p data-kit-region="line">Undo is refused: the Oakmere Primary School invoice changed after you removed it.</p>
<ul data-kit-region="causes"><li><a href="../../record/#history">Oakmere Primary School invoice history</a></li></ul>
</div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Invoice views and controls">
<nav aria-label="Saved views" data-kit-role="local-tabs" id="layout-list-refused-undo-saved-views">
<a href="../fitting-saved-views/?view=all&page=1"><span data-kit-region="name">All invoices</span><span data-kit-region="reserve" aria-hidden="true">All invoices</span></a>
<a href="../fitting-saved-views/?view=overdue&page=1" aria-current="page" data-kit-state="current"><span data-kit-region="name">Overdue</span><span data-kit-region="reserve" aria-hidden="true">Overdue</span></a>
<div data-kit-region="more" hidden>
<button data-kit-role="subtle-action" popovertarget="layout-list-refused-undo-saved-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
<div data-kit-role="popover" id="layout-list-refused-undo-saved-views-more" popover="auto">
<ul>
<li hidden><a href="../fitting-saved-views/?view=all&page=1"><span data-kit-region="name">All invoices</span></a></li>
<li hidden><a href="../fitting-saved-views/?view=overdue&page=1" aria-current="page"><span data-kit-region="name">Overdue</span></a></li>
</ul>
</div>
</div>
</nav>
<div data-kit-role="form-group"><label for="list-filter">Search invoices</label><div data-kit-region="control"><input id="list-filter" type="search" enterkeyhint="search" value="Oakmere Primary School" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="list-filter-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div>
<form><button type="button" data-kit-role="secondary-action" popovertarget="kit-list-filters"><span data-kit-region="label">Filters</span></button><div data-kit-region="filters" id="kit-list-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-role="form-group"><label for="list-status">Status</label><div data-kit-region="select"><select id="list-status"><option>Any status</option><option>Unpaid</option><option>Paid</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group"><label for="list-overdue">Days past the payment due date</label><div data-kit-region="select"><select id="list-overdue"><option>Any</option><option>Over 30 days</option><option>Over 60 days</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-sort-form-group"><label for="list-sort">Sort</label><div data-kit-region="select"><select id="list-sort"><option value="relevance" selected>Relevance</option><option value="invoice">Invoice, A to Z</option><option value="invoice-desc">Invoice, Z to A</option><option value="amount-desc">Amount due, largest first</option><option value="amount">Amount due, smallest first</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
</div></form>
</section>
<section data-kit-region="columns-selection-actions" data-kit-holds="action-group" aria-label="Columns and selection actions">
<div data-kit-region="columns"><button data-kit-role="secondary-action" popovertarget="list-refused-undo-columns" type="button"><span data-kit-region="label">Columns</span></button><div data-kit-role="popover" id="list-refused-undo-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-refused-undo-columns-order"><article data-kit-role="row" id="list-refused-undo-columns-invoice"><label data-kit-region="selection"><input aria-describedby="list-refused-undo-columns-invoice-reason" aria-labelledby="list-refused-undo-columns-invoice-subject" checked data-kit-role="selection-control" disabled type="checkbox"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-refused-undo-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="list-refused-undo-columns-invoice-reason">Names each invoice</span></span></div></div></div></div></article><article data-kit-role="row" id="list-refused-undo-columns-amount-due"><button type="button" tabindex="-1" data-kit-region="handle" id="list-refused-undo-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-refused-undo-columns-amount-due-handle list-refused-undo-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-refused-undo-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-refused-undo-columns-amount-due-subject">Amount due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-refused-undo-columns-amount-due-move list-refused-undo-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-refused-undo-columns-amount-due-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-refused-undo-columns-due-date"><button type="button" tabindex="-1" data-kit-region="handle" id="list-refused-undo-columns-due-date-handle" aria-label="Move" aria-labelledby="list-refused-undo-columns-due-date-handle list-refused-undo-columns-due-date-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-refused-undo-columns-due-date-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="due-date"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-refused-undo-columns-due-date-subject">Due date</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-refused-undo-columns-due-date-move list-refused-undo-columns-due-date-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-refused-undo-columns-due-date-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><article data-kit-role="row" id="list-refused-undo-columns-room"><button type="button" tabindex="-1" data-kit-region="handle" id="list-refused-undo-columns-room-handle" aria-label="Move" aria-labelledby="list-refused-undo-columns-room-handle list-refused-undo-columns-room-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button><label data-kit-region="selection"><input aria-labelledby="list-refused-undo-columns-room-subject" data-kit-role="selection-control" name="columns" type="checkbox" value="room"></label><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-refused-undo-columns-room-subject">Room</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="list-refused-undo-columns-room-move list-refused-undo-columns-room-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-refused-undo-columns-room-move" type="button"><span data-kit-region="label">Move</span></button></div></div></article><div data-kit-region="drop-line" hidden aria-hidden="true"></div><dialog aria-labelledby="list-refused-undo-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-refused-undo-columns-order-move"><h2 data-kit-region="heading" id="list-refused-undo-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2><div data-kit-region="form-groups"><div data-kit-role="form-group" id="list-refused-undo-columns-order-move-place"><label for="list-refused-undo-columns-order-move-place-control">Place it</label><div data-kit-region="select"><select id="list-refused-undo-columns-order-move-place-control" name="place"><option value="before">Before</option><option value="after">After</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div><div data-kit-role="form-group" id="list-refused-undo-columns-order-move-row"><label for="list-refused-undo-columns-order-move-row-control">Column</label><div data-kit-region="select"><select id="list-refused-undo-columns-order-move-row-control" name="row"><option value="list-refused-undo-columns-amount-due">Amount due</option><option value="list-refused-undo-columns-due-date">Due date</option><option value="list-refused-undo-columns-room">Room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></div><div data-kit-role="action-group"><div data-kit-region="actions"><button data-kit-role="primary-action" type="button"><span data-kit-region="label">Move</span></button><button data-kit-modal-close data-kit-role="secondary-action" type="button"><span data-kit-region="label">Keep the order</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div></dialog></div></div></div>
<p data-kit-role="status-line" role="status" aria-live="polite"></p><div data-kit-role="action-group" data-kit-holds="words"><button type="button" id="review-selected" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="review-selected-words"><span data-kit-region="label">Review selected</span></button><p data-kit-region="words" id="review-selected-words">Select an invoice to review.</p></div>
</section>
<section data-kit-region="rows" aria-label="Invoices">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Overdue invoices</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=invoice"><span data-kit-region="label">Invoice</span></a></th><th scope="col" data-kit-column="amount"><a data-kit-role="subtle-action" data-kit-region="sort" href="?sort=amount-desc"><span data-kit-region="label">Amount due</span></a></th></tr></thead>
<tbody>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School invoice awaiting final address confirmation</a><span data-kit-region="supporting">Main Hall hire</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion" open><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content" data-kit-authored-text="true"><p>Contact Maya to confirm the billing address.</p></div></details></td></tr>
<tr><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Oakmere Primary School invoice</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a><span data-kit-region="supporting">Awaiting payment</span></th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr>
<tr><td colspan="3"><details data-kit-region="expansion"><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Payment details</dt><dd data-kit-region="value">Payment details are available after the address is confirmed.</dd></dl></div></div></details></td></tr>
</tbody>
<tfoot data-kit-region="total"><tr><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject">Total due</th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£168.00</div></td></tr></tfoot>
</table></div>
</section>
<footer data-kit-region="count-continuation">
<p>Invoice <span data-kit-role="amount">6</span> of <span data-kit-role="amount">12</span> · <span data-kit-role="amount">1</span> per page</p>
<nav data-kit-role="pager" aria-label="Invoice pages">
<span data-kit-region="desk-window"><a href="../fitting-saved-views/?view=all&page=5" rel="prev">Previous</a><a href="../fitting-saved-views/?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="../fitting-saved-views/?view=all&page=4" aria-label="Page 4">4</a><a href="../fitting-saved-views/?view=all&page=5" aria-label="Page 5">5</a><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><a href="../fitting-saved-views/?view=all&page=7" aria-label="Page 7">7</a><a href="../fitting-saved-views/?view=all&page=8" aria-label="Page 8">8</a><span>…</span><a href="../fitting-saved-views/?view=all&page=12" aria-label="Page 12, last page">12</a><a href="../fitting-saved-views/?view=all&page=7" rel="next">Next</a></span>
<span data-kit-region="phone-window"><a href="../fitting-saved-views/?view=all&page=5" rel="prev">Previous</a><a href="../fitting-saved-views/?view=all&page=1" aria-label="Page 1, first page">1</a><span>…</span><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><span>…</span><a href="../fitting-saved-views/?view=all&page=12" aria-label="Page 12, last page">12</a><a href="../fitting-saved-views/?view=all&page=7" rel="next">Next</a></span>
</nav>
</footer>
</div>
</main>
</div>
List, nestedOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Accounts</h1><p data-kit-region="lede"><span>Parent accounts hold their subsidiaries</span><span>24 accounts</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-nested">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="rows" aria-label="Accounts">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0">
<table data-kit-table="records">
<caption>Accounts and their subsidiaries</caption>
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select every account on this page</span></label></th><th scope="col" data-kit-column="subject">Account</th><th scope="col">Owner</th><th scope="col" data-kit-column="time">Renews</th><th scope="col" data-kit-column="amount">Annual value</th></tr></thead>
<tbody>
<tr id="nested-harbour-group" data-kit-region="heading-line" aria-level="1" aria-expanded="true"><td data-kit-column="selection"></td><th scope="row" data-kit-column="subject" colspan="4"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Harbour Group</a></th></tr>
<tr id="nested-harbour-marine" aria-level="2"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Harbour Marine</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Harbour Marine</a></th><td data-label="Owner"><div data-kit-region="fact">Priya Shah</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2025-09-01">1 September 2025</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£12,400.00</div></td></tr>
<tr id="nested-harbour-freight-and-logistics" aria-level="2"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Harbour Freight and Logistics Services</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Harbour Freight and Logistics Services</a></th><td data-label="Owner"><div data-kit-region="fact">Tom Okafor</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2025-11-15">15 November 2025</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£9,850.00</div></td></tr>
<tr id="nested-northwind-holdings" aria-level="1" aria-expanded="true"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Northwind Holdings</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Northwind Holdings</a></th><td data-label="Owner"><div data-kit-region="fact">Ana Ruiz</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2026-01-31">31 January 2026</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£61,750.00</div></td></tr>
<tr id="nested-northwind-retail" aria-level="2" aria-expanded="true"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Northwind Retail</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Northwind Retail</a></th><td data-label="Owner"><div data-kit-region="fact">Ana Ruiz</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2026-01-31">31 January 2026</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£22,300.00</div></td></tr>
<tr id="nested-northwind-retail-online" aria-level="3"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Northwind Retail Online</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Northwind Retail Online</a></th><td data-label="Owner"><div data-kit-region="fact">Ana Ruiz</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2026-01-31">31 January 2026</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£8,100.00</div></td></tr>
<tr id="nested-northwind-studio" aria-level="2" aria-expanded="false"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Northwind Studio</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Northwind Studio</a></th><td data-label="Owner"><div data-kit-region="fact">Lena Fischer</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2025-12-05">5 December 2025</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£14,900.00</div></td></tr>
<tr id="nested-kestrel-partners" aria-level="1" aria-expanded="true"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Kestrel Partners</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Kestrel Partners</a></th><td data-label="Owner"><div data-kit-region="fact">Tom Okafor</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2025-10-20">20 October 2025</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£33,600.00</div></td></tr>
<tr data-kit-region="loading" aria-level="2"><td data-kit-column="selection"></td><td colspan="4"></td></tr>
<tr id="nested-alder-and-finch" aria-level="1" aria-expanded="true"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Alder & Finch</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Alder & Finch</a></th><td data-label="Owner"><div data-kit-region="fact">Lena Fischer</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2026-03-12">12 March 2026</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£27,450.00</div></td></tr>
<tr data-kit-region="failed" aria-level="2"><td data-kit-column="selection"></td><td colspan="4">These accounts couldn’t load. <button type="button">Retry</button></td></tr>
<tr id="nested-bramble-health" aria-level="1" aria-expanded="false"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Bramble Health</span></label></td><th scope="row" data-kit-column="subject"><button type="button" data-kit-region="caret" tabindex="-1" aria-hidden="true"></button><a href="../../record/">Bramble Health</a></th><td data-label="Owner"><div data-kit-region="fact">Priya Shah</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2026-02-28">28 February 2026</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£19,200.00</div></td></tr>
<tr id="nested-copperline" aria-level="1"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" /><span>Select Copperline</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Copperline</a></th><td data-label="Owner"><div data-kit-region="fact">Ana Ruiz</div></td><td data-kit-column="time" data-label="Renews"><div data-kit-region="fact"><time datetime="2025-08-18">18 August 2025</time></div></td><td data-kit-column="amount" data-label="Annual value"><div data-kit-region="fact" data-kit-role="amount">£7,300.00</div></td></tr>
</tbody>
</table>
</div>
</section>
<footer data-kit-region="count-continuation">
<p>Accounts <span data-kit-role="amount">11</span>–<span data-kit-role="amount">20</span> of <span data-kit-role="amount">24</span></p>
<nav data-kit-role="pager" aria-label="Account pages"><span data-kit-region="desk-window"><a href="?view=all&page=1" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span data-kit-state="current" aria-current="page" aria-label="Page 2">2</span><a href="?view=all&page=3" aria-label="Page 3, last page">3</a><a href="?view=all&page=3" rel="next">Next</a></span><span data-kit-region="phone-window"><a href="?view=all&page=1" rel="prev">Previous</a><a href="?view=all&page=1" aria-label="Page 1, first page">1</a><span data-kit-state="current" aria-current="page" aria-label="Page 2">2</span><a href="?view=all&page=3" aria-label="Page 3, last page">3</a><a href="?view=all&page=3" rel="next">Next</a></span></nav>
</footer>
</div>
</main>
</div>
List, unsavedOpen the whole page Source<div data-kit-layout="shell" data-kit-density="desk">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Register</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-unsaved">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="saved-views-filters-sort" data-kit-holds="action-group" aria-label="Register actions">
<div data-kit-role="action-group"><button data-kit-role="primary-action" form="list-unsaved-register" type="submit"><span data-kit-region="label">Save register</span></button><p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p></div>
</section>
<form id="list-unsaved-register" data-kit-keep="tom-okafor/register/brookfield-choir-tuesday" data-kit-keep-version="3" hidden></form>
<section data-kit-region="rows" aria-label="Brookfield Choir, Tuesday">
<div data-kit-region="notices" aria-live="polite"></div>
<article data-kit-role="row" id="list-unsaved-aisha-khan">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-unsaved-aisha-khan-name">Aisha Khan</span></div></div>
<div data-kit-role="form-group" id="list-unsaved-aisha-khan-attendance-group">
<label for="list-unsaved-aisha-khan-attendance">Attendance</label>
<div data-kit-region="select"><select id="list-unsaved-aisha-khan-attendance" name="attendance[aisha-khan]" form="list-unsaved-register"><option value="">Not marked</option><option value="present" selected>Present</option><option value="absent">Absent</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div></div>
</article>
<article data-kit-role="row" id="list-unsaved-priya-shah">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-unsaved-priya-shah-name">Priya Shah</span></div></div>
<div data-kit-role="form-group" id="list-unsaved-priya-shah-attendance-group">
<label for="list-unsaved-priya-shah-attendance">Attendance</label>
<div data-kit-region="select"><select id="list-unsaved-priya-shah-attendance" name="attendance[priya-shah]" form="list-unsaved-register"><option value="">Not marked</option><option value="present">Present</option><option value="absent" selected>Absent</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div></div>
</article>
<article data-kit-role="row" id="list-unsaved-ana-ruiz">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-unsaved-ana-ruiz-name">Ana Ruiz</span></div></div>
<div data-kit-role="form-group" id="list-unsaved-ana-ruiz-attendance-group">
<label for="list-unsaved-ana-ruiz-attendance">Attendance</label>
<div data-kit-region="select"><select id="list-unsaved-ana-ruiz-attendance" name="attendance[ana-ruiz]" form="list-unsaved-register"><option value="" selected>Not marked</option><option value="present">Present</option><option value="absent">Absent</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div></div>
</article>
<article data-kit-role="row" id="list-unsaved-lena-fischer">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-unsaved-lena-fischer-name">Lena Fischer</span></div></div>
<div data-kit-role="form-group" id="list-unsaved-lena-fischer-attendance-group">
<label for="list-unsaved-lena-fischer-attendance">Attendance</label>
<div data-kit-region="select"><select id="list-unsaved-lena-fischer-attendance" name="attendance[lena-fischer]" form="list-unsaved-register"><option value="" selected>Not marked</option><option value="present">Present</option><option value="absent">Absent</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div></div>
</article>
</section>
</div>
</main>
</div>
List, inertOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">Monday, 14 April 2025</time></span><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-inert">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Invoice views and controls" data-kit-holds="range action-group" data-kit-region="saved-views-filters-sort"><div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong><button aria-describedby="list-inert-today-words" data-kit-region="today" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-today" type="button">
<span data-kit-region="label">Today</span>
</button><p data-kit-region="words" id="list-inert-today-words">Today is outside this term.</p><button aria-label="Previous day" data-kit-region="previous" data-kit-role="icon-action" data-kit-state="inert" disabled rel="prev" type="button">
<svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>
</button><button aria-label="Next day" data-kit-region="next" data-kit-role="icon-action" data-kit-state="inert" disabled rel="next" type="button">
<svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
</button><form><div data-kit-region="date"><div data-kit-role="form-group" id="list-inert-date">
<label for="list-inert-date-control" id="list-inert-date-label">Go to a day</label>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}" data-kit-role="date-field" id="list-inert-date-control-date-field">
<input id="list-inert-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="list-inert-date-control-resolved" aria-expanded="false" aria-controls="list-inert-date-control-month">
<span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
<span id="list-inert-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-inert-date-control-calendar" type="button" aria-describedby="list-inert-date-control">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="date" value="2025-04-14">
<div id="list-inert-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
</div></div></form></div>
<button data-kit-role="secondary-action" popovertarget="list-inert-filters" type="button">
<span data-kit-region="label">Filters</span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-inert-filters" popover="auto">
<div data-kit-region="filter">
<button aria-describedby="list-inert-room-opener-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-room-opener" popovertarget="list-inert-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall</span></span>
</button><div data-kit-role="popover" id="list-inert-room-filter" popover="auto">
<div data-kit-holds="help" data-kit-role="form-group" id="list-inert-room-form-group">
<label for="list-inert-room">Room</label>
<div data-kit-region="select"><select id="list-inert-room" name="room" disabled aria-describedby="list-inert-room-form-group-help"><option value="">Any room</option><option value="main-hall" selected>Main Hall</option><option value="small-hall">Small Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<span data-kit-region="help" id="list-inert-room-form-group-help">Room choices wait until the invoices load.</span>
</div>
</div><a href="?view=awaiting&page=1" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action">
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<p data-kit-region="words" id="list-inert-room-opener-words">Room choices wait until the invoices load.</p>
<a href="?view=awaiting&page=1" data-kit-region="clear-filters">Clear filters</a><button aria-describedby="list-inert-save-view-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-save-view" type="button">
<span data-kit-region="label">Save view</span>
</button><p data-kit-region="words" id="list-inert-save-view-words">Change a filter to save this view.</p></div>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-inert-export-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-export" type="button">
<span data-kit-region="label">Export</span>
</button><p data-kit-region="words" id="list-inert-export-words">Export is ready once the invoices load.</p><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Send payment reminders</span></button><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Mark invoices paid</span></button><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Download payment details</span></button><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Print invoice statements</span></button><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Send invoice statements</span></button><button data-kit-role="secondary-action" type="button"><span data-kit-region="label">Copy invoice references</span></button><button aria-describedby="list-inert-discard-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-discard" type="button"><span data-kit-region="label">Discard changes</span></button><p data-kit-region="words" id="list-inert-discard-words">Changes can be discarded once the invoices load. Your entries stay here while you wait.</p><p aria-live="polite" data-kit-role="status-line" role="status">All invoices in this view will be included. Filter by Room or Status to choose a smaller set.</p>
</div>
</section>
<section aria-label="Columns and selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions">
<div data-kit-region="columns"><button aria-describedby="list-inert-columns-control-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-columns-control" popovertarget="list-inert-columns" type="button">
<span data-kit-region="label">Columns</span>
</button><p data-kit-region="words" id="list-inert-columns-control-words">Columns wait until the invoices load.</p><div data-kit-role="popover" id="list-inert-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-inert-columns-order">
<article data-kit-role="row" id="list-inert-columns-invoice">
<label data-kit-region="selection"><input aria-describedby="list-inert-columns-invoice-reason" aria-labelledby="list-inert-columns-invoice-subject" checked data-kit-role="selection-control" disabled type="checkbox">
</label>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-inert-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="list-inert-columns-invoice-reason">Names each invoice</span></span></div></div>
</div>
</div>
</article>
<article data-kit-role="row" id="list-inert-columns-amount-due">
<button type="button" tabindex="-1" data-kit-region="handle" id="list-inert-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-inert-columns-amount-due-handle list-inert-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button>
<label data-kit-region="selection"><input aria-labelledby="list-inert-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due">
</label>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-inert-columns-amount-due-subject">Amount due</span></div></div>
</div>
<div data-kit-region="actions">
<button aria-labelledby="list-inert-columns-amount-due-move list-inert-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-inert-columns-amount-due-move" type="button">
<span data-kit-region="label">Move</span>
</button></div></div>
</article>
<div data-kit-region="drop-line" hidden aria-hidden="true"></div>
<dialog aria-labelledby="list-inert-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-inert-columns-order-move">
<h2 data-kit-region="heading" id="list-inert-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2>
<div data-kit-region="form-groups">
<div data-kit-role="form-group" id="list-inert-columns-order-move-place">
<label for="list-inert-columns-order-move-place-control">Place it</label>
<div data-kit-region="select"><select id="list-inert-columns-order-move-place-control" name="place">
<option value="before">Before</option><option value="after">After</option>
</select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
<div data-kit-role="form-group" id="list-inert-columns-order-move-row">
<label for="list-inert-columns-order-move-row-control">Column</label>
<div data-kit-region="select"><select id="list-inert-columns-order-move-row-control" name="row"><option value="list-inert-columns-amount-due">Amount due</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button data-kit-role="primary-action" type="button">
<span data-kit-region="label">Move</span>
</button>
<button data-kit-modal-close data-kit-role="secondary-action" type="button">
<span data-kit-region="label">
Keep the order
</span>
</button>
</div>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
</div></div></div>
<p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-inert-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-remind" type="button">
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-inert-remind-words">Select invoices to send reminders.</p>
</div>
</section>
<section aria-label="Invoices" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings">
<tr><th data-kit-column="subject" scope="col">Invoice</th><th data-kit-column="amount" scope="col">Amount due</th></tr>
</thead>
<tbody>
<tr>
<th data-kit-column="subject" scope="row"><a href="../../record/">Oakmere Primary School</a></th>
<td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td>
</tr>
</tbody>
</table></div>
</section>
</div>
</main>
</div>
List, inert more-filtersOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span data-kit-region="range-in-words"><time datetime="2025-04-14">Monday, 14 April 2025</time></span><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../../layout-list/#layout-list-inert-more-filters">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Invoice views and controls" data-kit-holds="range form-group action-group" data-kit-region="saved-views-filters-sort"><div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-14">14 April 2025</time></strong><button aria-describedby="list-inert-today-words" data-kit-region="today" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-today" type="button">
<span data-kit-region="label">Today</span>
</button><p data-kit-region="words" id="list-inert-today-words">Today is outside this term.</p><button aria-label="Previous day" data-kit-region="previous" data-kit-role="icon-action" data-kit-state="inert" disabled rel="prev" type="button">
<svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"></path></svg>
</button><button aria-label="Next day" data-kit-region="next" data-kit-role="icon-action" data-kit-state="inert" disabled rel="next" type="button">
<svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path></svg>
</button><form><div data-kit-region="date"><div data-kit-role="form-group" id="list-inert-date">
<label for="list-inert-date-control" id="list-inert-date-label">Go to a day</label>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-14"}" data-kit-role="date-field" id="list-inert-date-control-date-field">
<input id="list-inert-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="list-inert-date-control-resolved" aria-expanded="false" aria-controls="list-inert-date-control-month">
<span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
<span id="list-inert-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-inert-date-control-calendar" type="button" aria-describedby="list-inert-date-control">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="date" value="2025-04-14">
<div id="list-inert-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
</div></div></form></div>
<div data-kit-role="form-group" id="list-inert-search"><label for="list-inert-search-control">Search invoices</label><div data-kit-region="control"><input enterkeyhint="search" id="list-inert-search-control" placeholder="Find invoices by hirer name" type="search"><button type="button" data-kit-role="icon-action" aria-label="Clear" id="list-inert-search-control-clear" data-kit-region="clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></button></div></div>
<button data-kit-role="secondary-action" popovertarget="list-inert-filters" type="button">
<span data-kit-region="label">Filters</span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-inert-filters" popover="auto">
<div data-kit-region="filter">
<button aria-describedby="list-inert-room-opener-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-room-opener" popovertarget="list-inert-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall</span></span>
</button><div data-kit-role="popover" id="list-inert-room-filter" popover="auto">
<div data-kit-holds="help" data-kit-role="form-group" id="list-inert-room-form-group">
<label for="list-inert-room">Room</label>
<div data-kit-region="select"><select id="list-inert-room" name="room" disabled aria-describedby="list-inert-room-form-group-help"><option value="">Any room</option><option value="main-hall" selected>Main Hall</option><option value="small-hall">Small Hall</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div><span data-kit-region="help" id="list-inert-room-form-group-help">More filter choices wait until the invoices load.</span>
</div>
</div><a href="?view=awaiting&page=1" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action">
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<p data-kit-region="words" id="list-inert-room-opener-words">Room choices wait until the invoices load.</p>
<div data-kit-region="filter"><button data-kit-role="secondary-action" popovertarget="list-inert-overdue-filter" type="button"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button><div data-kit-role="popover" id="list-inert-overdue-filter" popover="auto"><div data-kit-holds="help" data-kit-role="form-group" id="list-inert-overdue-form-group"><label for="list-inert-overdue">Overdue</label><div data-kit-region="select"><select id="list-inert-overdue" name="overdue" disabled aria-describedby="list-inert-overdue-form-group-help"><option value="">Any</option><option value="30" selected>Over 30 days</option><option value="60">Over 60 days</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div><span data-kit-region="help" id="list-inert-overdue-form-group-help">More filter choices wait until the invoices load.</span></div></div><a href="?view=awaiting&page=1" aria-label="Clear Overdue" data-kit-region="clear" data-kit-role="icon-action"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></a></div>
<div data-kit-region="filter"><button data-kit-role="secondary-action" popovertarget="list-inert-status-filter" type="button"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button><div data-kit-role="popover" id="list-inert-status-filter" popover="auto"><div data-kit-holds="help" data-kit-role="form-group" id="list-inert-status-form-group"><label for="list-inert-status">Status</label><div data-kit-region="select"><select id="list-inert-status" name="status" disabled aria-describedby="list-inert-status-form-group-help"><option value="" selected>Any status</option><option value="sent">Sent</option><option value="viewed">Viewed</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div><span data-kit-region="help" id="list-inert-status-form-group-help">More filter choices wait until the invoices load.</span></div></div></div>
<div data-kit-region="more" data-kit-fit="pending" id="list-inert-more-filters"><button aria-describedby="list-inert-more-opener-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-more-opener" popovertarget="list-inert-more-filters-popover" type="button"><span data-kit-region="label"><span data-kit-region="name">More filters</span></span></button><div data-kit-role="popover" id="list-inert-more-filters-popover" popover="auto"><ul>
<li><button data-kit-role="secondary-action" popovertarget="list-inert-room-filter" type="button"><span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value">Main Hall</span></span></button><a href="?view=awaiting&page=1" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></a></li>
<li><button data-kit-role="secondary-action" popovertarget="list-inert-overdue-filter" type="button"><span data-kit-region="label"><span data-kit-region="name">Overdue</span> <span data-kit-region="value">Over 30 days</span></span></button><a href="?view=awaiting&page=1" aria-label="Clear Overdue" data-kit-region="clear" data-kit-role="icon-action"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></a></li>
<li><button data-kit-role="secondary-action" popovertarget="list-inert-status-filter" type="button"><span data-kit-region="label"><span data-kit-region="name">Status</span></span></button></li>
</ul></div></div><p data-kit-region="words" id="list-inert-more-opener-words">More filter choices wait until the invoices load.</p>
<a href="?view=awaiting&page=1" data-kit-region="clear-filters">Clear filters</a><button aria-describedby="list-inert-save-view-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-save-view" type="button">
<span data-kit-region="label">Save view</span>
</button><p data-kit-region="words" id="list-inert-save-view-words">Change a filter to save this view.</p></div>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-inert-export-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-export" type="button">
<span data-kit-region="label">Export</span>
</button><p data-kit-region="words" id="list-inert-export-words">Export is ready once the invoices load.</p>
</div>
</section>
<section aria-label="Columns and selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions">
<div data-kit-region="columns"><button aria-describedby="list-inert-columns-control-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-columns-control" popovertarget="list-inert-columns" type="button">
<span data-kit-region="label">Columns</span>
</button><p data-kit-region="words" id="list-inert-columns-control-words">Columns wait until the invoices load.</p><div data-kit-role="popover" id="list-inert-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="list-inert-columns-order">
<article data-kit-role="row" id="list-inert-columns-invoice">
<label data-kit-region="selection"><input aria-describedby="list-inert-columns-invoice-reason" aria-labelledby="list-inert-columns-invoice-subject" checked data-kit-role="selection-control" disabled type="checkbox">
</label>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject"><span id="list-inert-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="list-inert-columns-invoice-reason">Names each invoice</span></span></div></div>
</div>
</div>
</article>
<article data-kit-role="row" id="list-inert-columns-amount-due">
<button type="button" tabindex="-1" data-kit-region="handle" id="list-inert-columns-amount-due-handle" aria-label="Move" aria-labelledby="list-inert-columns-amount-due-handle list-inert-columns-amount-due-subject"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></button>
<label data-kit-region="selection"><input aria-labelledby="list-inert-columns-amount-due-subject" checked data-kit-role="selection-control" name="columns" type="checkbox" value="amount-due">
</label>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject" id="list-inert-columns-amount-due-subject">Amount due</span></div></div>
</div>
<div data-kit-region="actions">
<button aria-labelledby="list-inert-columns-amount-due-move list-inert-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="list-inert-columns-amount-due-move" type="button">
<span data-kit-region="label">Move</span>
</button></div></div>
</article>
<div data-kit-region="drop-line" hidden aria-hidden="true"></div>
<dialog aria-labelledby="list-inert-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="list-inert-columns-order-move">
<h2 data-kit-region="heading" id="list-inert-columns-order-move-heading">Move <span data-kit-region="subject"></span></h2>
<div data-kit-region="form-groups">
<div data-kit-role="form-group" id="list-inert-columns-order-move-place">
<label for="list-inert-columns-order-move-place-control">Place it</label>
<div data-kit-region="select"><select id="list-inert-columns-order-move-place-control" name="place">
<option value="before">Before</option><option value="after">After</option>
</select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
<div data-kit-role="form-group" id="list-inert-columns-order-move-row">
<label for="list-inert-columns-order-move-row-control">Column</label>
<div data-kit-region="select"><select id="list-inert-columns-order-move-row-control" name="row"><option value="list-inert-columns-amount-due">Amount due</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button data-kit-role="primary-action" type="button">
<span data-kit-region="label">Move</span>
</button>
<button data-kit-modal-close data-kit-role="secondary-action" type="button">
<span data-kit-region="label">
Keep the order
</span>
</button>
</div>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
</div></div></div>
<p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-inert-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-inert-remind" type="button">
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-inert-remind-words">Select invoices to send reminders.</p>
</div>
</section>
<section aria-label="Invoices" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<caption>Invoices awaiting payment</caption>
<thead data-kit-region="column-headings">
<tr><th data-kit-column="subject" scope="col">Invoice</th><th data-kit-column="amount" scope="col">Amount due</th></tr>
</thead>
<tbody>
<tr>
<th data-kit-column="subject" scope="row"><a href="../../../record/">Oakmere Primary School</a></th>
<td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td>
</tr>
</tbody>
</table></div>
</section>
</div>
</main>
</div>
List, loadedOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"kind":"hires","locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-status-form-group">
<label for="list-loaded-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-loaded-sort-form-group"><label for="list-loaded-sort">Sort</label><div data-kit-region="select"><select id="list-loaded-sort" name="sort"><option value="-booked" selected>Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions"><p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-loaded-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-loaded-remind" type="button" form="list-loaded-selection" data-kit-waits-on='["hire"]'>
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-loaded-remind-words">Select hires to send reminders.</p>
</div>
</section>
<form hidden id="list-loaded-selection"></form>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire on this page</span></label></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="hirer" href=""><span data-kit-region="label">Hirer</span></a></th><th scope="col">Room</th><th scope="col">Status</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":1,"search":[],"sorts":{"booked":120,"hirer":"Oakmere Primary School"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-1"><span>Select Oakmere Primary School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["confirmed"]},"place":2,"search":[],"sorts":{"booked":97,"hirer":"Riverside Choir"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-2"><span>Select Riverside Choir</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":3,"search":[],"sorts":{"booked":45,"hirer":"Hollins Judo Club"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-3"><span>Select Hollins Judo Club</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["provisional"]},"place":4,"search":[],"sorts":{"booked":31,"hirer":"Thursday Art Group"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-4"><span>Select Thursday Art Group</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["provisional"]},"place":5,"search":[],"sorts":{"booked":18,"hirer":"Oakmere Scouts"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-5"><span>Select Oakmere Scouts</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":6,"search":[],"sorts":{"booked":9,"hirer":"Fernley Dance School"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-6"><span>Select Fernley Dance School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["confirmed"]},"place":7,"search":[],"sorts":{"booked":4,"hirer":"Allotment Society"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-selection" name="hire" type="checkbox" value="hire-7"><span>Select Allotment Society</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><form data-kit-region="rows-per-page"><div data-kit-role="form-group" id="list-loaded-rows-per-page"><label for="list-loaded-rows-per-page-control">Rows per page</label><div data-kit-region="select"><select id="list-loaded-rows-per-page-control" name="rows_per_page"><option selected value="2">2</option><option value="5">5</option><option value="10">10</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></form><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav><form data-kit-region="go-to-page"><div data-kit-role="form-group" id="list-loaded-go-to-page"><label for="list-loaded-go-to-page-control" id="list-loaded-go-to-page-label">Go to page</label><div data-kit-number='{"fraction":false,"locale":"en-GB","max":4,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-loaded-go-to-page-control-number-field"><input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-loaded-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value=""><input type="hidden" name="page" value=""></div></div></form>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-at-a-viewOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-at-a-view">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-fit="pending" data-kit-layout="list" data-kit-loaded="{"kind":"hires","locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-at-a-view-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-at-a-view-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-at-a-view-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-at-a-view-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-at-a-view-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-at-a-view-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-at-a-view-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-at-a-view-status-form-group">
<label for="list-loaded-at-a-view-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-at-a-view-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions"><p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-loaded-at-a-view-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-loaded-at-a-view-remind" type="button" form="list-loaded-at-a-view-selection" data-kit-waits-on='["hire"]'>
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-loaded-at-a-view-remind-words">Select hires to send reminders.</p>
</div>
</section>
<form hidden id="list-loaded-at-a-view-selection"></form>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire on this page</span></label></th><th scope="col" data-kit-column="subject">Hirer</th><th scope="col">Room</th><th scope="col">Status</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":1,"search":[],"sorts":{}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-1"><span>Select Oakmere Primary School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["confirmed"]},"place":2,"search":[],"sorts":{}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-2"><span>Select Riverside Choir</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":3,"search":[],"sorts":{}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-3"><span>Select Hollins Judo Club</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["provisional"]},"place":4,"search":[],"sorts":{}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-4"><span>Select Thursday Art Group</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["provisional"]},"place":5,"search":[],"sorts":{}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-5"><span>Select Oakmere Scouts</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":6,"search":[],"sorts":{}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-6"><span>Select Fernley Dance School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["confirmed"]},"place":7,"search":[],"sorts":{}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-at-a-view-selection" name="hire" type="checkbox" value="hire-7"><span>Select Allotment Society</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><form data-kit-region="rows-per-page"><div data-kit-role="form-group" id="list-loaded-at-a-view-rows-per-page"><label for="list-loaded-at-a-view-rows-per-page-control">Rows per page</label><div data-kit-region="select"><select id="list-loaded-at-a-view-rows-per-page-control" name="rows_per_page"><option selected value="2">2</option><option value="5">5</option><option value="10">10</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></form><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?room=main-hall&page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?room=main-hall&page=4" aria-label="Page 4, last page">4</a><a href="?room=main-hall&page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?room=main-hall&page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?room=main-hall&page=4" aria-label="Page 4, last page">4</a><a href="?room=main-hall&page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav><form data-kit-region="go-to-page"><div data-kit-role="form-group" id="list-loaded-at-a-view-go-to-page"><label for="list-loaded-at-a-view-go-to-page-control" id="list-loaded-at-a-view-go-to-page-label">Go to page</label><div data-kit-number='{"fraction":false,"locale":"en-GB","max":4,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-loaded-at-a-view-go-to-page-control-number-field"><input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-loaded-at-a-view-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value=""><input type="hidden" name="page" value=""></div></div></form>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-recordsOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-records">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"kind":"hires","locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-records-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-records-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-records-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-records-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-records-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-records-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-records-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-records-status-form-group">
<label for="list-loaded-records-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-records-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-loaded-records-sort-form-group"><label for="list-loaded-records-sort">Sort</label><div data-kit-region="select"><select id="list-loaded-records-sort" name="sort"><option value="-booked" selected>Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option><option value="room">Room, A to Z</option><option value="-room">Room, Z to A</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions"><p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-loaded-records-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-loaded-records-remind" type="button" form="list-loaded-records-selection" data-kit-waits-on='["hire"]'>
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-loaded-records-remind-words">Select hires to send reminders.</p>
</div>
</section>
<form hidden id="list-loaded-records-selection"></form>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire on this page</span></label></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="hirer" href=""><span data-kit-region="label">Hirer</span></a></th><th scope="col"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="room" href=""><span data-kit-region="label">Room</span></a></th><th scope="col">Status</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":1,"search":[],"sorts":{"booked":120,"hirer":"Oakmere Primary School","room":"Main Hall"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-1"><span>Select Oakmere Primary School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["confirmed"]},"place":2,"search":[],"sorts":{"booked":97,"hirer":"Riverside Choir","room":"Small Hall"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-2"><span>Select Riverside Choir</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":3,"search":[],"sorts":{"booked":45,"hirer":"Hollins Judo Club","room":"Main Hall"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-3"><span>Select Hollins Judo Club</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["provisional"]},"place":4,"search":[],"sorts":{"booked":31,"hirer":"Thursday Art Group","room":"Garden Room"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-4"><span>Select Thursday Art Group</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["provisional"]},"place":5,"search":[],"sorts":{"booked":18,"hirer":"Oakmere Scouts","room":"Small Hall"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-5"><span>Select Oakmere Scouts</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":6,"search":[],"sorts":{"booked":9,"hirer":"Fernley Dance School","room":"Main Hall"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-6"><span>Select Fernley Dance School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["confirmed"]},"place":7,"search":[],"sorts":{"booked":4,"hirer":"Allotment Society","room":"Garden Room"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-records-selection" name="hire" type="checkbox" value="hire-7"><span>Select Allotment Society</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><form data-kit-region="rows-per-page"><div data-kit-role="form-group" id="list-loaded-records-rows-per-page"><label for="list-loaded-records-rows-per-page-control">Rows per page</label><div data-kit-region="select"><select id="list-loaded-records-rows-per-page-control" name="rows_per_page"><option selected value="2">2</option><option value="5">5</option><option value="10">10</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></form><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav><form data-kit-region="go-to-page"><div data-kit-role="form-group" id="list-loaded-records-go-to-page"><label for="list-loaded-records-go-to-page-control" id="list-loaded-records-go-to-page-label">Go to page</label><div data-kit-number='{"fraction":false,"locale":"en-GB","max":4,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-loaded-records-go-to-page-control-number-field"><input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-loaded-records-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value=""><input type="hidden" name="page" value=""></div></div></form>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-cardsOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-cards">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-cards-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-cards-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-cards-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-cards-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-cards-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-cards-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-cards-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-cards-status-form-group">
<label for="list-loaded-cards-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-cards-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-loaded-cards-sort-form-group"><label for="list-loaded-cards-sort">Sort</label><div data-kit-region="select"><select id="list-loaded-cards-sort" name="sort"><option value="-booked" selected>Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Hires" data-kit-region="cards"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":1,"search":[],"sorts":{"booked":120,"hirer":"Oakmere Primary School"}}">
<h3 data-kit-region="subject"><a href="../../record/">Oakmere Primary School</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["small-hall"],"status":["confirmed"]},"place":2,"search":[],"sorts":{"booked":97,"hirer":"Riverside Choir"}}">
<h3 data-kit-region="subject"><a href="../../record/">Riverside Choir</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Small Hall</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":3,"search":[],"sorts":{"booked":45,"hirer":"Hollins Judo Club"}}" hidden>
<h3 data-kit-region="subject"><a href="../../record/">Hollins Judo Club</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["garden-room"],"status":["provisional"]},"place":4,"search":[],"sorts":{"booked":31,"hirer":"Thursday Art Group"}}" hidden>
<h3 data-kit-region="subject"><a href="../../record/">Thursday Art Group</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="neutral">Provisional</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Garden Room</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["small-hall"],"status":["provisional"]},"place":5,"search":[],"sorts":{"booked":18,"hirer":"Oakmere Scouts"}}" hidden>
<h3 data-kit-region="subject"><a href="../../record/">Oakmere Scouts</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="neutral">Provisional</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Small Hall</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":6,"search":[],"sorts":{"booked":9,"hirer":"Fernley Dance School"}}" hidden>
<h3 data-kit-region="subject"><a href="../../record/">Fernley Dance School</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></div>
</article>
<article data-kit-role="card" data-kit-fields="{"filters":{"room":["garden-room"],"status":["confirmed"]},"place":7,"search":[],"sorts":{"booked":4,"hirer":"Allotment Society"}}" hidden>
<h3 data-kit-region="subject"><a href="../../record/">Allotment Society</a></h3>
<div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Confirmed</span></div>
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Garden Room</dd></dl></div>
</article>
</div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><form data-kit-region="rows-per-page"><div data-kit-role="form-group" id="list-loaded-cards-rows-per-page"><label for="list-loaded-cards-rows-per-page-control">Rows per page</label><div data-kit-region="select"><select id="list-loaded-cards-rows-per-page-control" name="rows_per_page"><option selected value="2">2</option><option value="5">5</option><option value="10">10</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></form><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav><form data-kit-region="go-to-page"><div data-kit-role="form-group" id="list-loaded-cards-go-to-page"><label for="list-loaded-cards-go-to-page-control" id="list-loaded-cards-go-to-page-label">Go to page</label><div data-kit-number='{"fraction":false,"locale":"en-GB","max":4,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-loaded-cards-go-to-page-control-number-field"><input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-loaded-cards-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value=""><input type="hidden" name="page" value=""></div></div></form>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-groupedOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-grouped">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"kind":"hires","locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-grouped-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-grouped-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-grouped-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-grouped-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-grouped-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-grouped-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-grouped-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-grouped-status-form-group">
<label for="list-loaded-grouped-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-grouped-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option><option value="cancelled">Cancelled</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-role="form-group" data-kit-region="sort" data-kit-sort="columnless-order" id="list-loaded-grouped-sort-form-group"><label for="list-loaded-grouped-sort">Sort</label><div data-kit-region="select"><select id="list-loaded-grouped-sort" name="sort"><option value="-booked" selected>Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Selection actions" data-kit-holds="action-group" data-kit-region="columns-selection-actions"><p aria-live="polite" data-kit-role="status-line" role="status"></p>
<div data-kit-holds="words" data-kit-role="action-group">
<button aria-describedby="list-loaded-grouped-remind-words" data-kit-role="secondary-action" data-kit-state="inert" disabled id="list-loaded-grouped-remind" type="button" form="list-loaded-grouped-selection" data-kit-waits-on='["hire"]'>
<span data-kit-region="label">Send reminders</span>
</button><p data-kit-region="words" id="list-loaded-grouped-remind-words">Select hires to send reminders.</p>
</div>
</section>
<form hidden id="list-loaded-grouped-selection"></form>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire on this page</span></label></th><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="hirer" href=""><span data-kit-region="label">Hirer</span></a></th><th scope="col">Room</th><th scope="col">Status</th></tr></thead>
<tbody data-kit-region="group" id="list-loaded-grouped-group-main-hall">
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire in Main Hall</span></label></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value">Main Hall</span><span data-kit-region="count">3</span></summary></details></div></th></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":1,"search":[],"sorts":{"booked":120,"hirer":"Oakmere Primary School"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-1"><span>Select Oakmere Primary School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":2,"search":[],"sorts":{"booked":45,"hirer":"Hollins Judo Club"}}"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-2"><span>Select Hollins Judo Club</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["main-hall"],"status":["confirmed"]},"place":3,"search":[],"sorts":{"booked":9,"hirer":"Fernley Dance School"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-3"><span>Select Fernley Dance School</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody>
<tbody data-kit-region="group" id="list-loaded-grouped-group-small-hall" hidden>
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire in Small Hall</span></label></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value">Small Hall</span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["confirmed"]},"place":4,"search":[],"sorts":{"booked":97,"hirer":"Riverside Choir"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-4"><span>Select Riverside Choir</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["small-hall"],"status":["provisional"]},"place":5,"search":[],"sorts":{"booked":18,"hirer":"Oakmere Scouts"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-5"><span>Select Oakmere Scouts</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
</tbody>
<tbody data-kit-region="group" id="list-loaded-grouped-group-garden-room" hidden>
<tr data-kit-region="group-heading"><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox"><span>Select every hire in Garden Room</span></label></td><th scope="rowgroup" colspan="3"><div data-kit-region="line"><details open><summary><span data-kit-region="value">Garden Room</span><span data-kit-region="count">2</span></summary></details></div></th></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["provisional"]},"place":6,"search":[],"sorts":{"booked":31,"hirer":"Thursday Art Group"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-6"><span>Select Thursday Art Group</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"room":["garden-room"],"status":["confirmed"]},"place":7,"search":[],"sorts":{"booked":4,"hirer":"Allotment Society"}}" hidden><td data-kit-column="selection"><label data-kit-region="selection"><input data-kit-role="selection-control" form="list-loaded-grouped-selection" name="hire" type="checkbox" value="hire-7"><span>Select Allotment Society</span></label></td><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody>
</table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><form data-kit-region="rows-per-page"><div data-kit-role="form-group" id="list-loaded-grouped-rows-per-page"><label for="list-loaded-grouped-rows-per-page-control">Rows per page</label><div data-kit-region="select"><select id="list-loaded-grouped-rows-per-page-control" name="rows_per_page"><option selected value="2">2</option><option value="5">5</option><option value="10">10</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div></div></form><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2">2</a><a href="" hidden></a><span>…</span><a href="?page=4" aria-label="Page 4, last page">4</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav><form data-kit-region="go-to-page"><div data-kit-role="form-group" id="list-loaded-grouped-go-to-page"><label for="list-loaded-grouped-go-to-page-control" id="list-loaded-grouped-go-to-page-label">Go to page</label><div data-kit-number='{"fraction":false,"locale":"en-GB","max":4,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="list-loaded-grouped-go-to-page-control-number-field"><input autocomplete="off" autocorrect="off" enterkeyhint="go" id="list-loaded-grouped-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value=""><input type="hidden" name="page" value=""></div></div></form>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-more-filtersOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-more-filters">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":5}" style="inline-size: min(100%, var(--kit-desk-width));">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="room" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-room-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-more-filters-room">
<legend>Room</legend>
<input type="hidden" name="room" value="">
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="main-hall">
Main Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="small-hall">
Small Hall
</label>
<label>
<input data-kit-role="selection-control" name="room" type="checkbox" value="garden-room">
Garden Room
</label>
</fieldset>
</div><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-filters" type="button">
<span data-kit-region="label"><span data-kit-region="name">Filters</span> <span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">5 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">6</span><span data-kit-region="spoken">6 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">7</span><span data-kit-region="spoken">7 filters</span></span></span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-more-filters-filters" popover="auto"><div data-kit-field="status" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-status-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-more-filters-status-form-group">
<label for="list-loaded-more-filters-status">Status</label>
<div data-kit-region="select"><select id="list-loaded-more-filters-status" name="status"><option value="">Any status</option><option value="confirmed">Confirmed</option><option value="provisional">Provisional</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-field="deposit" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-deposit-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Deposit</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-deposit-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-more-filters-deposit-form-group">
<label for="list-loaded-more-filters-deposit">Deposit</label>
<div data-kit-region="select"><select id="list-loaded-more-filters-deposit" name="deposit"><option value="">Any deposit</option><option value="paid">Paid</option><option value="due">Due</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Deposit" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-field="setup" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-setup-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room setup</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-setup-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-more-filters-setup">
<legend>Room setup</legend>
<input type="hidden" name="setup" value="">
<label>
<input data-kit-role="selection-control" name="setup" type="checkbox" value="rows">
Rows of chairs
</label>
<label>
<input data-kit-role="selection-control" name="setup" type="checkbox" value="tables">
Tables
</label>
<label>
<input data-kit-role="selection-control" name="setup" type="checkbox" value="open">
Open floor
</label>
</fieldset>
</div><a href="" aria-label="Clear Room setup" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-field="hirer" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-hirer-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Hirer type</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-hirer-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-more-filters-hirer">
<legend>Hirer type</legend>
<input type="hidden" name="hirer" value="">
<label>
<input data-kit-role="selection-control" name="hirer" type="checkbox" value="school">
School
</label>
<label>
<input data-kit-role="selection-control" name="hirer" type="checkbox" value="club">
Club
</label>
<label>
<input data-kit-role="selection-control" name="hirer" type="checkbox" value="society">
Society
</label>
</fieldset>
</div><a href="" aria-label="Clear Hirer type" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-field="payment" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-payment-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Payment</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-payment-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-more-filters-payment-form-group">
<label for="list-loaded-more-filters-payment">Payment</label>
<div data-kit-region="select"><select id="list-loaded-more-filters-payment" name="payment"><option value="">Any payment</option><option value="card">Card</option><option value="transfer">Bank transfer</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Payment" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-field="catering" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-catering-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Catering</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-catering-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-more-filters-catering-form-group">
<label for="list-loaded-more-filters-catering">Catering</label>
<div data-kit-region="select"><select id="list-loaded-more-filters-catering" name="catering"><option value="">Any catering</option><option value="kitchen">Kitchen hired</option><option value="none">No kitchen</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
</div><a href="" aria-label="Clear Catering" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<div data-kit-fit="pending" data-kit-region="more" id="list-loaded-more-filters-more" hidden>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-more-popover" type="button">
<span data-kit-region="label"><span data-kit-region="name">More filters</span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">1</span><span data-kit-region="spoken">1 filter</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">2</span><span data-kit-region="spoken">2 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">5</span><span data-kit-region="spoken">5 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">6</span><span data-kit-region="spoken">6 filters</span></span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">7</span><span data-kit-region="spoken">7 filters</span></span></span>
</button><div data-kit-role="popover" id="list-loaded-more-filters-more-popover" popover="auto"><ul><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-room-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Room" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-status-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Status</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Status" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-deposit-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Deposit</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Deposit" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-setup-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Room setup</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Room setup" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-hirer-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Hirer type</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Hirer type" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-payment-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Payment</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Payment" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li><li>
<button data-kit-role="secondary-action" popovertarget="list-loaded-more-filters-catering-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Catering</span> <span data-kit-region="value"></span></span>
</button><a href="" aria-label="Clear Catering" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</li></ul></div></div>
<div data-kit-region="sort" data-kit-role="form-group" data-kit-sort="columnless-order" id="list-loaded-more-filters-sort-form-group">
<label for="list-loaded-more-filters-sort">Sort</label>
<div data-kit-region="select"><select id="list-loaded-more-filters-sort" name="sort">
<option selected value="-booked">Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option>
</select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="hirer" href=""><span data-kit-region="label">Hirer</span></a></th><th scope="col">Room</th><th scope="col">Status</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"catering":["kitchen"],"deposit":["paid"],"hirer":["school"],"payment":["transfer"],"room":["main-hall"],"setup":["rows"],"status":["confirmed"]},"place":1,"search":[],"sorts":{"booked":120,"hirer":"Oakmere Primary School"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["none"],"deposit":["paid"],"hirer":["society"],"payment":["card"],"room":["small-hall"],"setup":["rows"],"status":["confirmed"]},"place":2,"search":[],"sorts":{"booked":97,"hirer":"Riverside Choir"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["none"],"deposit":["due"],"hirer":["club"],"payment":["card"],"room":["main-hall"],"setup":["open"],"status":["confirmed"]},"place":3,"search":[],"sorts":{"booked":45,"hirer":"Hollins Judo Club"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["kitchen"],"deposit":["due"],"hirer":["society"],"payment":["transfer"],"room":["garden-room"],"setup":["tables"],"status":["provisional"]},"place":4,"search":[],"sorts":{"booked":31,"hirer":"Thursday Art Group"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["none"],"deposit":["paid"],"hirer":["club"],"payment":["card"],"room":["small-hall"],"setup":["open"],"status":["provisional"]},"place":5,"search":[],"sorts":{"booked":18,"hirer":"Oakmere Scouts"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Status"><div data-kit-region="fact">Provisional</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["kitchen"],"deposit":["due"],"hirer":["school"],"payment":["transfer"],"room":["main-hall"],"setup":["open"],"status":["confirmed"]},"place":6,"search":[],"sorts":{"booked":9,"hirer":"Fernley Dance School"}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
<tr data-kit-fields="{"filters":{"catering":["kitchen"],"deposit":["paid"],"hirer":["society"],"payment":["card"],"room":["garden-room"],"setup":["tables"],"status":["confirmed"]},"place":7,"search":[],"sorts":{"booked":4,"hirer":"Allotment Society"}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Status"><div data-kit-region="fact">Confirmed</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">5</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-date-rangeOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-date-range">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":5}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="date" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-date-range-date-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Hire date</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-date-range-date-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-date-range-date">
<fieldset>
<legend id="list-loaded-date-range-date-label">Hire date</legend>
<div data-kit-dates="{"direction":"either","firstDay":"mon","locale":"en-GB","openEnd":true,"openEnds":"either","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2026-09-15"}" data-kit-role="date-range" id="list-loaded-date-range-date-control-date-range">
<span data-kit-region="end"><label for="list-loaded-date-range-date-control">From</label><label for="list-loaded-date-range-date-control" hidden>Dates</label><input id="list-loaded-date-range-date-control" data-kit-region="first" type="text" autocomplete="off" value="" aria-describedby="list-loaded-date-range-date-control-resolved" aria-expanded="false" aria-controls="list-loaded-date-range-date-control-layer"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span data-kit-region="end"><label for="list-loaded-date-range-date-control-last">Until</label><input id="list-loaded-date-range-date-control-last" data-kit-region="last" type="text" autocomplete="off" value="" aria-describedby="list-loaded-date-range-date-control-resolved"><span data-kit-region="widest-dates" aria-hidden="true">28 January 2026
28 February 2026
28 March 2026
28 April 2026
28 May 2026
28 June 2026
28 July 2026
28 August 2026
28 September 2026
28 October 2026
28 November 2026
28 December 2026</span></span>
<span id="list-loaded-date-range-date-control-preset-dates" data-kit-region="preset-dates" hidden></span>
<span id="list-loaded-date-range-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button aria-label="Calendar" data-kit-region="calendar" data-kit-role="icon-action" id="list-loaded-date-range-date-control-calendar" type="button">
<svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"></path></svg>
</button>
<input type="hidden" name="date[first]" value="">
<input type="hidden" name="date[last]" value="">
<input type="hidden" name="date[preset]">
<div data-kit-role="popover" id="list-loaded-date-range-date-control-layer" popover="manual" data-kit-region="presets-and-months">
<div id="list-loaded-date-range-date-control-months" data-kit-region="months"></div>
</div>
</div>
</fieldset>
</div>
</div><a href="" aria-label="Clear Hire date" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></form></section>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hirer</th><th scope="col">Room</th><th scope="col">Hire date</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"date":["2026-09-19"]},"place":1,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-09-19">19 September 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-09-24"]},"place":2,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-09-24">24 September 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-10-02"]},"place":3,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-10-02">2 October 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-10-08"]},"place":4,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-10-08">8 October 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-10-17"]},"place":5,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-10-17">17 October 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-10-23"]},"place":6,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-10-23">23 October 2026</time></div></td></tr>
<tr data-kit-fields="{"filters":{"date":["2026-11-06"]},"place":7,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-label="Hire date"><div data-kit-region="fact"><time datetime="2026-11-06">6 November 2026</time></div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">5</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-record-pickerOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-record-picker">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":5}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Event filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="hirer" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-record-picker-hirer-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Hirer</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-record-picker-hirer-filter" popover="auto">
<div data-kit-role="form-group" id="list-loaded-record-picker-hirer">
<label for="list-loaded-record-picker-hirer-control" id="list-loaded-record-picker-hirer-label">Hirer</label>
<div data-kit-query-event="search_hirers" data-kit-role="record-picker" data-kit-width="medium" id="list-loaded-record-picker-hirer-control-record-picker">
<div data-kit-region="control">
<input aria-autocomplete="list" aria-controls="list-loaded-record-picker-hirer-control-matches" aria-expanded="false" autocapitalize="none" autocomplete="off" autocorrect="off" id="list-loaded-record-picker-hirer-control" role="combobox" spellcheck="false" type="text">
<input type="hidden" name="hirer">
<ul id="list-loaded-record-picker-hirer-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="list-loaded-record-picker-hirer-label">
<li id="list-loaded-record-picker-hirer-control-match-h-104" role="option" data-value="h-104"><span data-kit-region="match-name">Oakmere Primary School</span><span data-kit-region="match-fact">Education</span></li><li id="list-loaded-record-picker-hirer-control-match-h-211" role="option" data-value="h-211"><span data-kit-region="match-name">Riverside Choir</span><span data-kit-region="match-fact">Music</span></li><li id="list-loaded-record-picker-hirer-control-match-h-318" role="option" data-value="h-318"><span data-kit-region="match-name">Hollins Judo Club</span><span data-kit-region="match-fact">Sport</span></li><li id="list-loaded-record-picker-hirer-control-match-h-052" role="option" data-value="h-052"><span data-kit-region="match-name">Allotment Society</span><span data-kit-region="match-fact">Gardening</span></li>
</ul>
</div>
</div>
</div>
</div><a href="" aria-label="Clear Hirer" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></form></section>
<section aria-label="Events" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No events match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Event</th><th scope="col">Hirer</th><th scope="col">Room</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"hirer":["h-104"]},"names":{"hirer":{"h-104":"Oakmere Primary School"}},"place":1,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Summer fair</a></th><td data-label="Hirer"><div data-kit-region="fact">Oakmere Primary School</div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-211"]},"names":{"hirer":{"h-211":"Riverside Choir"}},"place":2,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Choir rehearsal</a></th><td data-label="Hirer"><div data-kit-region="fact">Riverside Choir</div></td><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-318"]},"names":{"hirer":{"h-318":"Hollins Judo Club"}},"place":3,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Judo grading</a></th><td data-label="Hirer"><div data-kit-region="fact">Hollins Judo Club</div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-211"]},"names":{"hirer":{"h-211":"Riverside Choir"}},"place":4,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Autumn concert</a></th><td data-label="Hirer"><div data-kit-region="fact">Riverside Choir</div></td><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-104"]},"names":{"hirer":{"h-104":"Oakmere Primary School"}},"place":5,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Parents' evening</a></th><td data-label="Hirer"><div data-kit-region="fact">Oakmere Primary School</div></td><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-318"]},"names":{"hirer":{"h-318":"Hollins Judo Club"}},"place":6,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Junior judo</a></th><td data-label="Hirer"><div data-kit-region="fact">Hollins Judo Club</div></td><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td></tr>
<tr data-kit-fields="{"filters":{"hirer":["h-052"]},"names":{"hirer":{"h-052":"Allotment Society"}},"place":7,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Plant sale</a></th><td data-label="Hirer"><div data-kit-region="fact">Allotment Society</div></td><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Events <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">5</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Event <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><nav aria-label="Event pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-sliderOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-slider">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":5}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire filters" data-kit-region="saved-views-filters-sort">
<form><div data-kit-field="fee" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-slider-fee-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Fee</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-slider-fee-filter" popover="auto">
<div data-kit-holds="help" data-kit-role="form-group" id="list-loaded-slider-fee">
<fieldset>
<legend id="list-loaded-slider-fee-label">Fee</legend>
<div data-kit-role="slider" data-kit-slider="{"currency":"GBP","firstDay":"mon","fraction":false,"locale":"en-GB","max":400,"min":0,"step":20}" id="list-loaded-slider-fee-control">
<div data-kit-region="track" id="list-loaded-slider-fee-control-track">
<div data-kit-region="range" style="--kit-slider-from: 0; --kit-slider-to: 1"></div>
<div aria-label="Lowest fee" aria-orientation="horizontal" aria-valuemax="400" aria-valuemin="0" aria-valuenow="0" aria-valuetext="£0.00" data-kit-region="thumb" id="list-loaded-slider-fee-control-thumb-0" role="slider" style="--kit-slider-at: 0" tabindex="0"></div><div aria-label="Highest fee" aria-orientation="horizontal" aria-valuemax="400" aria-valuemin="0" aria-valuenow="400" aria-valuetext="£400.00" data-kit-region="thumb" id="list-loaded-slider-fee-control-thumb-1" role="slider" style="--kit-slider-at: 1" tabindex="0"></div>
</div>
<div data-kit-region="fields">
<div data-kit-region="field"><label for="list-loaded-slider-fee-control-field-0">Lowest fee</label><div data-kit-number="{"currency":"GBP","fraction":false,"locale":"en-GB","max":400,"min":0,"step":20}" data-kit-role="number-field" data-kit-width="short" id="list-loaded-slider-fee-control-field-0-number-field">
<span data-kit-region="unit">£</span>
<input aria-describedby="list-loaded-slider-fee-help" aria-valuemax="400" aria-valuemin="0" autocomplete="off" autocorrect="off" id="list-loaded-slider-fee-control-field-0" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="0.00">
<button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="list-loaded-slider-fee-control-field-0-decrease" aria-label="Decrease" aria-controls="list-loaded-slider-fee-control-field-0" tabindex="-1" disabled><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
<button type="button" data-kit-role="icon-action" data-kit-region="increase" id="list-loaded-slider-fee-control-field-0-increase" aria-label="Increase" aria-controls="list-loaded-slider-fee-control-field-0" tabindex="-1"><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
<input type="hidden" name="fee[lowest]" value="0">
</div></div><div data-kit-region="field"><label for="list-loaded-slider-fee-control-field-1">Highest fee</label><div data-kit-number="{"currency":"GBP","fraction":false,"locale":"en-GB","max":400,"min":0,"step":20}" data-kit-role="number-field" data-kit-width="short" id="list-loaded-slider-fee-control-field-1-number-field">
<span data-kit-region="unit">£</span>
<input aria-describedby="list-loaded-slider-fee-help" aria-valuemax="400" aria-valuemin="0" autocomplete="off" autocorrect="off" id="list-loaded-slider-fee-control-field-1" inputmode="decimal" role="spinbutton" spellcheck="false" type="text" value="400.00">
<button type="button" data-kit-role="icon-action" data-kit-region="decrease" id="list-loaded-slider-fee-control-field-1-decrease" aria-label="Decrease" aria-controls="list-loaded-slider-fee-control-field-1" tabindex="-1"><svg data-kit-icon="minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></button>
<button type="button" data-kit-role="icon-action" data-kit-region="increase" id="list-loaded-slider-fee-control-field-1-increase" aria-label="Increase" aria-controls="list-loaded-slider-fee-control-field-1" tabindex="-1" disabled><svg data-kit-icon="plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg></button>
<input type="hidden" name="fee[highest]" value="400">
</div></div>
</div>
</div>
</fieldset>
<span data-kit-region="help" id="list-loaded-slider-fee-help">From £0 to £400.</span>
</div>
</div><a href="" aria-label="Clear Fee" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></form></section>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hirer</th><th scope="col">Room</th><th data-kit-column="amount" scope="col">Fee</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{"fee":["240"]},"place":1,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£240.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["80"]},"place":2,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£80.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["150"]},"place":3,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£150.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["60"]},"place":4,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£60.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["320"]},"place":5,"search":[],"sorts":{}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£320.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["45"]},"place":6,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£45.00</div></td></tr>
<tr data-kit-fields="{"filters":{"fee":["180"]},"place":7,"search":[],"sorts":{}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td><td data-kit-column="amount" data-label="Fee"><div data-kit-region="fact" data-kit-role="amount">£180.00</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">5</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-searchOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-search">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":5}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Hire search" data-kit-holds="form-group" data-kit-region="saved-views-filters-sort"><div data-kit-role="form-group" id="list-loaded-search-form-group">
<label for="list-loaded-search">Search hires</label>
<div data-kit-region="control">
<input enterkeyhint="search" id="list-loaded-search" name="search" placeholder="Find hires by hirer or room" type="search">
<button type="button" data-kit-role="icon-action" aria-label="Clear" id="list-loaded-search-clear" data-kit-region="clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></button>
</div>
</div>
<form><button data-kit-role="secondary-action" popovertarget="list-loaded-search-filters" type="button">
<span data-kit-region="label">Filters</span>
</button><div data-kit-region="filters" data-kit-role="phone-sheet" id="list-loaded-search-filters" popover="auto"><div data-kit-region="sort" data-kit-role="form-group" data-kit-sort="columnless-order" id="list-loaded-search-sort-form-group">
<label for="list-loaded-search-sort">Sort</label>
<div data-kit-region="select"><select id="list-loaded-search-sort" name="sort">
<option hidden value="relevance">Relevance</option><option selected value="-booked">Booked, newest first</option><option value="booked">Booked, oldest first</option><option value="hirer">Hirer, A to Z</option><option value="-hirer">Hirer, Z to A</option>
</select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></div></form></section>
<section aria-label="Hires" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No hires match <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear search</span>
</a>
</div>
<div data-kit-region="table" tabindex="0"><table data-kit-table="records">
<thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject"><a data-kit-role="subtle-action" data-kit-region="sort" data-kit-order="hirer" href=""><span data-kit-region="label">Hirer</span></a></th><th scope="col">Room</th></tr></thead>
<tbody>
<tr data-kit-fields="{"filters":{},"place":1,"search":["Oakmere Primary School","Main Hall"],"sorts":{"booked":120,"hirer":"Oakmere Primary School"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Primary School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":2,"search":["Riverside Choir","Small Hall"],"sorts":{"booked":97,"hirer":"Riverside Choir"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Riverside Choir</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":3,"search":["Hollins Judo Club","Main Hall"],"sorts":{"booked":45,"hirer":"Hollins Judo Club"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Hollins Judo Club</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":4,"search":["Thursday Art Group","Garden Room"],"sorts":{"booked":31,"hirer":"Thursday Art Group"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Thursday Art Group</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":5,"search":["Oakmere Scouts","Small Hall"],"sorts":{"booked":18,"hirer":"Oakmere Scouts"}}"><th scope="row" data-kit-column="subject"><a href="../../record/">Oakmere Scouts</a></th><td data-label="Room"><div data-kit-region="fact">Small Hall</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":6,"search":["Fernley Dance School","Main Hall"],"sorts":{"booked":9,"hirer":"Fernley Dance School"}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Fernley Dance School</a></th><td data-label="Room"><div data-kit-region="fact">Main Hall</div></td></tr>
<tr data-kit-fields="{"filters":{},"place":7,"search":["Allotment Society","Garden Room"],"sorts":{"booked":4,"hirer":"Allotment Society"}}" hidden><th scope="row" data-kit-column="subject"><a href="../../record/">Allotment Society</a></th><td data-label="Room"><div data-kit-region="fact">Garden Room</div></td></tr>
</tbody></table></div>
</section>
<footer data-kit-region="count-continuation">
<p><span>Hires <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">5</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span><span hidden>Hire <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">7</span></span></p><nav aria-label="Hire pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?page=2" aria-label="Page 2" hidden>2</a><a href="" hidden></a><span hidden>…</span><a href="?page=2" aria-label="Page 2, last page">2</a><a href="?page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
List, loaded-questionOpen the whole page Source<div data-kit-density="desk" data-kit-layout="shell">
<a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
<header data-kit-region="header">
<div>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">List</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-list/#layout-list-loaded-question">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-fit="pending" data-kit-layout="list" data-kit-loaded="{"locale":"en-GB","pageSize":2}">
<div data-kit-region="notices" aria-live="polite"></div>
<section aria-label="Class filters" data-kit-region="saved-views-filters-sort" data-kit-holds="action-group">
<form><div data-kit-field="day" data-kit-region="filter">
<button data-kit-role="secondary-action" popovertarget="list-loaded-question-day-filter" type="button">
<span data-kit-region="label"><span data-kit-region="name">Day</span> <span data-kit-region="value"></span></span>
</button><div data-kit-role="popover" id="list-loaded-question-day-filter" popover="auto">
<fieldset data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-day">
<legend>Day</legend>
<input type="hidden" name="day" value="">
<label>
<input data-kit-role="selection-control" name="day" type="checkbox" value="saturday">
Saturday
</label>
<label>
<input data-kit-role="selection-control" name="day" type="checkbox" value="sunday">
Sunday
</label>
</fieldset>
</div><a href="" aria-label="Clear Day" data-kit-region="clear" data-kit-role="icon-action" hidden>
<svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</a>
</div>
<a href="" data-kit-region="clear-filters" hidden>Clear filters</a></form><div data-kit-role="action-group" data-kit-holds="words">
<button type="submit" form="list-loaded-question-answers" id="list-loaded-question-continue" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="list-loaded-question-continue-words" data-kit-waits-on='["selected[]"]'><span data-kit-region="label">Continue</span></button>
<p data-kit-region="words" id="list-loaded-question-continue-words">Choose a class to continue.</p>
<p id="list-loaded-question-status" data-kit-role="status-line" data-kit-answers role="status" aria-live="polite" aria-atomic="true"><span id="list-loaded-question-status-chosen" hidden><span id="list-loaded-question-status-names" data-kit-region="value"></span> chosen.</span></p>
</div></section>
<form hidden id="list-loaded-question-answers"></form>
<section aria-label="Classes" data-kit-region="rows"><div data-kit-region="notices" aria-live="polite"></div><p data-kit-region="nothing-matches" hidden>No classes match: <span data-kit-region="applied"></span>.</p><div data-kit-role="action-group" hidden>
<a href="" data-kit-role="secondary-action">
<span data-kit-region="label">Clear filters</span>
</a>
</div>
<article data-kit-fields="{"filters":{"day":["saturday"]},"place":1,"search":[],"sorts":{}}" data-kit-role="row">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject" id="list-loaded-question-ballet">Ballet, ages 4 to 6</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Saturday</span></p></div></div>
<fieldset aria-labelledby="list-loaded-question-ballet" data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-ballet-choice">
<input type="hidden" name="selected[]" value="" form="list-loaded-question-answers">
<label>
<input data-kit-role="selection-control" form="list-loaded-question-answers" name="selected[]" type="checkbox" value="ballet">
Choose
</label>
</fieldset>
</div>
</div>
</article><article data-kit-fields="{"filters":{"day":["sunday"]},"place":2,"search":[],"sorts":{}}" data-kit-role="row">
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject" id="list-loaded-question-tap">Tap, ages 7 to 10</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sunday</span></p></div></div>
<fieldset aria-labelledby="list-loaded-question-tap" data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-tap-choice">
<input type="hidden" name="selected[]" value="" form="list-loaded-question-answers">
<label>
<input checked data-kit-role="selection-control" form="list-loaded-question-answers" name="selected[]" type="checkbox" value="tap">
Choose
</label>
</fieldset>
</div>
</div>
</article><article data-kit-fields="{"filters":{"day":["saturday"]},"place":3,"search":[],"sorts":{}}" data-kit-role="row" hidden>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject" id="list-loaded-question-jazz">Jazz, ages 11 to 14</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Saturday</span></p></div></div>
<fieldset aria-labelledby="list-loaded-question-jazz" data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-jazz-choice">
<input type="hidden" name="selected[]" value="" form="list-loaded-question-answers">
<label>
<input checked data-kit-role="selection-control" form="list-loaded-question-answers" name="selected[]" type="checkbox" value="jazz">
Choose
</label>
</fieldset>
</div>
</div>
</article><article data-kit-fields="{"filters":{"day":["saturday"]},"place":4,"search":[],"sorts":{}}" data-kit-role="row" hidden>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject" id="list-loaded-question-street">Street dance, ages 8 to 12</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Saturday</span></p></div></div>
<fieldset aria-labelledby="list-loaded-question-street" data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-street-choice">
<input type="hidden" name="selected[]" value="" form="list-loaded-question-answers">
<label>
<input data-kit-role="selection-control" form="list-loaded-question-answers" name="selected[]" type="checkbox" value="street">
Choose
</label>
</fieldset>
</div>
</div>
</article><article data-kit-fields="{"filters":{"day":["sunday"]},"place":5,"search":[],"sorts":{}}" data-kit-role="row" hidden>
<div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a href="../../record/" data-kit-region="subject" id="list-loaded-question-contemporary">Contemporary, ages 15 to 18</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sunday</span></p></div></div>
<fieldset aria-labelledby="list-loaded-question-contemporary" data-kit-region="group" data-kit-role="selection-control" id="list-loaded-question-contemporary-choice">
<input type="hidden" name="selected[]" value="" form="list-loaded-question-answers">
<label>
<input data-kit-role="selection-control" form="list-loaded-question-answers" name="selected[]" type="checkbox" value="contemporary">
Choose
</label>
</fieldset>
</div>
</div>
</article>
</section>
<footer data-kit-region="count-continuation">
<p><span>Classes <span data-kit-region="first" data-kit-role="amount">1</span>–<span data-kit-region="last" data-kit-role="amount">2</span> of <span data-kit-region="total" data-kit-role="amount">5</span></span><span hidden>Class <span data-kit-region="first" data-kit-role="amount">1</span> of <span data-kit-region="total" data-kit-role="amount">5</span></span></p><nav aria-label="Class pages" data-kit-role="pager"><span data-kit-region="desk-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?day=saturday&page=2" aria-label="Page 2">2</a><a href="" hidden></a><span hidden>…</span><a href="?day=saturday&page=3" aria-label="Page 3, last page">3</a><a href="?day=saturday&page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span><span data-kit-region="phone-window"><a href="" rel="prev" hidden>Previous</a><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><a href="" hidden></a><span hidden>…</span><a href="" hidden></a><a href="" hidden></a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?day=saturday&page=2" aria-label="Page 2">2</a><a href="" hidden></a><span hidden>…</span><a href="?day=saturday&page=3" aria-label="Page 3, last page">3</a><a href="?day=saturday&page=2" rel="next">Next</a><a role="link" aria-disabled="true" data-kit-state="inert" hidden>Next</a></span></nav>
</footer>
<a href="" hidden data-kit-region="address"></a>
</div>
</main>
</div>
|