kit

Home

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

Home

Open 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">Home</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions">
      <button type="button" id="home-new-invoice" data-kit-role="primary-action" commandfor="home-new-invoice-dialog" command="show-modal"><span data-kit-region="label">New invoice</span></button>
      <button type="button" id="home-new-booking" data-kit-role="secondary-action" commandfor="home-new-booking-dialog" command="show-modal"><span data-kit-region="label">New booking</span></button>
      <button type="button" id="home-new-hirer" data-kit-role="secondary-action" commandfor="home-new-hirer-dialog" command="show-modal"><span data-kit-region="label">New hirer</span></button>
      <button type="button" id="home-new-room" data-kit-role="secondary-action" commandfor="home-new-room-dialog" command="show-modal"><span data-kit-region="label">New room</span></button>
      <div id="home-creates" data-kit-role="action-menu"><button type="button" id="home-creates-trigger" data-kit-role="icon-action" aria-label="More New actions" aria-haspopup="menu" aria-controls="home-creates-layer"><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 id="home-creates-layer" data-kit-role="popover" popover="manual" role="menu" aria-labelledby="home-creates-trigger"></ul></div>
      <a href="../layout-home/#layout-home">CSS core</a>
    </div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="home" data-kit-holds="assigned-upcoming measures">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="attention" aria-labelledby="attention-title">
        <h2 id="attention-title">Needs your attention</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <article data-kit-role="attention-item">
          <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
          <p data-kit-region="standing">Failed: the recipient’s address was refused.</p>
          <p data-kit-region="urgency">Correct before sending again.</p>
          <a data-kit-region="route" href="../record/">Review the invoice</a>
        </article>
      </section>
      <section data-kit-region="measures"><div data-kit-region="measure-prior"><div data-kit-role="fact-group">
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-invoiced-name">Invoiced</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-invoiced" aria-labelledby="home-invoiced-name home-invoiced" href="../reports/?report=income&amp;period=last_month&amp;measure=invoiced">£2,096.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd><dd data-kit-region="supporting"><span data-kit-role="amount">£1,872.00</span> previous period ·&nbsp;Up <span data-kit-role="amount">£224.00</span></dd></dl>
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-collected-name">Collected</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-collected" aria-labelledby="home-collected-name home-collected" href="../reports/?report=income&amp;period=last_month&amp;measure=collected">£1,344.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd><dd data-kit-region="supporting"><span data-kit-role="amount">£1,580.00</span> previous period ·&nbsp;Down <span data-kit-role="amount">£236.00</span></dd></dl>
      </div></div></section>
      <section data-kit-region="assigned-upcoming" id="home-assigned" aria-labelledby="assigned-title">
        <h2 id="assigned-title">Assigned to you</h2>
        <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"><a data-kit-region="subject" href="../record/">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Review billing details</span></p><p data-kit-region="facts"><span data-kit-region="fact">Today</span></p></div></div></div></div></article>
      </section>
      <section data-kit-region="followed-changes" aria-labelledby="changes-title">
        <h2 id="changes-title">Followed changes</h2>
        <div data-kit-role="list-line"><a data-kit-region="name" href="../record/">Oakmere Primary School</a><span data-kit-region="description">Maya corrected the billing contact</span><span data-kit-region="age">Just now</span></div>
      </section>
    </div>
    <dialog id="home-new-invoice-dialog" data-kit-role="dialog" aria-labelledby="home-new-invoice-title">
      <h2 data-kit-region="heading" id="home-new-invoice-title">New invoice</h2>
      <div data-kit-region="form-groups">
        <form id="home-new-invoice-form">
          <div data-kit-role="form-group" id="home-new-invoice-hirer">
            <label for="home-new-invoice-hirer-control" id="home-new-invoice-hirer-label">Hirer</label>
            <div data-kit-role="record-picker" data-kit-width="medium" data-kit-query-event="search_hirers" id="home-new-invoice-hirer-control-record-picker">
              <div data-kit-region="control">
                <input id="home-new-invoice-hirer-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="home-new-invoice-hirer-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
                <input type="hidden" name="hirer">
                <ul id="home-new-invoice-hirer-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="home-new-invoice-hirer-label">
                  <li id="home-new-invoice-hirer-control-match-priya-shah" role="option" data-value="priya-shah"><span data-kit-region="match-name">Priya Shah</span><span data-kit-region="match-fact">Leeds</span></li>
                  <li id="home-new-invoice-hirer-control-match-tom-reid" role="option" data-value="tom-reid"><span data-kit-region="match-name">Tom Reid</span><span data-kit-region="match-fact">York</span></li>
                </ul>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-invoice-form" data-kit-role="primary-action"><span data-kit-region="label">Create invoice</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-invoice-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-booking-dialog" data-kit-role="dialog" aria-labelledby="home-new-booking-title">
      <h2 data-kit-region="heading" id="home-new-booking-title">New booking</h2>
      <div data-kit-region="form-groups"><form id="home-new-booking-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-booking-hirer"><label for="home-new-booking-hirer-control">Hirer</label><input id="home-new-booking-hirer-control" name="hirer" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-booking-form" data-kit-role="primary-action"><span data-kit-region="label">Create booking</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-booking-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-hirer-dialog" data-kit-role="dialog" aria-labelledby="home-new-hirer-title">
      <h2 data-kit-region="heading" id="home-new-hirer-title">New hirer</h2>
      <div data-kit-region="form-groups"><form id="home-new-hirer-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-hirer-name"><label for="home-new-hirer-name-control">Name</label><input id="home-new-hirer-name-control" name="name" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-hirer-form" data-kit-role="primary-action"><span data-kit-region="label">Create hirer</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-hirer-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-room-dialog" data-kit-role="dialog" aria-labelledby="home-new-room-title">
      <h2 data-kit-region="heading" id="home-new-room-title">New room</h2>
      <div data-kit-region="form-groups"><form id="home-new-room-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-room-name"><label for="home-new-room-name-control">Name</label><input id="home-new-room-name-control" name="name" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create room</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-room-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <div data-kit-layout="home" id="layout-home-empty-region"><div data-kit-region="notices" aria-live="polite"></div><section data-kit-region="attention" aria-labelledby="empty-region-attention-title"><h2 id="empty-region-attention-title">Needs your attention</h2><div data-kit-region="notices" aria-live="polite"></div></section><section data-kit-region="assigned-upcoming"></section></div>
    <div data-kit-layout="home" data-kit-holds="assigned-upcoming" id="layout-home-page-notice"><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">Your studio hasn’t opened yet</p><p data-kit-region="sentence">Hirers can book once you open bookings.</p></div></div><section data-kit-region="attention"><div data-kit-region="notices" aria-live="polite"></div></section>
      <section data-kit-region="assigned-upcoming" aria-labelledby="page-notice-assigned-title">
        <h2 id="page-notice-assigned-title">Assigned to you</h2>
        <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"><a data-kit-region="subject" href="../record/">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Review billing details</span></p><p data-kit-region="facts"><span data-kit-region="fact">Today</span></p></div></div></div></div></article>
      </section>
    </div>
    <div data-kit-layout="home" data-kit-holds="assigned-upcoming" id="layout-home-routes"><div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="assigned-upcoming" aria-labelledby="routes-assigned-title">
        <h2 id="routes-assigned-title">Assigned to you</h2>
        <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"><a data-kit-region="subject" href="../record/">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Review billing details</span></p><p data-kit-region="facts"><span data-kit-region="fact">Today</span></p></div></div></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"><a data-kit-region="subject" href="../record/">Riverside Choir</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Confirm the Friday hire</span></p><p data-kit-region="facts"><span data-kit-region="fact">Tomorrow</span></p></div></div></div></div></article>
        <div data-kit-role="action-group"><div data-kit-region="routes"><a href="../list/">All your bookings</a><a href="../list/">Bring in older bookings</a></div></div>
      </section>
      <section data-kit-region="followed-changes" aria-labelledby="routes-changes-title">
        <h2 id="routes-changes-title">Followed changes</h2>
        <div data-kit-role="headed-region"><h3 data-kit-region="heading">Bookings</h3><div data-kit-region="content"><div data-kit-role="list-line"><a data-kit-region="name" href="../record/">Oakmere Primary School</a><span data-kit-region="description">Maya corrected the billing contact</span><span data-kit-region="age">Just now</span></div><div data-kit-role="action-group"><div data-kit-region="routes"><a href="../list/">Every followed booking</a></div></div></div></div>
      </section>
    </div>
    <div data-kit-layout="home" id="layout-home-dialog-steps"><div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="attention"><div data-kit-region="notices" aria-live="polite"></div><section data-kit-region="setup-checklist">
        <div data-kit-role="headed-region"><h2 data-kit-region="heading">Set up your hall <span data-kit-region="steps-done">1 of 3 done</span></h2><div data-kit-region="content">
        <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">Add the rooms people can hire</span><span data-kit-role="stamp" data-kit-state="settled">Done</span></div></div></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"><button type="button" data-kit-role="emphasised-next-action" commandfor="layout-home-new-hirer" command="show-modal"><span data-kit-region="label">Add your first hirer</span></button></span><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div></div></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"><button type="button" data-kit-region="subject" commandfor="layout-home-new-booking" command="show-modal">Take your first booking</button><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div></div></div></div></article></div></div>
      </section></section>
    </div>
    <dialog id="layout-home-new-hirer" data-kit-role="dialog" aria-labelledby="layout-home-new-hirer-title">
      <h2 data-kit-region="heading" id="layout-home-new-hirer-title">New hirer</h2>
      <div data-kit-region="form-groups">
        <form id="layout-home-new-hirer-form">
          <div data-kit-role="form-group" data-kit-width="medium" id="layout-home-new-hirer-name">
            <label for="layout-home-new-hirer-name-control">Name</label>
            <input id="layout-home-new-hirer-name-control" name="name" type="text">
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions">
        <button type="submit" form="layout-home-new-hirer-form" data-kit-role="primary-action"><span data-kit-region="label">Create hirer</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="layout-home-new-hirer" command="close"><span data-kit-region="label">Cancel</span></button>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div></dialog>
    <dialog id="layout-home-new-booking" data-kit-role="dialog" aria-labelledby="layout-home-new-booking-title">
      <h2 data-kit-region="heading" id="layout-home-new-booking-title">New booking</h2>
      <div data-kit-region="form-groups">
        <form id="layout-home-new-booking-form">
          <div data-kit-role="form-group" data-kit-width="medium" id="layout-home-new-booking-hirer">
            <label for="layout-home-new-booking-hirer-control">Hirer</label>
            <input id="layout-home-new-booking-hirer-control" name="hirer" type="text">
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions">
        <button type="submit" form="layout-home-new-booking-form" data-kit-role="primary-action"><span data-kit-region="label">Create booking</span></button>
        <button type="button" data-kit-role="secondary-action" commandfor="layout-home-new-booking" command="close"><span data-kit-region="label">Cancel</span></button>
      </div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
    </div></dialog>
  </main>
</div>
    <template id="home-create-toast-template">
      <div id="home-create-toast" data-kit-role="toast" data-kit-confirmation-id="home-create">
        <p data-kit-region="line" role="status" aria-atomic="true">Invoice created.</p>
        <div data-kit-region="actions">
          <button type="button" data-kit-role="secondary-action" data-kit-region="undo"><span data-kit-region="label">Undo</span></button>
          <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><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>
    </template>
    <template id="home-create-undone-toast-template">
      <div id="home-create-toast" data-kit-role="toast" data-kit-confirmation-id="home-create-undone">
        <p data-kit-region="line" role="status" aria-atomic="true">Invoice creation undone.</p>
        <div data-kit-region="actions">
          <button type="button" data-kit-role="secondary-action" data-kit-region="redo"><span data-kit-region="label">Redo</span></button>
          <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><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>
    </template>

Home, new-tenant

Open 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">Home</h1><p data-kit-region="lede"><span>CSS core</span><span>New tenant</span></p></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="home" data-kit-holds="measures">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="attention"><div data-kit-region="notices" aria-live="polite"></div>
        <section data-kit-region="setup-checklist">
          <div data-kit-role="headed-region"><h2 data-kit-region="heading">Set up your hall <span data-kit-region="steps-done">1 of 4 done</span></h2><div data-kit-region="content">
          <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">Add the rooms people can hire</span><span data-kit-role="stamp" data-kit-state="settled">Done</span></div></div></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"><a data-kit-region="subject" href="../../settings/">Open bookings</a><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Needs hire rates first</span></p></div></div></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"><a data-kit-role="emphasised-next-action" href="../../settings/"><span data-kit-region="label">Set your hire rates</span></a></span><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div></div></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"><a data-kit-region="subject" href="../../calendar/">Take your first booking</a><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div></div></div></div></article></div></div>
        </section>
      </section>
      <section data-kit-region="measures"><div data-kit-region="measure-prior"><div data-kit-role="fact-group">
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-invoiced-name">Invoiced</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-invoiced" aria-labelledby="home-invoiced-name home-invoiced" href="../../reports/?report=income&amp;period=last_month&amp;measure=invoiced">£0.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd></dl>
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-collected-name">Collected</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-collected" aria-labelledby="home-collected-name home-collected" href="../../reports/?report=income&amp;period=last_month&amp;measure=collected">£0.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd></dl>
      </div></div></section>
    </div>
  </main>
</div>

Home, loading

Open 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">Home</h1><p data-kit-region="lede"><span>CSS core</span><span>Measures loading</span></p></div>
    <div data-kit-region="actions">
      <button type="button" id="home-new-invoice" data-kit-role="primary-action" commandfor="home-new-invoice-dialog" command="show-modal"><span data-kit-region="label">New invoice</span></button>
      <button type="button" id="home-new-booking" data-kit-role="secondary-action" commandfor="home-new-booking-dialog" command="show-modal"><span data-kit-region="label">New booking</span></button>
      <button type="button" id="home-new-hirer" data-kit-role="secondary-action" commandfor="home-new-hirer-dialog" command="show-modal"><span data-kit-region="label">New hirer</span></button>
      <button type="button" id="home-new-room" data-kit-role="secondary-action" commandfor="home-new-room-dialog" command="show-modal"><span data-kit-region="label">New room</span></button>
      <div id="home-creates" data-kit-role="action-menu"><button type="button" id="home-creates-trigger" data-kit-role="icon-action" aria-label="More New actions" aria-haspopup="menu" aria-controls="home-creates-layer"><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 id="home-creates-layer" data-kit-role="popover" popover="manual" role="menu" aria-labelledby="home-creates-trigger"></ul></div>
      <a href="../../layout-home/#layout-home-loading">CSS core</a>
    </div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="home" data-kit-holds="assigned-upcoming measures">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="attention" aria-labelledby="attention-title">
        <h2 id="attention-title">Needs your attention</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <article data-kit-role="attention-item">
          <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
          <p data-kit-region="standing">Failed: the recipient’s address was refused.</p>
          <p data-kit-region="urgency">Correct before sending again.</p>
          <a data-kit-region="route" href="../../record/">Review the invoice</a>
        </article>
      </section>
      <section data-kit-region="measures"><div data-kit-region="measure-prior" data-kit-state="loading" aria-busy="true" data-kit-print-loading="The measures had not loaded."><div data-kit-role="fact-group">
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-invoiced-name">Invoiced</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-invoiced" aria-labelledby="home-invoiced-name home-invoiced" href="../../reports/?report=income&amp;period=last_month&amp;measure=invoiced">£2,096.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd><dd data-kit-region="supporting"><span data-kit-role="amount">£1,872.00</span> previous period ·&nbsp;Up <span data-kit-role="amount">£224.00</span></dd></dl>
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="home-collected-name">Collected</dt><dd data-kit-region="value" data-kit-role="amount"><a id="home-collected" aria-labelledby="home-collected-name home-collected" href="../../reports/?report=income&amp;period=last_month&amp;measure=collected">£1,344.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd><dd data-kit-region="supporting"><span data-kit-role="amount">£1,580.00</span> previous period ·&nbsp;Down <span data-kit-role="amount">£236.00</span></dd></dl>
      </div></div></section>
      <section data-kit-region="assigned-upcoming" id="home-assigned" aria-labelledby="assigned-title">
        <h2 id="assigned-title">Assigned to you</h2>
        <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"><a data-kit-region="subject" href="../../record/">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Review billing details</span></p><p data-kit-region="facts"><span data-kit-region="fact">Today</span></p></div></div></div></div></article>
      </section>
      <section data-kit-region="followed-changes" aria-labelledby="changes-title">
        <h2 id="changes-title">Followed changes</h2>
        <div data-kit-role="list-line"><a data-kit-region="name" href="../../record/">Oakmere Primary School</a><span data-kit-region="description">Maya corrected the billing contact</span><span data-kit-region="age">Just now</span></div>
      </section>
    </div>
    <dialog id="home-new-invoice-dialog" data-kit-role="dialog" aria-labelledby="home-new-invoice-title">
      <h2 data-kit-region="heading" id="home-new-invoice-title">New invoice</h2>
      <div data-kit-region="form-groups">
        <form id="home-new-invoice-form">
          <div data-kit-role="form-group" id="home-new-invoice-hirer">
            <label for="home-new-invoice-hirer-control" id="home-new-invoice-hirer-label">Hirer</label>
            <div data-kit-role="record-picker" data-kit-width="medium" data-kit-query-event="search_hirers" id="home-new-invoice-hirer-control-record-picker">
              <div data-kit-region="control">
                <input id="home-new-invoice-hirer-control" type="text" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="home-new-invoice-hirer-control-matches" autocomplete="off" autocapitalize="none" autocorrect="off" spellcheck="false">
                <input type="hidden" name="hirer">
                <ul id="home-new-invoice-hirer-control-matches" data-kit-role="popover" data-kit-region="matches" popover="manual" role="listbox" aria-labelledby="home-new-invoice-hirer-label">
                  <li id="home-new-invoice-hirer-control-match-priya-shah" role="option" data-value="priya-shah"><span data-kit-region="match-name">Priya Shah</span><span data-kit-region="match-fact">Leeds</span></li>
                  <li id="home-new-invoice-hirer-control-match-tom-reid" role="option" data-value="tom-reid"><span data-kit-region="match-name">Tom Reid</span><span data-kit-region="match-fact">York</span></li>
                </ul>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-invoice-form" data-kit-role="primary-action"><span data-kit-region="label">Create invoice</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-invoice-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-booking-dialog" data-kit-role="dialog" aria-labelledby="home-new-booking-title">
      <h2 data-kit-region="heading" id="home-new-booking-title">New booking</h2>
      <div data-kit-region="form-groups"><form id="home-new-booking-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-booking-hirer"><label for="home-new-booking-hirer-control">Hirer</label><input id="home-new-booking-hirer-control" name="hirer" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-booking-form" data-kit-role="primary-action"><span data-kit-region="label">Create booking</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-booking-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-hirer-dialog" data-kit-role="dialog" aria-labelledby="home-new-hirer-title">
      <h2 data-kit-region="heading" id="home-new-hirer-title">New hirer</h2>
      <div data-kit-region="form-groups"><form id="home-new-hirer-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-hirer-name"><label for="home-new-hirer-name-control">Name</label><input id="home-new-hirer-name-control" name="name" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-hirer-form" data-kit-role="primary-action"><span data-kit-region="label">Create hirer</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-hirer-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
    <dialog id="home-new-room-dialog" data-kit-role="dialog" aria-labelledby="home-new-room-title">
      <h2 data-kit-region="heading" id="home-new-room-title">New room</h2>
      <div data-kit-region="form-groups"><form id="home-new-room-form"><div data-kit-role="form-group" data-kit-width="medium" id="home-new-room-name"><label for="home-new-room-name-control">Name</label><input id="home-new-room-name-control" name="name" type="text"></div></form></div>
      <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="home-new-room-form" data-kit-role="primary-action"><span data-kit-region="label">Create room</span></button><button type="button" data-kit-role="secondary-action" commandfor="home-new-room-dialog" command="close"><span data-kit-region="label">Cancel</span></button></div><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </dialog>
  </main>
</div>
    <template id="home-create-toast-template">
      <div id="home-create-toast" data-kit-role="toast" data-kit-confirmation-id="home-create">
        <p data-kit-region="line" role="status" aria-atomic="true">Invoice created.</p>
        <div data-kit-region="actions">
          <button type="button" data-kit-role="secondary-action" data-kit-region="undo"><span data-kit-region="label">Undo</span></button>
          <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><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>
    </template>
    <template id="home-create-undone-toast-template">
      <div id="home-create-toast" data-kit-role="toast" data-kit-confirmation-id="home-create-undone">
        <p data-kit-region="line" role="status" aria-atomic="true">Invoice creation undone.</p>
        <div data-kit-region="actions">
          <button type="button" data-kit-role="secondary-action" data-kit-region="redo"><span data-kit-region="label">Redo</span></button>
          <button type="button" data-kit-role="icon-action" data-kit-region="close" aria-label="Close"><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>
    </template>

Home, assigned-upcoming-first

Open 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">Home</h1><p data-kit-region="lede"><span>CSS core</span><span>Assigned or upcoming work first</span></p></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="home" data-kit-first="assigned-upcoming" data-kit-holds="assigned-upcoming measures">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="assigned-upcoming" aria-labelledby="first-assigned-title">
        <h2 id="first-assigned-title">Your bookings today</h2>
        <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"><a data-kit-region="subject" href="../../record/">Riverside Choir</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main hall</span></p><p data-kit-region="facts"><span data-kit-region="fact">10:00 to 12:00</span></p></div></div></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"><a data-kit-region="subject" href="../../record/">Oakmere Primary School</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Small hall</span></p><p data-kit-region="facts"><span data-kit-region="fact">13:30 to 15:00</span></p></div></div></div></div></article>
      </section>
      <section data-kit-region="attention" aria-labelledby="first-attention-title">
        <section data-kit-region="setup-checklist">
          <div data-kit-role="headed-region"><h2 data-kit-region="heading">Set up your hall <span data-kit-region="steps-done">1 of 2 done</span></h2><div data-kit-region="content">
          <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">Add the rooms people can hire</span><span data-kit-role="stamp" data-kit-state="settled">Done</span></div></div></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"><a data-kit-role="emphasised-next-action" href="../../settings/"><span data-kit-region="label">Set your hire rates</span></a></span><span data-kit-role="stamp" data-kit-state="neutral">To do</span></div></div></div></div></article></div></div>
        </section>
        <h2 id="first-attention-title">Needs your attention</h2>
        <div data-kit-region="notices" aria-live="polite"></div>
        <article data-kit-role="attention-item">
          <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
          <p data-kit-region="standing">Failed: the recipient’s address was refused.</p>
          <p data-kit-region="urgency">Correct before sending again.</p>
          <a data-kit-region="route" href="../../record/">Review the invoice</a>
        </article>
      </section>
      <section data-kit-region="measures"><div data-kit-region="measure-prior"><div data-kit-role="fact-group">
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="first-invoiced-name">Invoiced</dt><dd data-kit-region="value" data-kit-role="amount"><a id="first-invoiced" aria-labelledby="first-invoiced-name first-invoiced" href="../../reports/?report=income&amp;period=last_month&amp;measure=invoiced">£2,096.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd></dl>
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name" id="first-collected-name">Collected</dt><dd data-kit-region="value" data-kit-role="amount"><a id="first-collected" aria-labelledby="first-collected-name first-collected" href="../../reports/?report=income&amp;period=last_month&amp;measure=collected">£1,344.00</a></dd><dd data-kit-region="supporting"><time datetime="2025-02-01">February 2025</time></dd></dl>
      </div></div></section>
      <section data-kit-region="followed-changes" aria-labelledby="first-changes-title">
        <h2 id="first-changes-title">Followed changes</h2>
        <div data-kit-role="list-line"><a data-kit-region="name" href="../../record/">Riverside Choir</a><span data-kit-region="description">Maya moved the Friday hire to the main hall</span><span data-kit-region="age">Just now</span></div>
      </section>
    </div>
  </main>
</div>