loading
Amount due
Embed: a card form arrives after the page.
Payment details
Pay confirms your agreement to the service terms.
A Help answer loading.
Calendar bands, columns and days loading.
A Calendar whose whole week is loading.
A Calendar whose whole month is loading.
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Each List region loading.
Source
<section data-kit-role="label-panel" data-kit-state="loading" aria-busy="true" aria-label="Loading amount due" data-kit-print-loading="The amount due had not loaded.">
<h3 aria-hidden="true">Amount due</h3>
<span data-kit-role="amount" aria-hidden="true">£240.00</span>
</section>
<div data-kit-role="headed-region">
<h3 data-kit-region="heading">Payment details</h3>
<div data-kit-region="content">
<section id="embed-card-embed" data-kit-embed data-kit-state="loading" aria-busy="true" aria-label="Card details" data-kit-print-loading="The card details had not loaded." style="--kit-embed-desktop-block-size: 143px; --kit-embed-phone-block-size: 298px"><div inert><div id="embed-card"></div></div></section>
<div data-kit-role="agreement">
<p data-kit-region="text" id="embed-consent">Pay confirms your agreement to the <a href="#embed-consent">service terms</a>.</p>
<div data-kit-role="action-group" data-kit-region="action"><button id="embed-pay" type="button" data-kit-role="primary-action"><span data-kit-region="label">Pay</span></button></div>
</div>
<footer id="embed-footer"><a href="#embed-case">Back to payment details</a></footer>
</div>
</div>
<p class="specimen-case-line">A Help answer loading.</p>
<div data-kit-layout="help">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="topic"><span>Review an invoice</span></div>
<details data-kit-role="disclosure">
<summary>Topics</summary>
<nav data-kit-region="topic-index" aria-label="Topics">
<ul>
<li><a data-kit-role="destination" data-kit-state="current" href="../state-loading/" aria-current="page"><span data-kit-region="name">Review an invoice</span></a></li>
<li><a data-kit-role="destination" href="../state-loading/"><span data-kit-region="name">Send an invoice</span></a></li>
</ul>
</nav>
</details>
<section data-kit-region="human-support" id="loading-help-support" aria-labelledby="loading-help-support-title">
<div data-kit-role="headed-region">
<h2 data-kit-region="heading" id="loading-help-support-title">Human support</h2>
<div data-kit-region="content"><a data-kit-role="secondary-action" href="mailto:support@example.test"><span data-kit-region="label">Write to support</span></a></div>
</div>
</section>
<article>
<section data-kit-region="answer" data-kit-state="loading" aria-busy="true" aria-label="Loading invoice help" data-kit-print-loading="The invoice help had not loaded.">
<div data-kit-region="notices" aria-live="polite"></div>
<p aria-hidden="true">Check the recipient and amount before sending the invoice.</p>
<p aria-hidden="true">Open the hirer record to review their billing details.</p>
</section>
</article>
</div>
<p class="specimen-case-line">Calendar bands, columns and days loading.</p>
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-14/2025-04-15"><span>14 – </span><wbr><span>15 April 2025</span></time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><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="?week=next" rel="next" aria-label="Next week"><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><div data-kit-region="date"><div data-kit-role="form-group" id="loading-date"><label for="loading-date-control" id="loading-date-label">Go to a date</label><div data-kit-role="date-field" id="loading-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="loading-date-control" type="text" autocomplete="off" value="Monday, 14 April 2025" aria-describedby="loading-date-control-resolved" aria-expanded="false" aria-controls="loading-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="loading-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="loading-date-control-calendar" aria-label="Calendar" aria-describedby="loading-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="loading-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
<div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-loading-calendar-scope">Hall</label><div data-kit-region="select"><select id="state-loading-calendar-scope"><option value="all">All halls</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-region="view"><div data-kit-role="form-group" id="state-loading-calendar-view-form-group"><fieldset><legend id="state-loading-calendar-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-loading-calendar-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" style="--kit-calendar-columns: 2; --kit-calendar-hours: 3;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></div>
</div>
<div data-kit-region="bands" data-kit-state="loading" aria-busy="true" aria-label="Loading whole-day bookings" data-kit-print-loading="The whole-day bookings had not loaded.">
<span data-kit-region="band" aria-hidden="true" style="--kit-calendar-band-first: 1; --kit-calendar-band-last: 2; --kit-calendar-band-stack: 1;">Hall closed for rewiring</span>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
</div>
</aside>
<div data-kit-region="column" data-kit-state="loading" aria-busy="true" aria-label="Loading Monday's bookings" data-kit-print-loading="Monday's bookings had not loaded.">
<span data-kit-region="block" aria-hidden="true" style="grid-row: 1 / span 2;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-14T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Meeting</span></span></span>
</div>
<div data-kit-region="column" data-kit-state="loading" aria-busy="true" aria-label="Loading Tuesday's bookings" data-kit-print-loading="Tuesday's bookings had not loaded.">
<span data-kit-region="block" aria-hidden="true" style="grid-row: 2 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-15T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></span>
</div>
</div>
</div>
<div data-kit-region="days">
<section data-kit-region="day" data-kit-state="loading" aria-busy="true" aria-label="Loading Monday's bookings" data-kit-print-loading="Monday's bookings had not loaded.">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2025-04-14">14 Apr</time></span></header>
<div data-kit-region="band" data-kit-state="loading" aria-busy="true" aria-label="Loading whole-day bookings" data-kit-print-loading="The whole-day bookings had not loaded."><article data-kit-role="row" aria-hidden="true"><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">Hall closed for rewiring</span></div></div></div></div></article></div>
<div data-kit-region="item" data-kit-state="uncovered loading" aria-busy="true" aria-label="Loading Monday's bookings" data-kit-print-loading="Monday's bookings had not loaded."><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2025-04-14T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-15">15 Apr</time></span></header>
<div data-kit-region="item" data-kit-state="loading" aria-busy="true" aria-label="Loading Tuesday's bookings" data-kit-print-loading="Tuesday's bookings had not loaded."><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2025-04-15T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
</div>
</div>
<p class="specimen-case-line">A Calendar whose whole week is loading.</p>
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-21/2025-04-23"><span>21 – </span><wbr><span>23 April 2025</span></time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><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="?week=next" rel="next" aria-label="Next week"><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><div data-kit-region="date"><div data-kit-role="form-group" id="loading-date-2"><label for="loading-date-2-control" id="loading-date-2-label">Go to a date</label><div data-kit-role="date-field" id="loading-date-2-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-21"}'><input id="loading-date-2-control" type="text" autocomplete="off" value="Monday, 21 April 2025" aria-describedby="loading-date-2-control-resolved" aria-expanded="false" aria-controls="loading-date-2-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="loading-date-2-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="loading-date-2-control-calendar" aria-label="Calendar" aria-describedby="loading-date-2-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-21"><div id="loading-date-2-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
<div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-loading-calendar-week-scope">Hall</label><div data-kit-region="select"><select id="state-loading-calendar-week-scope"><option value="all">All halls</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-region="view"><div data-kit-role="form-group" id="state-loading-calendar-week-view-form-group"><fieldset><legend id="state-loading-calendar-week-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-loading-calendar-week-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-week-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-week-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-week-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="desk-grid" data-kit-state="loading" aria-busy="true" aria-label="Loading this week's bookings" data-kit-print-loading="This week's bookings had not loaded." style="--kit-calendar-columns: 3; --kit-calendar-hours: 4;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></div>
</div>
<div data-kit-region="time-grid">
<aside data-kit-region="time-gutter" aria-label="Times">
<div data-kit-region="hours">
<time datetime="09:00">09:00</time>
<time datetime="10:00">10:00</time>
<time datetime="11:00">11:00</time>
<time datetime="12:00">12:00</time>
</div>
</aside>
<div data-kit-region="column">
<span data-kit-region="block" aria-hidden="true" style="grid-row: 1 / span 2;"><span data-kit-region="name">Board meeting</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-21T09:00+01:00">09:00</time></span><span data-kit-region="line"><time datetime="2025-04-21T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span data-kit-region="kind"> · Meeting</span></span></span>
</div>
<div data-kit-region="column">
<span data-kit-region="block" aria-hidden="true" style="grid-row: 2 / span 2;"><span data-kit-region="name">Yoga class</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-22T10:00+01:00">10:00</time></span><span data-kit-region="line"><time datetime="2025-04-22T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></span>
</div>
<div data-kit-region="column">
<span data-kit-region="block" aria-hidden="true" style="grid-row: 3 / span 1;"><span data-kit-region="name">Choir practice</span><span data-kit-region="start" aria-hidden="true"><span data-kit-region="separator"> · </span><time datetime="2025-04-23T11:00+01:00">11:00</time></span><span data-kit-region="line"><time datetime="2025-04-23T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span data-kit-region="kind"> · Booking</span></span></span>
</div>
</div>
</div>
<div data-kit-region="days" data-kit-state="loading" aria-busy="true" aria-label="Loading this week's bookings" data-kit-print-loading="This week's bookings had not loaded.">
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2025-04-21T09:00+01:00"><span>09:00–</span><wbr><span>11:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2025-04-22T10:00+01:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2025-04-23T11:00+01:00"><span>11:00–</span><wbr><span>12:00</span></time><span>Choir practice<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
</div>
</div>
<p class="specimen-case-line">A Calendar whose whole month is loading.</p>
<div data-kit-layout="calendar">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="toolbar" aria-label="Calendar controls">
<div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2027-02-01">February 2027</time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?month=previous" rel="prev" aria-label="Previous month"><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="?month=next" rel="next" aria-label="Next month"><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><div data-kit-region="date"><div data-kit-role="form-group" id="loading-date-3"><label for="loading-date-3-control" id="loading-date-3-label">Go to a date</label><div data-kit-role="date-field" id="loading-date-3-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":"2027-02-01"}'><input id="loading-date-3-control" type="text" autocomplete="off" value="Monday, 1 February 2027" aria-describedby="loading-date-3-control-resolved" aria-expanded="false" aria-controls="loading-date-3-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Friday, 22 January 2027
Saturday, 23 January 2027
Sunday, 24 January 2027
Monday, 25 January 2027
Tuesday, 26 January 2027
Wednesday, 27 January 2027
Thursday, 28 January 2027
Monday, 22 February 2027
Tuesday, 23 February 2027
Wednesday, 24 February 2027
Thursday, 25 February 2027
Friday, 26 February 2027
Saturday, 27 February 2027
Sunday, 28 February 2027
Monday, 22 March 2027
Tuesday, 23 March 2027
Wednesday, 24 March 2027
Thursday, 25 March 2027
Friday, 26 March 2027
Saturday, 27 March 2027
Sunday, 28 March 2027
Thursday, 22 April 2027
Friday, 23 April 2027
Saturday, 24 April 2027
Sunday, 25 April 2027
Monday, 26 April 2027
Tuesday, 27 April 2027
Wednesday, 28 April 2027
Saturday, 22 May 2027
Sunday, 23 May 2027
Monday, 24 May 2027
Tuesday, 25 May 2027
Wednesday, 26 May 2027
Thursday, 27 May 2027
Friday, 28 May 2027
Tuesday, 22 June 2027
Wednesday, 23 June 2027
Thursday, 24 June 2027
Friday, 25 June 2027
Saturday, 26 June 2027
Sunday, 27 June 2027
Monday, 28 June 2027
Thursday, 22 July 2027
Friday, 23 July 2027
Saturday, 24 July 2027
Sunday, 25 July 2027
Monday, 26 July 2027
Tuesday, 27 July 2027
Wednesday, 28 July 2027
Sunday, 22 August 2027
Monday, 23 August 2027
Tuesday, 24 August 2027
Wednesday, 25 August 2027
Thursday, 26 August 2027
Friday, 27 August 2027
Saturday, 28 August 2027
Wednesday, 22 September 2027
Thursday, 23 September 2027
Friday, 24 September 2027
Saturday, 25 September 2027
Sunday, 26 September 2027
Monday, 27 September 2027
Tuesday, 28 September 2027
Friday, 22 October 2027
Saturday, 23 October 2027
Sunday, 24 October 2027
Monday, 25 October 2027
Tuesday, 26 October 2027
Wednesday, 27 October 2027
Thursday, 28 October 2027
Monday, 22 November 2027
Tuesday, 23 November 2027
Wednesday, 24 November 2027
Thursday, 25 November 2027
Friday, 26 November 2027
Saturday, 27 November 2027
Sunday, 28 November 2027
Wednesday, 22 December 2027
Thursday, 23 December 2027
Friday, 24 December 2027
Saturday, 25 December 2027
Sunday, 26 December 2027
Monday, 27 December 2027
Tuesday, 28 December 2027</span><span id="loading-date-3-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="loading-date-3-control-calendar" aria-label="Calendar" aria-describedby="loading-date-3-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="2027-02-01"><div id="loading-date-3-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
<div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-loading-calendar-month-scope">Hall</label><div data-kit-region="select"><select id="state-loading-calendar-month-scope"><option value="all">All halls</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-region="view"><div data-kit-role="form-group" id="state-loading-calendar-month-view-form-group"><fieldset><legend id="state-loading-calendar-month-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-loading-calendar-month-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-month-view" value="week"><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-month-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-loading-calendar-month-view" value="month" checked><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
</section>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="month-grid" data-kit-state="loading" aria-busy="true" aria-label="Loading this month's bookings" data-kit-print-loading="This month's bookings had not loaded." style="--kit-calendar-columns: 7;">
<div data-kit-region="heads">
<div data-kit-region="column-head"><span><strong>Mon</strong></span></div>
<div data-kit-region="column-head"><span><strong>Tue</strong></span></div>
<div data-kit-region="column-head"><span><strong>Wed</strong></span></div>
<div data-kit-region="column-head"><span><strong>Thu</strong></span></div>
<div data-kit-region="column-head"><span><strong>Fri</strong></span></div>
<div data-kit-region="column-head"><span><strong>Sat</strong></span></div>
<div data-kit-region="column-head"><span><strong>Sun</strong></span></div>
</div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-01">1</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2027-02-01T09:30+00:00">09:30</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-02">2</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-03">3</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Board meeting</span> <time datetime="2027-02-03T10:00+00:00">10:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-04">4</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Yoga class</span> <time datetime="2027-02-04T18:00+00:00">18:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-05">5</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-06">6</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-07">7</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-08">8</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-09">9</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Choir practice</span> <time datetime="2027-02-09T19:00+00:00">19:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-10">10</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-11">11</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2027-02-11T09:30+00:00">09:30</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-12">12</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-13">13</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-14">14</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-15">15</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Board meeting</span> <time datetime="2027-02-15T10:00+00:00">10:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-16">16</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-17">17</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Yoga class</span> <time datetime="2027-02-17T18:00+00:00">18:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-18">18</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Craft fair</span> <time datetime="2027-02-18T11:00+00:00">11:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-19">19</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-20">20</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-21">21</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-22">22</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-23">23</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Choir practice</span> <time datetime="2027-02-23T19:00+00:00">19:00</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-24">24</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-25">25</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-26">26</time></span><a data-kit-region="item" href="../record/"><span data-kit-region="head">Toddler group</span> <time datetime="2027-02-26T09:30+00:00">09:30</time></a></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-27">27</time></span></div>
<div data-kit-region="month-cell"><span data-kit-region="date"><time datetime="2027-02-28">28</time></span></div>
</div>
<div data-kit-region="days" data-kit-state="loading" aria-busy="true" aria-label="Loading this month's bookings" data-kit-print-loading="This month's bookings had not loaded.">
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2027-02-01">1 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-01T09:30+00:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Tue</strong><br /><time datetime="2027-02-02">2 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Wed</strong><br /><time datetime="2027-02-03">3 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-03T10:00+00:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Thu</strong><br /><time datetime="2027-02-04">4 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-04T18:00+00:00"><span>18:00–</span><wbr><span>19:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Fri</strong><br /><time datetime="2027-02-05">5 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sat</strong><br /><time datetime="2027-02-06">6 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sun</strong><br /><time datetime="2027-02-07">7 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2027-02-08">8 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Tue</strong><br /><time datetime="2027-02-09">9 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-09T19:00+00:00"><span>19:00–</span><wbr><span>21:00</span></time><span>Choir practice<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Wed</strong><br /><time datetime="2027-02-10">10 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Thu</strong><br /><time datetime="2027-02-11">11 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-11T09:30+00:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Fri</strong><br /><time datetime="2027-02-12">12 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sat</strong><br /><time datetime="2027-02-13">13 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sun</strong><br /><time datetime="2027-02-14">14 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2027-02-15">15 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-15T10:00+00:00"><span>10:00–</span><wbr><span>12:00</span></time><span>Board meeting<span data-kit-region="supporting">Meeting</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Tue</strong><br /><time datetime="2027-02-16">16 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Wed</strong><br /><time datetime="2027-02-17">17 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-17T18:00+00:00"><span>18:00–</span><wbr><span>19:00</span></time><span>Yoga class<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Thu</strong><br /><time datetime="2027-02-18">18 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-18T11:00+00:00"><span>11:00–</span><wbr><span>15:00</span></time><span>Craft fair<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Fri</strong><br /><time datetime="2027-02-19">19 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sat</strong><br /><time datetime="2027-02-20">20 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sun</strong><br /><time datetime="2027-02-21">21 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Mon</strong><br /><time datetime="2027-02-22">22 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Tue</strong><br /><time datetime="2027-02-23">23 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-23T19:00+00:00"><span>19:00–</span><wbr><span>21:00</span></time><span>Choir practice<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Wed</strong><br /><time datetime="2027-02-24">24 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Thu</strong><br /><time datetime="2027-02-25">25 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Fri</strong><br /><time datetime="2027-02-26">26 Feb</time></span></header>
<div data-kit-region="item"><article data-kit-role="row" aria-hidden="true"><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"><time datetime="2027-02-26T09:30+00:00"><span>09:30–</span><wbr><span>11:00</span></time><span>Toddler group<span data-kit-region="supporting">Booking</span></span></span></div></div></div></div></article></div>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sat</strong><br /><time datetime="2027-02-27">27 Feb</time></span></header>
</section>
<section data-kit-region="day">
<header data-kit-region="day-heading" aria-hidden="true"><span><strong>Sun</strong><br /><time datetime="2027-02-28">28 Feb</time></span></header>
</section>
</div>
</div>
<p class="specimen-case-line">Each List region loading.</p>
<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" data-kit-state="loading" aria-busy="true" aria-label="Loading invoice views and controls" data-kit-print-loading="The invoice views and controls had not loaded.">
<nav aria-hidden="true" aria-label="Saved views" data-kit-role="local-tabs" id="state-loading-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"><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="state-loading-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="state-loading-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"><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="state-loading-list-filter">Search invoices</label><div data-kit-region="control"><input id="state-loading-list-filter" type="search" enterkeyhint="search" placeholder="Find invoices by hirer name"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="state-loading-list-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></div>
<form><button type="button" data-kit-role="secondary-action" popovertarget="state-loading-list-filters"><span data-kit-region="label">Filters</span></button><div data-kit-region="filters" id="state-loading-list-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-role="form-group" data-kit-region="sort" id="state-loading-list-sort-form-group"><label for="state-loading-list-sort">Sort</label><div data-kit-region="select"><select id="state-loading-list-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></form>
</section>
<section data-kit-region="columns-selection-actions" data-kit-state="loading" aria-busy="true" aria-label="Loading columns and selection actions" data-kit-print-loading="The columns and selection actions had not loaded.">
<div aria-busy="true" aria-label="Loading columns and selection actions" data-kit-print-loading="The columns and selection actions had not loaded." data-kit-region="columns" data-kit-state="loading"><button data-kit-role="secondary-action" popovertarget="loading-list-columns" type="button"><span data-kit-region="label">Columns</span></button><div data-kit-role="popover" id="loading-list-columns" popover="auto"><div data-kit-carries-selection="false" data-kit-on-move="move_column" data-kit-role="reordering" id="loading-list-columns-order"><article data-kit-role="row" id="loading-list-columns-invoice"><label data-kit-region="selection"><input aria-describedby="loading-list-columns-invoice-reason" aria-labelledby="loading-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="loading-list-columns-invoice-subject">Invoice</span><span data-kit-region="supporting" id="loading-list-columns-invoice-reason">Names each invoice</span></span></div></div></div></div></article><article data-kit-role="row" id="loading-list-columns-amount-due"><button type="button" tabindex="-1" data-kit-region="handle" id="loading-list-columns-amount-due-handle" aria-label="Move" aria-labelledby="loading-list-columns-amount-due-handle loading-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="loading-list-columns-amount-due-subject" checked data-kit-role="selection-control" 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" id="loading-list-columns-amount-due-subject">Amount due</span></div></div></div><div data-kit-region="actions"><button aria-labelledby="loading-list-columns-amount-due-move loading-list-columns-amount-due-subject" data-kit-region="move" data-kit-role="subtle-action" id="loading-list-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="loading-list-columns-order-move-heading" data-kit-on-close="[]" data-kit-on-open="[]" data-kit-region="move" data-kit-role="dialog" id="loading-list-columns-order-move"><h2 data-kit-region="heading" id="loading-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="loading-list-columns-order-move-place"><label for="loading-list-columns-order-move-place-control">Place it</label><div data-kit-region="select"><select id="loading-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="loading-list-columns-order-move-row"><label for="loading-list-columns-order-move-row-control">Column</label><div data-kit-region="select"><select id="loading-list-columns-order-move-row-control" name="row"><option value="loading-list-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>
</section>
<section data-kit-region="rows" data-kit-state="loading" aria-busy="true" aria-label="Loading invoices" data-kit-print-loading="The invoices had not loaded.">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="table" tabindex="0">
<table data-kit-table="records" aria-hidden="true">
<caption>Invoices</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">Oakmere Primary School</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><th scope="row" data-kit-column="subject">Oakmere Primary School</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 data-kit-region="day" data-kit-state="loading" aria-busy="true" aria-label="Loading invoices" data-kit-print-loading="The invoices had not loaded.">
<h3 aria-hidden="true"><time datetime="2025-04-14">14 April 2025</time></h3>
<p data-kit-region="entry" data-kit-state="loading" aria-busy="true" data-kit-print-loading="The invoices had not loaded.">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" data-kit-state="loading" aria-busy="true" aria-label="Loading invoice pages" data-kit-print-loading="The invoice pages had not loaded.">
<p aria-hidden="true">Invoice <span data-kit-role="amount">1</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" aria-hidden="true">
<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">2</a><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</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">2</a><span>…</span><a href="?view=all&page=12" aria-label="Page 12, last page">12</a><a href="?view=all&page=2" rel="next">Next</a></span>
</nav>
</footer>
</div>