kit

Scope line

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.

On Form, Settings

Scope line

Opening hours

These hours apply to Main Hall bookings made from tomorrow.

Committee booking

A Scope line beneath a section's standing facts, outside them.

Sections

Payment terms

Changes apply to invoices sent from tomorrow.

Payment due
14 days after the booking
14

A Scope line in a Row, a Stack beneath its facts and a Stack above its question.

Year 6

25 pupils · Class list

Applies to this class’s next invitation.

No email given
Source
<form data-kit-layout="form">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="headed-region">
      <h3 data-kit-region="heading">Opening hours</h3>
      <div data-kit-region="content">
        <p data-kit-role="scope-line">These hours apply to Main Hall bookings made from tomorrow.</p>
        <div data-kit-role="form-group" id="scope-line-opens">
          <label for="scope-line-opens-control" id="scope-line-opens-label">Opens</label>
          <div data-kit-role="time-field" id="scope-line-opens-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
            <input id="scope-line-opens-control" type="text" autocomplete="off" value="08:00" aria-describedby="scope-line-opens-control-resolved" aria-expanded="false" aria-controls="scope-line-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="scope-line-opens-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
            <button type="button" data-kit-role="icon-action" data-kit-region="times" id="scope-line-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="scope-line-opens-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
          </div>
          <output for="scope-line-opens-control"><time datetime="08:00">08:00</time></output>
        </div>
        <div data-kit-role="form-group" id="scope-line-closes">
          <label for="scope-line-closes-control" id="scope-line-closes-label">Closes</label>
          <div data-kit-role="time-field" id="scope-line-closes-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
            <input id="scope-line-closes-control" type="text" autocomplete="off" value="22:00" aria-describedby="scope-line-closes-control-resolved" aria-expanded="false" aria-controls="scope-line-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="scope-line-closes-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
            <button type="button" data-kit-role="icon-action" data-kit-region="times" id="scope-line-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="scope-line-closes-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
          </div>
          <output for="scope-line-closes-control"><time datetime="22:00">22:00</time></output>
        </div>
      </div>
    </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" 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>
</form>
<div data-kit-layout="record" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="facts-related-records" aria-labelledby="scope-line-record-title">
    <h2 id="scope-line-record-title">Committee booking</h2>
  </section>
  <aside data-kit-region="decision-compact-work">
    <h2>Access</h2>
    <p data-kit-role="scope-line">These times apply to this booking only.</p>
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="form-group" id="scope-line-doors-open">
          <label for="scope-line-doors-open-control" id="scope-line-doors-open-label">Doors open</label>
          <div data-kit-role="time-field" id="scope-line-doors-open-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
            <input id="scope-line-doors-open-control" type="text" autocomplete="off" value="18:00" aria-describedby="scope-line-doors-open-control-resolved" aria-expanded="false" aria-controls="scope-line-doors-open-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="scope-line-doors-open-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
            <button type="button" data-kit-role="icon-action" data-kit-region="times" id="scope-line-doors-open-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="doors-open" value="18:00">
            <div id="scope-line-doors-open-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
          </div>
          <output for="scope-line-doors-open-control"><time datetime="18:00">18:00</time></output>
        </div>
        <div data-kit-role="form-group" id="scope-line-doors-close">
          <label for="scope-line-doors-close-control" id="scope-line-doors-close-label">Doors close</label>
          <div data-kit-role="time-field" id="scope-line-doors-close-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
            <input id="scope-line-doors-close-control" type="text" autocomplete="off" value="21:30" aria-describedby="scope-line-doors-close-control-resolved" aria-expanded="false" aria-controls="scope-line-doors-close-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="scope-line-doors-close-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
            <button type="button" data-kit-role="icon-action" data-kit-region="times" id="scope-line-doors-close-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="doors-close" value="21:30">
            <div id="scope-line-doors-close-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
          </div>
          <output for="scope-line-doors-close-control"><time datetime="21:30">21:30</time></output>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save access times</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
  </aside>
</div>
<p class="specimen-case-line">A Scope line beneath a section's standing facts, outside them.</p>
<div data-kit-layout="settings" data-kit-holds="standing 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=payment-terms" aria-current="page"><span data-kit-region="name">Payment terms</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="scope-line-payment">
    <h2 id="scope-line-payment-title">Payment terms</h2>
    <p data-kit-role="scope-line">Changes apply to invoices sent from tomorrow.</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">Payment due</dt><dd data-kit-region="value">14 days after the booking</dd></dl></div>
    </div>
  </section>
  <div data-kit-region="form-or-list">
    <form method="get" id="scope-line-payment-form">
      <div data-kit-role="form-group" data-kit-width="short"><label for="scope-line-days">Days to pay</label><input id="scope-line-days" name="days" value="14" /><output for="scope-line-days">14</output></div>
    </form>
  </div>
  <div data-kit-role="action-group" data-kit-region="local-actions"><button type="submit" form="scope-line-payment-form" data-kit-role="primary-action"><span data-kit-region="label">Save payment terms</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<p class="specimen-case-line">A Scope line in a Row, a Stack beneath its facts and a Stack above its question.</p>
<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">Year 6</span></div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">25 pupils ·&nbsp;Class list</span></p></div>
      </div>
      <p data-kit-role="scope-line">Applies to this class’s next invitation.</p>
      <div data-kit-role="form-group"><label for="scope-line-row-email">Teacher’s email</label><input id="scope-line-row-email" name="teacher-email" type="email" value="" /><output for="scope-line-row-email">No email given</output></div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Don’t send</span></button></div>
  </div>
</article>