SettingsBuilt 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. SettingsOpen 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">Settings</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../layout-settings/#layout-settings">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="settings" data-kit-holds="standing">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Your settings"><ul><li><span data-kit-region="group-name">Your account</span><ul><li><span data-kit-region="group-name">Security</span><ul><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=your-email" aria-current="page"><span data-kit-region="name">Your email</span></a></li><li><a data-kit-role="destination" href="../settings/?section=password"><span data-kit-region="name">Password</span></a></li><li><a data-kit-role="destination" href="../settings/?section=two-step-sign-in"><span data-kit-region="name">Two-step sign-in</span></a></li></ul></li></ul></li><li><span data-kit-region="group-name">Your preferences</span><ul><li><a data-kit-role="destination" href="../settings/?section=your-sessions"><span data-kit-region="name">Your sessions</span></a></li><li><a data-kit-role="destination" href="../settings/?section=devices"><span data-kit-region="name">Devices</span></a></li><li><a data-kit-role="destination" href="../settings/?section=connected-apps"><span data-kit-region="name">Connected apps</span></a></li><li><a data-kit-role="destination" href="../settings/?section=notifications"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" href="../settings/?section=language-and-region"><span data-kit-region="name">Language and region</span></a></li><li><a data-kit-role="destination" href="../settings/?section=billing"><span data-kit-region="name">Billing</span></a></li></ul></li></ul></nav></details>
<section data-kit-region="selected-section" id="email">
<h2 id="email-title">Your email</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Address</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>maya@</span><wbr /><span>example.com</span></span></span></dd></dl></div>
</div>
</section>
</div>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=notifications" aria-current="page"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" href="../settings/?section=invitations"><span data-kit-region="name">Invitations</span></a></li><li><a data-kit-role="destination" href="../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="notifications">
<h2 id="notifications-title">Notifications</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="settings-notifications-form">
<div data-kit-role="form-group">
<label for="settings-digest">Digest</label>
<div data-kit-region="select"><select id="settings-digest" name="digest"><option>Every morning</option><option>Once a week</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>
<output for="settings-digest">Every morning</output>
</div>
<div data-kit-role="form-group">
<label for="settings-reply-to">Reply-to address</label>
<input id="settings-reply-to" name="reply-to" type="email" value="hall@oakmere.example" />
<output for="settings-reply-to">hall@oakmere.example</output>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="settings-notifications-form" data-kit-role="primary-action"><span data-kit-region="label">Save notifications</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send a test message</span></button><a href="#email" data-kit-role="way-back"><span data-kit-region="label">Return to your email</span></a><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" href="../settings/?section=notifications"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=invitations" aria-current="page"><span data-kit-region="name">Invitations</span></a></li><li><a data-kit-role="destination" href="../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="invitations">
<h2 id="invitations-title">Invitations</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<article 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">
<span data-kit-region="subject"><span data-kit-region="email"><span><span>margaret<wbr />.hollingsworth<wbr />.hallbookingsecretary@</span><wbr /><span>oakmerewomensinstitute<wbr />.hallbookings.example</span></span></span></span>
<span data-kit-role="stamp" data-kit-state="neutral">Waiting for an answer</span>
</div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Takes bookings</span></p>
<p data-kit-region="facts"><span data-kit-region="fact">Sent <time datetime="2025-03-10">10 March 2025</time></span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
</div>
</article>
<article 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">
<span data-kit-region="subject"><span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></span>
<span data-kit-role="stamp" data-kit-state="neutral">Waiting for an answer</span>
</div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sees the calendar</span></p>
<p data-kit-region="facts"><span data-kit-region="fact">Sent <time datetime="2025-03-12">12 March 2025</time></span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
</div>
</article>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Invite someone</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="standing">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=hall-details" aria-current="page"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" href="../settings/?section=notifications"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" href="../settings/?section=invitations"><span data-kit-region="name">Invitations</span></a></li><li><a data-kit-role="destination" href="../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="hall-details">
<h2 id="hall-details-title">Hall details</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hall name</dt><dd data-kit-region="value">Oakmere Village Hall</dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Logo</dt><dd data-kit-region="value"><a data-kit-role="image" id="settings-logo" href="#settings-logo-overlay"><img src="../media/oakmere-hall-wordmark.svg" alt="Oakmere Hall wordmark" width="1200" height="120" style="--kit-image-natural-width: 1200; --kit-image-natural-height: 120"><span hidden>The logo cannot be shown.</span></a></dd></dl></div>
<div data-kit-role="headed-region">
<h3 data-kit-region="heading">On booking forms</h3>
<div data-kit-region="content">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Contact email</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>bookings@</span><wbr /><span>example.com</span></span></span></dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Phone</dt><dd data-kit-region="value">01632 960 123</dd></dl></div>
</div>
</div>
</div>
</section>
</div>
<div data-kit-role="image-overlay" id="settings-logo-overlay" tabindex="-1" aria-labelledby="settings-logo-overlay-caption">
<figure data-kit-region="box">
<div data-kit-region="image"><img src="../media/oakmere-hall-wordmark.svg" width="1200" height="120" alt="Oakmere Hall wordmark"><span hidden>The logo cannot be shown.</span></div>
<figcaption data-kit-region="caption" id="settings-logo-overlay-caption">Oakmere Hall wordmark</figcaption>
<nav data-kit-region="actions" aria-label="Hall logo">
<a data-kit-role="secondary-action" href="../media/oakmere-hall-wordmark.svg"><span data-kit-region="label">Open file</span></a>
<a data-kit-role="secondary-action" href="#settings-logo"><span data-kit-region="label">Close</span></a>
</nav>
</figure>
<div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-layout="settings" id="layout-settings-terms">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="selected-section" id="settings-terms">
<h2 id="settings-terms-title">Terms and waivers</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="button" data-kit-role="emphasised-next-action"><span data-kit-region="label">Add your terms</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" id="layout-settings-fold">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="selected-section" id="fold-invitations">
<h2 id="fold-invitations-title">Invitations</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-role="action-group" data-kit-region="local-actions" data-kit-holds="words">
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Invite someone</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send a reminder</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy invitation link</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Change access</span></button>
<button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="settings-fold-resend" aria-describedby="settings-fold-resend-words"><span data-kit-region="label">Resend invitation</span></button><p data-kit-region="words" id="settings-fold-resend-words">Confirm your email before resending.</p>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Extend invitation</span></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw invitation</span></button>
<div id="settings-fold-more" data-kit-role="action-menu"><button aria-controls="settings-fold-more-layer" aria-haspopup="menu" aria-label="More actions for invitations" data-kit-role="icon-action" id="settings-fold-more-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="settings-fold-more-layer" popover="manual" role="menu" aria-labelledby="settings-fold-more-trigger"></ul></div>
<a href="#email" data-kit-role="way-back"><span data-kit-region="label">Return to your email</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div>
</div>
<div data-kit-layout="settings" id="layout-settings-empty-region">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="selected-section" id="empty-region-notifications">
<h2 id="empty-region-notifications-title">Notifications</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-role="action-group" data-kit-region="local-actions"><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="standing" id="layout-settings-one-section">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="selected-section" id="one-section-billing">
<h2 id="one-section-billing-title">Billing</h2>
<p data-kit-role="scope-line">A change of plan takes effect from the next bill.</p>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Plan</dt><dd data-kit-region="value">Monthly</dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Next bill</dt><dd data-kit-region="value"><time datetime="2025-04-01">1 April 2025</time></dd></dl></div>
</div>
</section>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Change plan</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="standing form-or-list" id="layout-settings-task-forms">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Oakmere Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=opening-hours" aria-current="page"><span data-kit-region="name">Opening hours</span></a></li><li><a data-kit-role="destination" href="../settings/?section=amounts"><span data-kit-region="name">Amounts</span></a></li><li><a data-kit-role="destination" href="../settings/?section=closing-the-hall"><span data-kit-region="name">Closing the hall</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="task-forms-hours">
<h2 id="task-forms-hours-title">Opening hours</h2>
<p data-kit-role="scope-line">Hirers can book only between the new hours.</p>
<div data-kit-region="notices" aria-live="polite">
<div data-kit-role="notice" data-kit-state="settled">
<svg data-kit-icon="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
<p data-kit-region="standing">2 bookings fall outside the new hours</p>
<p data-kit-region="sentence">They stay booked until their hirers choose another time.</p>
</div>
</div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hours now</dt><dd data-kit-region="value"><time datetime="09:00"><span>09:00–</span><wbr><span>22:00</span></time></dd></dl></div>
</div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="settings-task-forms-row-form">
<div data-kit-region="form-row">
<div data-kit-role="form-group" id="task-forms-opens">
<label for="task-forms-opens-control" id="task-forms-opens-label">Opens</label>
<div data-kit-role="time-field" id="task-forms-opens-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
<input id="task-forms-opens-control" type="text" autocomplete="off" value="08:00" aria-describedby="task-forms-opens-control-resolved" aria-expanded="false" aria-controls="task-forms-opens-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
<span id="task-forms-opens-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="times" id="task-forms-opens-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
<input type="hidden" name="opens" value="08:00">
<div id="task-forms-opens-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
</div>
<output for="task-forms-opens-control"><time datetime="08:00">08:00</time></output>
</div>
<div data-kit-role="form-group" id="task-forms-closes">
<label for="task-forms-closes-control" id="task-forms-closes-label">Closes</label>
<div data-kit-role="time-field" id="task-forms-closes-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
<input id="task-forms-closes-control" type="text" autocomplete="off" value="22:00" aria-describedby="task-forms-closes-control-resolved" aria-expanded="false" aria-controls="task-forms-closes-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
<span id="task-forms-closes-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="times" id="task-forms-closes-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
<input type="hidden" name="closes" value="22:00">
<div id="task-forms-closes-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
</div>
<output for="task-forms-closes-control"><time datetime="22:00">22:00</time></output>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="settings-task-forms-row-form" data-kit-role="primary-action"><span data-kit-region="label">Save opening hours</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Oakmere Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" href="../settings/?section=opening-hours"><span data-kit-region="name">Opening hours</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=amounts" aria-current="page"><span data-kit-region="name">Amounts</span></a></li><li><a data-kit-role="destination" href="../settings/?section=closing-the-hall"><span data-kit-region="name">Closing the hall</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="task-forms-amounts">
<h2 id="task-forms-amounts-title">Amounts</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="settings-task-forms-row-list-form">
<div data-kit-region="form-row-list" style="--kit-form-row-columns: 2;">
<div data-kit-region="form-row">
<div data-kit-role="form-group" data-kit-width="narrow"><label for="task-forms-count-1">Count</label><input id="task-forms-count-1" name="count-1" value="1" /><output for="task-forms-count-1">1</output></div>
<div data-kit-role="form-group" data-kit-width="narrow"><label for="task-forms-amount-1">Amount</label><input id="task-forms-amount-1" name="amount-1" value="20" /><output for="task-forms-amount-1">20</output></div>
<label><input type="hidden" name="and-more-1" value="false" /><input data-kit-role="selection-control" type="checkbox" id="task-forms-mark-1" name="and-more-1" /><span>This count and more</span><output>Not marked</output></label>
<button type="button" data-kit-role="secondary-action" aria-label="Remove row 1"><span data-kit-region="label">Remove</span></button>
</div>
<div data-kit-region="form-row">
<div data-kit-role="form-group" data-kit-width="narrow"><label for="task-forms-count-2">Count</label><input id="task-forms-count-2" name="count-2" value="2" /><output for="task-forms-count-2">2</output></div>
<div data-kit-role="form-group" data-kit-width="narrow"><label for="task-forms-amount-2">Amount</label><input id="task-forms-amount-2" name="amount-2" value="35" /><output for="task-forms-amount-2">35</output></div>
<label><input type="hidden" name="and-more-2" value="false" /><input data-kit-role="selection-control" type="checkbox" id="task-forms-mark-2" name="and-more-2" checked /><span>This count and more</span><output>Marked</output></label>
<button type="button" data-kit-role="secondary-action" aria-label="Remove row 2"><span data-kit-region="label">Remove</span></button>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="settings-task-forms-row-list-form" data-kit-role="primary-action"><span data-kit-region="label">Save amounts</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Oakmere Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" href="../settings/?section=opening-hours"><span data-kit-region="name">Opening hours</span></a></li><li><a data-kit-role="destination" href="../settings/?section=amounts"><span data-kit-region="name">Amounts</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=closing-the-hall" aria-current="page"><span data-kit-region="name">Closing the hall</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="task-forms-closing">
<h2 id="task-forms-closing-title">Closing the hall</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="settings-task-forms-headed-region-form">
<div data-kit-role="headed-region">
<h3 data-kit-region="heading">Days closed</h3>
<div data-kit-region="content">
<div data-kit-role="form-group" id="task-forms-range-first">
<label for="task-forms-range-first-control" id="task-forms-range-first-label">First</label>
<div data-kit-role="date-field" id="task-forms-range-first-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-09"}'>
<input id="task-forms-range-first-control" type="text" autocomplete="off" value="Monday, 10 February 2025" aria-describedby="task-forms-range-first-control-resolved" aria-expanded="false" aria-controls="task-forms-range-first-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="task-forms-range-first-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="task-forms-range-first-control-calendar" aria-label="Calendar" aria-describedby="task-forms-range-first-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="range-first" value="2025-02-10">
<div id="task-forms-range-first-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
<output for="task-forms-range-first-control"><time datetime="2025-02-10">Monday, 10 February 2025</time></output>
</div>
<div data-kit-role="form-group" id="task-forms-range-last">
<label for="task-forms-range-last-control" id="task-forms-range-last-label">Last</label>
<div data-kit-role="date-field" id="task-forms-range-last-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-09"}'>
<input id="task-forms-range-last-control" type="text" autocomplete="off" value="Sunday, 16 February 2025" aria-describedby="task-forms-range-last-control-resolved" aria-expanded="false" aria-controls="task-forms-range-last-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="task-forms-range-last-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="task-forms-range-last-control-calendar" aria-label="Calendar" aria-describedby="task-forms-range-last-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="range-last" value="2025-02-16">
<div id="task-forms-range-last-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
<output for="task-forms-range-last-control"><time datetime="2025-02-16">Sunday, 16 February 2025</time></output>
</div>
</div>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="settings-task-forms-headed-region-form" data-kit-role="primary-action"><span data-kit-region="label">Close the hall</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="standing" id="layout-settings-flow">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Your settings"><ul><li><span data-kit-region="group-name">Your account</span><ul><li><span data-kit-region="group-name">Security</span><ul><li><a data-kit-role="destination" href="../settings/?section=your-email"><span data-kit-region="name">Your email</span></a></li><li><a data-kit-role="destination" href="../settings/?section=password"><span data-kit-region="name">Password</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=two-step-sign-in" aria-current="page"><span data-kit-region="name">Two-step sign-in</span></a></li></ul></li></ul></li><li><span data-kit-region="group-name">Your preferences</span><ul><li><a data-kit-role="destination" href="../settings/?section=your-sessions"><span data-kit-region="name">Your sessions</span></a></li><li><a data-kit-role="destination" href="../settings/?section=devices"><span data-kit-region="name">Devices</span></a></li><li><a data-kit-role="destination" href="../settings/?section=connected-apps"><span data-kit-region="name">Connected apps</span></a></li><li><a data-kit-role="destination" href="../settings/?section=notifications"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" href="../settings/?section=language-and-region"><span data-kit-region="name">Language and region</span></a></li><li><a data-kit-role="destination" href="../settings/?section=billing"><span data-kit-region="name">Billing</span></a></li></ul></li></ul></nav></details>
<section data-kit-region="selected-section" id="flow-two-step">
<h2 id="flow-two-step-title">Two-step sign-in</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Status</dt><dd data-kit-region="value">Off</dd></dl></div>
</div>
</section>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="button" id="settings-two-step-opener" data-kit-role="primary-action" commandfor="settings-two-step" command="show-modal"><span data-kit-region="label">Set up two-step sign-in</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<dialog id="settings-two-step" data-kit-role="dialog" data-kit-state="open" aria-labelledby="settings-two-step-title">
<h2 data-kit-region="heading" id="settings-two-step-title">Set up two-step sign-in</h2>
<ol data-kit-role="progress" data-kit-region="progress" aria-label="Steps">
<li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Your app</span></li>
<li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Code</span></li>
<li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Backup codes</span></li>
</ol>
<div data-kit-region="form-groups">
<form id="settings-two-step-form">
<div data-kit-role="form-group" data-kit-width="narrow">
<label for="settings-two-step-code">Code from your app</label>
<input id="settings-two-step-code" name="code" type="text" autocomplete="one-time-code" inputmode="numeric" />
<output for="settings-two-step-code">No code entered</output>
</div>
</form>
</div>
<div data-kit-role="action-group"><div data-kit-region="actions">
<button type="submit" form="settings-two-step-form" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
<button type="button" data-kit-role="secondary-action"><svg data-kit-icon="arrow-left" 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,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="settings-two-step" 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="settings" data-kit-holds="form-or-list" id="layout-settings-refused">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=notifications" aria-current="page"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" href="../settings/?section=invitations"><span data-kit-region="name">Invitations</span></a></li><li><a data-kit-role="destination" href="../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="refused-notifications">
<h2 id="refused-notifications-title">Notifications</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="refused-settings-notifications-form">
<div data-kit-role="form-group">
<label for="refused-settings-digest">Digest</label>
<div data-kit-region="select"><select id="refused-settings-digest" name="digest"><option>Every morning</option><option>Once a week</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>
<output for="refused-settings-digest">Every morning</output>
</div>
<div data-kit-role="form-group">
<label for="refused-settings-reply-to">Reply-to address</label>
<input id="refused-settings-reply-to" name="reply-to" type="email" value="hall@oakmere.example" />
<output for="refused-settings-reply-to">hall@oakmere.example</output>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions">
<div data-kit-role="refusal" id="refused-settings-save" role="alert" aria-atomic="true">
<p data-kit-region="line">Your notifications aren't saved yet. Digests need a confirmed email.</p>
<ul data-kit-region="causes"><li><a href="#email">Your email isn't confirmed</a></li></ul>
</div>
<button type="submit" form="refused-settings-notifications-form" data-kit-role="primary-action"><span data-kit-region="label">Save notifications</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send a test message</span></button><a href="#email" data-kit-role="way-back"><span data-kit-region="label">Return to your email</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<div data-kit-layout="settings" data-kit-holds="standing form-or-list" id="layout-settings-consequence">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../settings/?section=hire-rates" aria-current="page"><span data-kit-region="name">Hire rates</span></a></li><li><a data-kit-role="destination" href="../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="consequence-hire-rates">
<h2 id="consequence-hire-rates-title">Hire rates</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-region="standing">
<div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hourly rate now</dt><dd data-kit-region="value" data-kit-role="amount">£24.00</dd></dl></div>
</div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="consequence-settings-rates-form">
<div data-kit-role="form-group" data-kit-width="short">
<label for="consequence-settings-rate">Hourly rate</label>
<input id="consequence-settings-rate" name="rate" value="£28.00" />
<output for="consequence-settings-rate">£28.00</output>
</div>
</form>
<section data-kit-role="inline-consequence" aria-label="New hourly rate">
<h3 data-kit-region="subject">New hourly rate</h3>
<p data-kit-region="consequence">Hirers pay £28.00 an hour instead of £24.00 for bookings they make from then.</p>
<p data-kit-region="effective-time">From 1 April 2025.</p>
<p data-kit-region="correction-path">Change the rate again before then; bookings already made keep their rate.</p>
</section>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="consequence-settings-rates-form" data-kit-role="primary-action"><span data-kit-region="label">Save hire rates</span></button><a href="../settings/import/">Import hire rates</a><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
</main>
</div>
Settings, 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">Settings</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-settings/#layout-settings-refused-undo">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-role="refusal" id="settings-undo-refused-1" role="alert" aria-atomic="true">
<p data-kit-region="line">Undo is refused: the invitation to aisha@oakmereprimary.org expired after you withdrew it.</p>
</div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" href="../../settings/?section=notifications"><span data-kit-region="name">Notifications</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../../settings/?section=invitations" aria-current="page"><span data-kit-region="name">Invitations</span></a></li><li><a data-kit-role="destination" href="../../settings/?section=terms-of-hire"><span data-kit-region="name">Terms of hire</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="invitations">
<h2 id="invitations-title">Invitations</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<article 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">
<span data-kit-region="subject"><span data-kit-region="email"><span><span>margaret<wbr />.hollingsworth<wbr />.hallbookingsecretary@</span><wbr /><span>oakmerewomensinstitute<wbr />.hallbookings.example</span></span></span></span>
<span data-kit-role="stamp" data-kit-state="neutral">Waiting for an answer</span>
</div>
<div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Takes bookings</span></p>
<p data-kit-region="facts"><span data-kit-region="fact">Sent <time datetime="2025-03-10">10 March 2025</time></span></p></div>
</div>
</div>
<div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
</div>
</article>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Invite someone</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
</main>
</div>
Settings, importOpen 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>
<nav data-kit-region="rail" aria-label="Application">
<a data-kit-role="identity" data-kit-region="rail-head" href="?destination=assigned-work#main"><span data-kit-mark aria-hidden="true">H</span><span data-kit-wordmark>Hallkeeper</span></a>
<ul>
<li><a data-kit-role="destination" href="?destination=assigned-work#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Assigned work</span></a></li></ul><ul data-kit-region="destinations">
<li data-kit-region="destination-group">
<p data-kit-region="group-name" id="kit-shell-group-0">Hire days</p>
<ul aria-labelledby="kit-shell-group-0">
<li><a data-kit-role="destination" href="?destination=booking-diary#main"><svg data-kit-icon="calendar" 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,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Diary</span></a></li>
<li><a data-kit-role="destination" href="?destination=checks#main"><svg data-kit-icon="clipboard-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z"/></svg><span data-kit-region="name">Checks</span></a></li>
</ul>
</li>
<li data-kit-region="destination-group">
<ul>
<li><a data-kit-role="destination" href="?destination=invoices#main"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"/></svg><span data-kit-region="name">Invoices</span></a></li>
</ul>
</li>
<li data-kit-region="destination-group">
<ul>
<li><a data-kit-role="destination" data-kit-state="current" href="../../settings/" aria-current="true"><svg data-kit-icon="gear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"/></svg><span data-kit-region="name">Settings</span></a></li>
</ul>
</li>
</ul>
</nav>
<div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">H</span><span data-kit-wordmark>Hallkeeper</span></div></div>
<header data-kit-region="header">
<div>
<nav id="settings-import-trail" aria-label="Breadcrumb" data-kit-role="trail">
<ol>
<li><a href="../../settings/">Settings</a></li>
<li><a href="../../settings/?section=hire-rates">Hire rates</a></li>
</ol>
</nav>
<h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Import hire rates</h1>
<p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
</div>
<div data-kit-region="actions"><a href="../../layout-settings/#layout-settings-import">CSS core</a></div>
</header>
<main data-kit-region="body" id="main">
<div data-kit-layout="stepped-flow">
<div data-kit-region="notices" aria-live="polite"></div>
<ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
<li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
<li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Mapping</span></li>
<li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Preview</span></li>
<li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
</ol>
<form data-kit-region="current-step" id="settings-import-step" aria-labelledby="settings-import-title">
<h2 id="settings-import-title">Match your columns</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-role="form-group" data-kit-width="medium"><label for="settings-import-room">Column for the room</label><input id="settings-import-room" name="room-column" value="Room"><output for="settings-import-room">Room</output></div>
<div data-kit-role="form-group" data-kit-width="medium"><label for="settings-import-rate">Column for the hourly rate</label><input id="settings-import-rate" name="rate-column" value="Rate per hour"><output for="settings-import-rate">Rate per hour</output></div>
</form>
<div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><a href="?step=file#main" data-kit-role="way-back"><span data-kit-region="label">Back to file</span></a><button type="submit" form="settings-import-step" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
</main>
<nav data-kit-region="bottom-bar" aria-label="Application">
<ul data-kit-region="destinations">
<li><a data-kit-role="destination" href="?destination=assigned-work#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Assigned work</span></a></li>
<li><a data-kit-role="destination" href="?destination=booking-diary#main"><svg data-kit-icon="calendar" 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,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Diary</span></a></li>
<li><a data-kit-role="destination" href="?destination=checks#main"><svg data-kit-icon="clipboard-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z"/></svg><span data-kit-region="name">Checks</span></a></li>
<li><a data-kit-role="destination" href="?destination=invoices#main"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"/></svg><span data-kit-region="name">Invoices</span></a></li>
<li><a data-kit-role="destination" data-kit-state="current" href="../../settings/" aria-current="true"><svg data-kit-icon="gear" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"/></svg><span data-kit-region="name">Settings</span></a></li>
</ul>
</nav>
</div>
Settings, inertOpen 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">Settings</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
<div data-kit-region="actions"><a href="../../layout-settings/#layout-settings-inert">CSS core</a></div>
</header>
<main data-kit-region="body">
<div data-kit-layout="settings" data-kit-holds="form-or-list">
<div data-kit-region="notices" aria-live="polite"></div>
<details data-kit-role="disclosure"><summary>Sections</summary><nav data-kit-region="section-index" aria-label="Hall settings"><ul><li><a data-kit-role="destination" href="../../settings/?section=hall-details"><span data-kit-region="name">Hall details</span></a></li><li><a data-kit-role="destination" data-kit-state="current" href="../../settings/?section=notifications" aria-current="page"><span data-kit-region="name">Notifications</span></a></li></ul></nav></details>
<section data-kit-region="selected-section" id="settings-inert-notifications">
<h2 id="settings-inert-title">Notifications</h2>
<div data-kit-region="notices" aria-live="polite"></div>
</section>
<div data-kit-region="form-or-list">
<form method="get" id="settings-inert-form">
<div data-kit-role="form-group" id="settings-inert-digest-form-group">
<label for="settings-inert-digest">Digest</label>
<div data-kit-region="select"><select id="settings-inert-digest" name="digest"><option value="morning">Every morning</option><option value="week">Once a week</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>
<output for="settings-inert-digest">Every morning</output>
</div>
</form>
</div>
<div data-kit-role="action-group" data-kit-region="local-actions" data-kit-holds="words">
<button type="submit" form="settings-inert-form" id="settings-inert-save" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="settings-inert-save-words"><span data-kit-region="label">Save notifications</span></button><p data-kit-region="words" id="settings-inert-save-words">Confirm your email before saving notifications.</p>
<button type="button" id="settings-inert-test" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="settings-inert-test-words"><span data-kit-region="label">Send a test message</span></button><p data-kit-region="words" id="settings-inert-test-words">Confirm your email before sending a test message.</p>
<a href="../../settings/?section=hall-details" data-kit-role="way-back"><span data-kit-region="label">Return to hall details</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div>
</div>
</main>
</div>
|