Help

<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">Help</h1>
        <p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
      </div>
      <div data-kit-region="actions"><a href="../layout-help/#layout-help">CSS core</a></div>
    </header>
    <main data-kit-region="body" id="main">
      <div data-kit-layout="help">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="topic">
          <span>Use the CSS core</span>
        </div>
        <details data-kit-role="disclosure">
          <summary>Topics</summary>
          <nav data-kit-region="topic-index" aria-label="Topics">
            <ul>
              <li>
                <a data-kit-role="destination" data-kit-state="current" href="../help/" aria-current="page"><span data-kit-region="name">Use the CSS core</span></a>
                <ul>
                  <li><a data-kit-role="destination" href="../help/"><span data-kit-region="name">Load the stylesheet</span></a></li>
                  <li><a data-kit-role="destination" href="../help/"><span data-kit-region="name">Set the density</span></a></li>
                  <li><a data-kit-role="destination" href="../help/"><span data-kit-region="name">Copy a layout</span></a></li>
                </ul>
              </li>
            </ul>
            <a id="help-keyboard-sheet-opener" data-kit-opens="keyboard-sheet" href="#help-keyboard-sheet">Keyboard shortcuts</a>
          </nav>
        </details>
        <section data-kit-region="human-support" id="support" aria-labelledby="support-title">
          <div data-kit-role="headed-region">
            <h2 data-kit-region="heading" id="support-title">Human support</h2>
            <div data-kit-region="content"><a data-kit-role="secondary-action" href="mailto:support@example.test"><span data-kit-region="label">Write to support</span></a></div>
          </div>
        </section>
        <article>
          <section data-kit-region="answer" id="answer" aria-labelledby="stylesheet">
            <div data-kit-region="notices" aria-live="polite"></div>
            <p>Find the entry that matches the surface you are composing, <a href="#actions">then copy the HTML for the layout or role you need</a>, keeping the standard’s names as they stand.</p>
            <h2 id="stylesheet">Load the stylesheet</h2>
            <p>Load <code>kit.css</code> once, at the top of every page. Keep its fonts and icons in the folder beside the stylesheet, at the paths they ship with.</p>
            <h2 id="density">Set the density</h2>
            <p>Select the actor’s density on the surface with <code>data-kit-density="desk"</code>. Narrowing the page changes its arrangement, not its density.</p>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose">
                <caption>Which density to select</caption>
                <thead>
                  <tr>
                    <th scope="col">Density</th>
                    <th scope="col">Work</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">Desk</th>
                    <td><div data-kit-region="fact">Scan-dense</div></td>
                  </tr>
                  <tr>
                    <th scope="row">Field</th>
                    <td><div data-kit-region="fact">Focused</div></td>
                  </tr>
                </tbody>
              </table></div>
            </div>
            <h2 id="actions">Copy a layout</h2>
            <ol>
              <li>Open the page for the layout or role you need and read its example; the entry’s name is its density, and the window’s width settles the arrangement.</li>
              <li>Copy the HTML as it stands.</li>
              <li>Put your own words, links and native attributes in its place.</li>
            </ol>
            <p>A row copied out of its entry, with a hirer’s own booking put in place of the sample, reads like this:</p>
            <pre><code>&lt;article data-kit-role="row"&gt;
  &lt;label data-kit-region="selection"&gt;&lt;input data-kit-role="selection-control" type="checkbox" name="booking" value="oakmere-12-april"&gt;&lt;span&gt;Select Oakmere Primary School, Main Hall, 12 April 2025&lt;/span&gt;&lt;/label&gt;
  &lt;div data-kit-region="content-column"&gt;
    &lt;div data-kit-region="subject-column"&gt;
      &lt;div data-kit-region="line"&gt;
        &lt;div data-kit-region="subject-stamp"&gt;
          &lt;a data-kit-region="subject" href="/bookings/oakmere-primary-school/12-april/"&gt;Oakmere Primary School&lt;/a&gt;
          &lt;span data-kit-role="stamp" data-kit-state="neutral"&gt;Awaiting payment&lt;/span&gt;
        &lt;/div&gt;
        &lt;p data-kit-region="facts"&gt;&lt;span data-kit-region="fact"&gt;Main Hall · 12 April 2025, 09:00–13:00 · £84.00 due on invoice BH2025041209001300MAINHALL00840&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
            <p>The row’s own regions carry the booking; nothing is added around them.</p>
            <div>
              <p>Keep the example’s attributes as they are. The action keeps its label and dimensions while a submission waits, and the standing stays beside it.</p>
              <ul>
                <li>Keep every <code>data-kit-role</code> and <code>data-kit-region</code> attribute as the example has it, including the ones that look as though nothing reads them.</li>
                <li>Add no class, style or wrapper of your own.</li>
                <li>Set the density once, on the surface.</li>
              </ul>
            </div>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose" data-kit-print-form="rows">
                <caption>Whole-page examples and what each one holds</caption>
                <thead>
                  <tr>
                    <th scope="col">Example</th>
                    <th scope="col"><abbr title="Page address">URL</abbr></th>
                    <th scope="col">Selection</th>
                    <th scope="col">Regions it fills</th>
                    <th scope="col">Where the actor meets it</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Shell</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/shell/desk/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">Desk</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Identity strip, header, body</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">Scan-dense work</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Shell</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/shell/field/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">Field</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Header, body, navigation</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">Focused work</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Help</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/help/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Topic, index, answer, human support</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">One question answered</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Record</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/record/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Facts, decision, work, notes</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">One record under work</div></div></td>
                  </tr>
                </tbody>
              </table></div>
            </div>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose" data-kit-print-form="rows">
                <caption>What each room includes</caption>
                <thead><tr><th scope="col">Room</th><th scope="col">Capacity</th><th scope="col">Weekdays</th><th scope="col">Weekends</th><th scope="col">Deposit</th><th scope="col">Kitchen</th><th scope="col">Accessibility</th><th scope="col">Soundproofing</th><th scope="col">Refreshments</th><th scope="col">Parking</th><th scope="col">Cancellation</th><th scope="col">Availability</th><th scope="col">Projector</th><th scope="col">Microphones</th><th scope="col">Staging</th><th scope="col">Lighting</th><th scope="col">Heating</th><th scope="col">Storage</th><th scope="col">Cloakroom</th><th scope="col">Toilets</th></tr></thead>
                <tbody>
                  <tr><th scope="row" data-label="Room"><div data-kit-region="value">Main Hall</div></th><td data-label="Capacity"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">120&nbsp;seated</div></div></td><td data-label="Weekdays"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£24.00</span> an hour</div></div></td><td data-label="Weekends"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£32.00</span> an hour</div></div></td><td data-label="Deposit"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></div></td><td data-label="Kitchen"><div data-kit-region="value"><div data-kit-region="fact">Full kitchen</div></div></td><td data-label="Accessibility"><div data-kit-region="value"><div data-kit-region="fact">Step-free entrance</div></div></td><td data-label="Soundproofing"><div data-kit-region="value"><div data-kit-region="fact">Partial</div></div></td><td data-label="Refreshments"><div data-kit-region="value"><div data-kit-region="fact">Tea and coffee</div></div></td><td data-label="Parking"><div data-kit-region="value"><div data-kit-region="fact">Twelve spaces</div></div></td><td data-label="Cancellation"><div data-kit-region="value"><div data-kit-region="fact">Fourteen days</div></div></td><td data-label="Availability"><div data-kit-region="value"><div data-kit-region="fact">Mornings and evenings</div></div></td><td data-label="Projector"><div data-kit-region="value"><div data-kit-region="fact">Ceiling mounted</div></div></td><td data-label="Microphones"><div data-kit-region="value"><div data-kit-region="fact">Two wireless</div></div></td><td data-label="Staging"><div data-kit-region="value"><div data-kit-region="fact">Raised stage</div></div></td><td data-label="Lighting"><div data-kit-region="value"><div data-kit-region="fact">Dimmable</div></div></td><td data-label="Heating"><div data-kit-region="value"><div data-kit-region="fact">Included</div></div></td><td data-label="Storage"><div data-kit-region="value"><div data-kit-region="fact">Locked cupboard</div></div></td><td data-label="Cloakroom"><div data-kit-region="value"><div data-kit-region="fact">Staffed</div></div></td><td data-label="Toilets"><div data-kit-region="value"><div data-kit-region="fact">Four</div></div></td></tr>
                  <tr><th scope="row" data-label="Room"><div data-kit-region="value">Small Hall</div></th><td data-label="Capacity"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">40&nbsp;seated</div></div></td><td data-label="Weekdays"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£14.00</span> an hour</div></div></td><td data-label="Weekends"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£18.00</span> an hour</div></div></td><td data-label="Deposit"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£25.00</div></div></td><td data-label="Kitchen"><div data-kit-region="value"><div data-kit-region="fact">Kettle only</div></div></td><td data-label="Accessibility"><div data-kit-region="value"><div data-kit-region="fact">Step-free entrance</div></div></td><td data-label="Soundproofing"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Refreshments"><div data-kit-region="value"><div data-kit-region="fact">Tea and coffee</div></div></td><td data-label="Parking"><div data-kit-region="value"><div data-kit-region="fact">Street only</div></div></td><td data-label="Cancellation"><div data-kit-region="value"><div data-kit-region="fact">Seven days</div></div></td><td data-label="Availability"><div data-kit-region="value"><div data-kit-region="fact">Afternoons</div></div></td><td data-label="Projector"><div data-kit-region="value"><div data-kit-region="fact">Portable</div></div></td><td data-label="Microphones"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Staging"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Lighting"><div data-kit-region="value"><div data-kit-region="fact">Fixed</div></div></td><td data-label="Heating"><div data-kit-region="value"><div data-kit-region="fact">Included</div></div></td><td data-label="Storage"><div data-kit-region="value"><div data-kit-region="fact">Shelving</div></div></td><td data-label="Cloakroom"><div data-kit-region="value"><div data-kit-region="fact">Unstaffed</div></div></td><td data-label="Toilets"><div data-kit-region="value"><div data-kit-region="fact">Two</div></div></td></tr>
                </tbody>
              </table></div>
            </div>
          </section>
          <div data-kit-region="next-route"><a href="../layout-help/#layout-help" data-kit-role="way-back"><span data-kit-region="label">Return to CSS core</span></a></div>
        </article>
      </div>
      <div data-kit-layout="help">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="topic"><span>Load the stylesheet</span></div>
        <details data-kit-role="disclosure">
          <summary>Topics</summary>
          <nav data-kit-region="topic-index" aria-label="Topics">
            <ul>
              <li><a data-kit-role="destination" data-kit-state="current" href="../help/" aria-current="page"><span data-kit-region="name">Load the stylesheet</span></a></li>
              <li><a data-kit-role="destination" href="../help/"><span data-kit-region="name">Set the density</span></a></li>
            </ul>
          </nav>
        </details>
        <section data-kit-region="human-support" aria-labelledby="inert-support-title">
          <div data-kit-role="headed-region">
            <h2 data-kit-region="heading" id="inert-support-title">Human support</h2>
            <div data-kit-region="content"><button type="button" id="help-write-to-support" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="help-write-to-support-words"><span data-kit-region="label">Write to support</span></button><p data-kit-region="words" id="help-write-to-support-words">Support is closed until Monday morning.</p></div>
          </div>
        </section>
        <article>
          <section data-kit-region="answer">
            <div data-kit-region="notices" aria-live="polite"></div>
            <p>Link the stylesheet in the page head.</p>
          </section>
        </article>
      </div>
      <div data-kit-layout="help">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="topic"><span>Load the stylesheet</span></div>
        <details data-kit-role="disclosure">
          <summary>Topics</summary>
          <nav data-kit-region="topic-index" aria-label="Topics">
            <ul>
              <li><a data-kit-role="destination" data-kit-state="current" href="../help/" aria-current="page"><span data-kit-region="name">Load the stylesheet</span></a></li>
              <li><a data-kit-role="destination" href="../help/"><span data-kit-region="name">Set the density</span></a></li>
            </ul>
          </nav>
        </details>
        <section data-kit-region="human-support">
          <div data-kit-role="headed-region">
            <h2 data-kit-region="heading">Human support</h2>
            <div data-kit-region="content"></div>
          </div>
        </section>
        <article>
          <section data-kit-region="answer">
            <div data-kit-region="notices" aria-live="polite"></div>
            <p>This answer is not written yet.</p>
          </section>
        </article>
      </div>
    </main>
    <dialog id="help-keyboard-sheet" data-kit-role="keyboard-sheet" aria-labelledby="help-shortcut-sheet-title">
      <h2 data-kit-region="heading" id="help-shortcut-sheet-title">Keyboard shortcuts</h2>
      <div data-kit-region="groups">
        <section data-kit-region="group" aria-labelledby="help-shortcut-navigation-title">
          <h3 data-kit-region="heading" id="help-shortcut-navigation-title">Find and navigate</h3>
          <ul data-kit-region="shortcuts">
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Find</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">/</kbd></span>
            </li>
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Today</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">t</kbd></span>
            </li>
          </ul>
        </section>
        <section data-kit-region="group" aria-labelledby="help-shortcut-booking-title">
          <h3 data-kit-region="heading" id="help-shortcut-booking-title">Booking work</h3>
          <ul data-kit-region="shortcuts">
            <li data-kit-region="shortcut">
              <span data-kit-region="name">New booking</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span>
            </li>
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Keyboard sheet</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">?</kbd></span>
            </li>
          </ul>
        </section>
      </div>
      <div data-kit-region="actions">
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Close shortcuts</span></button>
      </div>
    </dialog>
</div>

<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">Help</h1>
        <p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
      </div>
      <div data-kit-region="actions"><a href="../../layout-help/#layout-help-refused-undo">CSS core</a></div>
    </header>
    <main data-kit-region="body" id="main">
      <div data-kit-layout="help">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="refusal" id="help-undo-refused-1" role="alert" aria-atomic="true">
          <p data-kit-region="line">Undo is refused: support has already read the message you withdrew.</p>
          <ul data-kit-region="causes"><li><a href="#support">Human support</a></li></ul>
        </div>
        <div data-kit-region="topic">
          <span>Use the CSS core</span>
        </div>
        <details data-kit-role="disclosure">
          <summary>Topics</summary>
          <nav data-kit-region="topic-index" aria-label="Topics">
            <ul>
              <li>
                <a data-kit-role="destination" data-kit-state="current" href="../../help/" aria-current="page"><span data-kit-region="name">Use the CSS core</span></a>
                <ul>
                  <li><a data-kit-role="destination" href="../../help/"><span data-kit-region="name">Load the stylesheet</span></a></li>
                  <li><a data-kit-role="destination" href="../../help/"><span data-kit-region="name">Set the density</span></a></li>
                  <li><a data-kit-role="destination" href="../../help/"><span data-kit-region="name">Copy a layout</span></a></li>
                </ul>
              </li>
            </ul>
            <a id="help-keyboard-sheet-opener" data-kit-opens="keyboard-sheet" href="#help-keyboard-sheet">Keyboard shortcuts</a>
          </nav>
        </details>
        <section data-kit-region="human-support" id="support" aria-labelledby="support-title">
          <div data-kit-role="headed-region">
            <h2 data-kit-region="heading" id="support-title">Human support</h2>
            <div data-kit-region="content"><a data-kit-role="secondary-action" href="mailto:support@example.test"><span data-kit-region="label">Write to support</span></a></div>
          </div>
        </section>
        <article>
          <section data-kit-region="answer" id="answer" aria-labelledby="stylesheet">
            <div data-kit-region="notices" aria-live="polite"></div>
            <p>Find the entry that matches the surface you are composing, <a href="#actions">then copy the HTML for the layout or role you need</a>, keeping the standard’s names as they stand.</p>
            <h2 id="stylesheet">Load the stylesheet</h2>
            <p>Load <code>kit.css</code> once, at the top of every page. Keep its fonts and icons in the folder beside the stylesheet, at the paths they ship with.</p>
            <h2 id="density">Set the density</h2>
            <p>Select the actor’s density on the surface with <code>data-kit-density="desk"</code>. Narrowing the page changes its arrangement, not its density.</p>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose">
                <caption>Which density to select</caption>
                <thead>
                  <tr>
                    <th scope="col">Density</th>
                    <th scope="col">Work</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th scope="row">Desk</th>
                    <td><div data-kit-region="fact">Scan-dense</div></td>
                  </tr>
                  <tr>
                    <th scope="row">Field</th>
                    <td><div data-kit-region="fact">Focused</div></td>
                  </tr>
                </tbody>
              </table></div>
            </div>
            <h2 id="actions">Copy a layout</h2>
            <ol>
              <li>Open the page for the layout or role you need and read its example; the entry’s name is its density, and the window’s width settles the arrangement.</li>
              <li>Copy the HTML as it stands.</li>
              <li>Put your own words, links and native attributes in its place.</li>
            </ol>
            <p>A row copied out of its entry, with a hirer’s own booking put in place of the sample, reads like this:</p>
            <pre><code>&lt;article data-kit-role="row"&gt;
  &lt;label data-kit-region="selection"&gt;&lt;input data-kit-role="selection-control" type="checkbox" name="booking" value="oakmere-12-april"&gt;&lt;span&gt;Select Oakmere Primary School, Main Hall, 12 April 2025&lt;/span&gt;&lt;/label&gt;
  &lt;div data-kit-region="content-column"&gt;
    &lt;div data-kit-region="subject-column"&gt;
      &lt;div data-kit-region="line"&gt;
        &lt;div data-kit-region="subject-stamp"&gt;
          &lt;a data-kit-region="subject" href="/bookings/oakmere-primary-school/12-april/"&gt;Oakmere Primary School&lt;/a&gt;
          &lt;span data-kit-role="stamp" data-kit-state="neutral"&gt;Awaiting payment&lt;/span&gt;
        &lt;/div&gt;
        &lt;p data-kit-region="facts"&gt;&lt;span data-kit-region="fact"&gt;Main Hall · 12 April 2025, 09:00–13:00 · £84.00 due on invoice BH2025041209001300MAINHALL00840&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/article&gt;</code></pre>
            <p>The row’s own regions carry the booking; nothing is added around them.</p>
            <div>
              <p>Keep the example’s attributes as they are. The action keeps its label and dimensions while a submission waits, and the standing stays beside it.</p>
              <ul>
                <li>Keep every <code>data-kit-role</code> and <code>data-kit-region</code> attribute as the example has it, including the ones that look as though nothing reads them.</li>
                <li>Add no class, style or wrapper of your own.</li>
                <li>Set the density once, on the surface.</li>
              </ul>
            </div>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose" data-kit-print-form="rows">
                <caption>Whole-page examples and what each one holds</caption>
                <thead>
                  <tr>
                    <th scope="col">Example</th>
                    <th scope="col"><abbr title="Page address">URL</abbr></th>
                    <th scope="col">Selection</th>
                    <th scope="col">Regions it fills</th>
                    <th scope="col">Where the actor meets it</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Shell</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/shell/desk/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">Desk</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Identity strip, header, body</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">Scan-dense work</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Shell</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/shell/field/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">Field</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Header, body, navigation</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">Focused work</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Help</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/help/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Topic, index, answer, human support</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">One question answered</div></div></td>
                  </tr>
                  <tr>
                    <td data-label="Example"><div data-kit-region="value"><div data-kit-region="fact">Record</div></div></td>
                    <td data-label="Page address"><div data-kit-region="value"><div data-kit-region="fact"><code>/record/</code></div></div></td>
                    <td data-label="Selection"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td>
                    <td data-label="Regions it fills"><div data-kit-region="value"><div data-kit-region="fact">Facts, decision, work, notes</div></div></td>
                    <td data-label="Where the actor meets it"><div data-kit-region="value"><div data-kit-region="fact">One record under work</div></div></td>
                  </tr>
                </tbody>
              </table></div>
            </div>
            <div data-kit-region="table" tabindex="0">
              <div><table data-kit-table="prose" data-kit-print-form="rows">
                <caption>What each room includes</caption>
                <thead><tr><th scope="col">Room</th><th scope="col">Capacity</th><th scope="col">Weekdays</th><th scope="col">Weekends</th><th scope="col">Deposit</th><th scope="col">Kitchen</th><th scope="col">Accessibility</th><th scope="col">Soundproofing</th><th scope="col">Refreshments</th><th scope="col">Parking</th><th scope="col">Cancellation</th><th scope="col">Availability</th><th scope="col">Projector</th><th scope="col">Microphones</th><th scope="col">Staging</th><th scope="col">Lighting</th><th scope="col">Heating</th><th scope="col">Storage</th><th scope="col">Cloakroom</th><th scope="col">Toilets</th></tr></thead>
                <tbody>
                  <tr><th scope="row" data-label="Room"><div data-kit-region="value">Main Hall</div></th><td data-label="Capacity"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">120&nbsp;seated</div></div></td><td data-label="Weekdays"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£24.00</span> an hour</div></div></td><td data-label="Weekends"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£32.00</span> an hour</div></div></td><td data-label="Deposit"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£50.00</div></div></td><td data-label="Kitchen"><div data-kit-region="value"><div data-kit-region="fact">Full kitchen</div></div></td><td data-label="Accessibility"><div data-kit-region="value"><div data-kit-region="fact">Step-free entrance</div></div></td><td data-label="Soundproofing"><div data-kit-region="value"><div data-kit-region="fact">Partial</div></div></td><td data-label="Refreshments"><div data-kit-region="value"><div data-kit-region="fact">Tea and coffee</div></div></td><td data-label="Parking"><div data-kit-region="value"><div data-kit-region="fact">Twelve spaces</div></div></td><td data-label="Cancellation"><div data-kit-region="value"><div data-kit-region="fact">Fourteen days</div></div></td><td data-label="Availability"><div data-kit-region="value"><div data-kit-region="fact">Mornings and evenings</div></div></td><td data-label="Projector"><div data-kit-region="value"><div data-kit-region="fact">Ceiling mounted</div></div></td><td data-label="Microphones"><div data-kit-region="value"><div data-kit-region="fact">Two wireless</div></div></td><td data-label="Staging"><div data-kit-region="value"><div data-kit-region="fact">Raised stage</div></div></td><td data-label="Lighting"><div data-kit-region="value"><div data-kit-region="fact">Dimmable</div></div></td><td data-label="Heating"><div data-kit-region="value"><div data-kit-region="fact">Included</div></div></td><td data-label="Storage"><div data-kit-region="value"><div data-kit-region="fact">Locked cupboard</div></div></td><td data-label="Cloakroom"><div data-kit-region="value"><div data-kit-region="fact">Staffed</div></div></td><td data-label="Toilets"><div data-kit-region="value"><div data-kit-region="fact">Four</div></div></td></tr>
                  <tr><th scope="row" data-label="Room"><div data-kit-region="value">Small Hall</div></th><td data-label="Capacity"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">40&nbsp;seated</div></div></td><td data-label="Weekdays"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£14.00</span> an hour</div></div></td><td data-label="Weekends"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="amount">£18.00</span> an hour</div></div></td><td data-label="Deposit"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£25.00</div></div></td><td data-label="Kitchen"><div data-kit-region="value"><div data-kit-region="fact">Kettle only</div></div></td><td data-label="Accessibility"><div data-kit-region="value"><div data-kit-region="fact">Step-free entrance</div></div></td><td data-label="Soundproofing"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Refreshments"><div data-kit-region="value"><div data-kit-region="fact">Tea and coffee</div></div></td><td data-label="Parking"><div data-kit-region="value"><div data-kit-region="fact">Street only</div></div></td><td data-label="Cancellation"><div data-kit-region="value"><div data-kit-region="fact">Seven days</div></div></td><td data-label="Availability"><div data-kit-region="value"><div data-kit-region="fact">Afternoons</div></div></td><td data-label="Projector"><div data-kit-region="value"><div data-kit-region="fact">Portable</div></div></td><td data-label="Microphones"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Staging"><div data-kit-region="value"><div data-kit-region="fact">None</div></div></td><td data-label="Lighting"><div data-kit-region="value"><div data-kit-region="fact">Fixed</div></div></td><td data-label="Heating"><div data-kit-region="value"><div data-kit-region="fact">Included</div></div></td><td data-label="Storage"><div data-kit-region="value"><div data-kit-region="fact">Shelving</div></div></td><td data-label="Cloakroom"><div data-kit-region="value"><div data-kit-region="fact">Unstaffed</div></div></td><td data-label="Toilets"><div data-kit-region="value"><div data-kit-region="fact">Two</div></div></td></tr>
                </tbody>
              </table></div>
            </div>
          </section>
          <div data-kit-region="next-route"><a href="../../layout-help/#layout-help-refused-undo" data-kit-role="way-back"><span data-kit-region="label">Return to CSS core</span></a></div>
        </article>
      </div>
    </main>
    <dialog id="help-keyboard-sheet" data-kit-role="keyboard-sheet" aria-labelledby="help-shortcut-sheet-title">
      <h2 data-kit-region="heading" id="help-shortcut-sheet-title">Keyboard shortcuts</h2>
      <div data-kit-region="groups">
        <section data-kit-region="group" aria-labelledby="help-shortcut-navigation-title">
          <h3 data-kit-region="heading" id="help-shortcut-navigation-title">Find and navigate</h3>
          <ul data-kit-region="shortcuts">
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Find</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">/</kbd></span>
            </li>
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Today</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">t</kbd></span>
            </li>
          </ul>
        </section>
        <section data-kit-region="group" aria-labelledby="help-shortcut-booking-title">
          <h3 data-kit-region="heading" id="help-shortcut-booking-title">Booking work</h3>
          <ul data-kit-region="shortcuts">
            <li data-kit-region="shortcut">
              <span data-kit-region="name">New booking</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span>
            </li>
            <li data-kit-region="shortcut">
              <span data-kit-region="name">Keyboard sheet</span>
              <span data-kit-region="keys"><kbd data-kit-role="label-panel" data-kit-region="key">?</kbd></span>
            </li>
          </ul>
        </section>
      </div>
      <div data-kit-region="actions">
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Close shortcuts</span></button>
      </div>
    </dialog>
</div>