kit

Headed region

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 Home, Record, Form, Stepped flow, Settings, Find, Help, Issued document, Showcase

Headed region

Contact
Aisha Khan
Email
aisha@oakmereprimary.org

Custom fields

Year group
Year 4
Insurance reference
OPS-2291

Access

Key holder
The caretaker
Side gate
Open from

Out of hours

Key safe
Beside the side gate
Who to call
Tom Reid, 01632 960 148

A lone Fact group needs no Headed region.

Contact
Tom Reid
Email
tom@oakmerechoir.org

A Headed region inside a Row, before its expansion.

Oakmere WI Awaiting payment

Main Hall hire · £84.00

Payment plan

First payment
£42.00
Balance
£42.00
Payment history
Paid on
£42.00
Paid on
£42.00

A nested Headed region with nothing in it.

Access

Key holder
The caretaker

Out of hours

A nested Headed region holding a note as it was written.

Access

Key holder
The caretaker

Arrival notes

Before you arrive

Ask @Aisha Khan to confirm the address for B-1042 Garden room before .
Read the hire terms first, then use 4721 at the gate.

  • Bring your own chairs.

  • Leave the hall by ten.

  1. Ring the bell by the side gate.

  2. Wait for the caretaker.

  • Done

    Deposit paid

  • Not done

    Key returned

The side door sticks in the cold.

Gate: 4721
Alarm: 0990

Floor plan: garden-room-plan.pdf

A Headed region whose content is a note as it was written.

Arrival notes

Ring the bell by the side gate.
If nobody answers, the key is in the safe beside it.

Please stack the chairs along the back wall and switch off the heating in the Main Hall before you leave.

A nested heading names its week in dates.

Main Hall

Key holder
The caretaker

Bookings for

Choir rehearsal
Monday and Thursday evenings
Toddler group
Wednesday morning

A Headed region with a Notice at its head.

Insurance

Public liability cover has lapsed

No booking can be confirmed until a new certificate is on file.

Insurer
Oakmere Mutual
Policy
PL-40218
Source
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Contact</dt><dd data-kit-region="value">Aisha Khan</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Email</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl>
</div>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Custom fields</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Year group</dt><dd data-kit-region="value">Year 4</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Insurance reference</dt><dd data-kit-region="value">OPS-2291</dd></dl>
    </div>
  </div>
</div>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Access</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Key holder</dt><dd data-kit-region="value">The caretaker</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Side gate</dt><dd data-kit-region="value">Open from <time datetime="17:30">half past five</time></dd></dl>
    </div>
    <div data-kit-role="headed-region">
      <h4 data-kit-region="heading">Out of hours</h4>
      <div data-kit-region="content">
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Key safe</dt><dd data-kit-region="value">Beside the side gate</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Who to call</dt><dd data-kit-region="value">Tom Reid, 01632 960 148</dd></dl>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="specimen-case-line">A lone Fact group needs no Headed region.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Contact</dt><dd data-kit-region="value">Tom Reid</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Email</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>tom@</span><wbr /><span>oakmerechoir.org</span></span></span></dd></dl>
</div>
<p class="specimen-case-line">A Headed region inside a Row, before its expansion.</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">
          <a data-kit-region="subject" href="../role-row/#role-row">Oakmere WI</a>
          <span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall hire ·&nbsp;<span data-kit-role="amount">£84.00</span></span></p></div>
      </div>
      <div data-kit-role="headed-region">
        <h3 data-kit-region="heading">Payment plan</h3>
        <div data-kit-region="content">
          <div data-kit-role="fact-group">
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">First payment</dt><dd data-kit-region="value" data-kit-role="amount">£42.00</dd></dl>
            <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Balance</dt><dd data-kit-region="value" data-kit-role="amount">£42.00</dd></dl>
          </div>
        </div>
      </div>
    </div>
  </div>
  <details data-kit-role="disclosure" data-kit-region="expansion"><summary><span data-kit-region="label">Payment history</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Paid on <time datetime="2025-02-03">3 February 2025</time></dt><dd data-kit-region="value" data-kit-role="amount">£42.00</dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Paid on <time datetime="2025-02-10">10 February 2025</time></dt><dd data-kit-region="value" data-kit-role="amount">£42.00</dd></dl></div></div></details>
</article>
<p class="specimen-case-line">A nested Headed region with nothing in it.</p>
<div data-kit-role="headed-region" id="role-headed-region-empty-region">
  <h3 data-kit-region="heading">Access</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Key holder</dt><dd data-kit-region="value">The caretaker</dd></dl>
    </div>
    <div data-kit-role="headed-region">
      <h4 data-kit-region="heading">Out of hours</h4>
      <div data-kit-region="content"></div>
    </div>
  </div>
</div>
<p class="specimen-case-line">A nested Headed region holding a note as it was written.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Access</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Key holder</dt><dd data-kit-region="value">The caretaker</dd></dl>
    </div>
    <div data-kit-role="headed-region">
      <h4 data-kit-region="heading">Arrival notes</h4>
      <div data-kit-region="content" data-kit-authored-text="true"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="#role-headed-region">@Aisha Khan</a> to confirm <strong>the address</strong> for <span data-kit-region="mention">B-1042 Garden room</span> before <time datetime="2025-03-14">14 March 2025</time>.<br>Read the <a href="https://example.com/hire-terms">hire terms</a> first, <em>then</em> use <code>4721</code> at the gate.</p><ul><li><p>Bring your own chairs.</p></li><li><p>Leave the hall by ten.</p></li></ul><ol><li><p>Ring the bell by the side gate.</p></li><li><p>Wait for the caretaker.</p></li></ol><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Deposit paid</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Key returned</p></li></ul><blockquote><p>The side door sticks in the cold.</p></blockquote><pre><code>Gate: 4721
Alarm: 0990</code></pre><p>Floor plan: <a href="#role-headed-region">garden-room-plan.pdf</a></p></div>
    </div>
  </div>
</div>
<p class="specimen-case-line">A Headed region whose content is a note as it was written.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Arrival notes</h3>
  <div data-kit-region="content" data-kit-authored-text="true"><p>Ring the bell by the side gate.<br>If nobody answers, the key is in the safe beside it.</p><p></p><p>Please stack the chairs along the back wall and switch off the heating in the Main Hall before you leave.</p></div>
</div>
<p class="specimen-case-line">A nested heading names its week in dates.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Main Hall</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Key holder</dt><dd data-kit-region="value">The caretaker</dd></dl>
    </div>
    <div data-kit-role="headed-region">
      <h4 data-kit-region="heading">Bookings for <time datetime="2025-04-14/2025-04-20"><span>14 – </span><wbr><span>20 April 2025</span></time></h4>
      <div data-kit-region="content">
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Choir rehearsal</dt><dd data-kit-region="value">Monday and Thursday evenings</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Toddler group</dt><dd data-kit-region="value">Wednesday morning</dd></dl>
        </div>
      </div>
    </div>
  </div>
</div>
<p class="specimen-case-line">A Headed region with a Notice at its head.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Insurance</h3>
  <div data-kit-region="content">
    <div data-kit-region="notices" aria-live="polite">
      <div data-kit-role="notice" data-kit-state="attention">
        <svg data-kit-icon="warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
        <p data-kit-region="standing">Public liability cover has lapsed</p>
        <p data-kit-region="sentence">No booking can be confirmed until a new certificate is on file.</p>
        <div data-kit-region="action"><a href="#role-headed-region">Add a certificate</a></div>
      </div>
    </div>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Insurer</dt><dd data-kit-region="value">Oakmere Mutual</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Policy</dt><dd data-kit-region="value">PL-40218</dd></dl>
    </div>
  </div>
</div>

Headed region, inert

A region whose actions wait.

Invitations waiting for an answer

None right now. An invitation stands here until it is accepted.

Inviting waits until the people who can sign in have loaded.

Choose who can sign in before sharing a sign-up link.

Copying invitations waits until they have loaded.

A region inside another, its actions waiting.

Access

The caretaker can sign in.

Invitations waiting for an answer

None right now. An invitation stands here until it is accepted.

Inviting waits until the people who can sign in have loaded.

Choose who can sign in before sharing a sign-up link.

Copying invitations waits until they have loaded.

Source
<p class="specimen-case-line">A region whose actions wait.</p>
<div data-kit-role="headed-region" data-kit-state="empty"><h3 data-kit-region="heading">Invitations waiting for an answer</h3><div data-kit-region="content"><p>None right now. An invitation stands here until it is accepted.</p><div data-kit-role="action-group" data-kit-holds="words"><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="headed-inert-invite" aria-describedby="headed-inert-invite-words"><span data-kit-region="label">Invite someone</span></button><p data-kit-region="words" id="headed-inert-invite-words">Inviting waits until the people who can sign in have loaded.</p><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="headed-inert-share" aria-describedby="headed-inert-share-words"><span data-kit-region="label">Share a sign-up link</span></button><p data-kit-region="words" id="headed-inert-share-words">Choose who can sign in before sharing a sign-up link.</p><div data-kit-role="action-menu" id="headed-inert-more"><button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="headed-inert-more-trigger" aria-label="More invitation actions" aria-haspopup="menu" aria-controls="headed-inert-more-layer" aria-describedby="headed-inert-more-trigger-words"><svg data-kit-icon="dots-three" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><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"/></svg></button><ul data-kit-role="popover" id="headed-inert-more-layer" popover="manual" role="menu" aria-labelledby="headed-inert-more-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="headed-inert-more-layer/0-0" role="menuitem"><span data-kit-region="name">Copy invitations</span></button></li><li role="none"><button type="button" data-kit-region="item" id="headed-inert-more-layer/0-1" role="menuitem"><span data-kit-region="name">Download invitations</span></button></li></ul></li></ul></div><p data-kit-region="words" id="headed-inert-more-trigger-words">Copying invitations waits until they have loaded.</p></div></div></div>
<p class="specimen-case-line">A region inside another, its actions waiting.</p>
<div data-kit-role="headed-region"><h3 data-kit-region="heading">Access</h3><div data-kit-region="content"><p>The caretaker can sign in.</p><div data-kit-role="headed-region" data-kit-state="empty"><h4 data-kit-region="heading">Invitations waiting for an answer</h4><div data-kit-region="content"><p>None right now. An invitation stands here until it is accepted.</p><div data-kit-role="action-group" data-kit-holds="words"><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="headed-nested-inert-invite" aria-describedby="headed-nested-inert-invite-words"><span data-kit-region="label">Invite someone</span></button><p data-kit-region="words" id="headed-nested-inert-invite-words">Inviting waits until the people who can sign in have loaded.</p><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="headed-nested-inert-share" aria-describedby="headed-nested-inert-share-words"><span data-kit-region="label">Share a sign-up link</span></button><p data-kit-region="words" id="headed-nested-inert-share-words">Choose who can sign in before sharing a sign-up link.</p><div data-kit-role="action-menu" id="headed-nested-inert-more"><button type="button" data-kit-role="icon-action" data-kit-state="inert" disabled id="headed-nested-inert-more-trigger" aria-label="More invitation actions" aria-haspopup="menu" aria-controls="headed-nested-inert-more-layer" aria-describedby="headed-nested-inert-more-trigger-words"><svg data-kit-icon="dots-three" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><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"/></svg></button><ul data-kit-role="popover" id="headed-nested-inert-more-layer" popover="manual" role="menu" aria-labelledby="headed-nested-inert-more-trigger"><li role="none" data-kit-region="group"><ul role="group"><li role="none"><button type="button" data-kit-region="item" id="headed-nested-inert-more-layer/0-0" role="menuitem"><span data-kit-region="name">Copy invitations</span></button></li><li role="none"><button type="button" data-kit-region="item" id="headed-nested-inert-more-layer/0-1" role="menuitem"><span data-kit-region="name">Download invitations</span></button></li></ul></li></ul></div><p data-kit-region="words" id="headed-nested-inert-more-trigger-words">Copying invitations waits until they have loaded.</p></div></div></div>
</div></div>