kit

Row

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 Shell, Home, List, Record, Stepped flow, Settings, Find, Calendar, Help

Row

Two facts and the supporting line stay on desktop.

InvoiceStatusHirerAmount
INV-001Hire of Main Hall.
Awaiting payment
Priya Shah
£25.00

A closed question: Ava's answer is recorded and Ben has none.

Attendance is closed.
Attendance is closed.

Collection is closed. Clara has a recorded answer; Daniel has none.

Collected Collection is closed.
No answer recorded Collection is closed.

A room whose name opens its details.

Seats 40

Garden Room

Garden Room
Oakmere Primary School Awaiting payment

Invoice

£84.00

4.5 from 38 reviews

Main Hall hire

Invoice details
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

Oakmere WI1 invoice awaiting correction: the March hire was billed at the weekday rate and the committee has asked for it to be reissued at the weekend rate for the Saturday sessionsDue

Invoiced: £84.00 · Collected: £24.00 · Outstanding: £60.00 · payment expected after the hirer confirms the billing address, purchase order and named contact for Saturday’s Main Hall bookingPart payment taken by card on ; the balance stays outstanding until the reissued invoice is agreed, and the deposit is held against the Garden Room key that has not come back

Oakmere WI
Your invoice is ready Address refused

Sent to aisha@oakmereprimary.org · 

Invited Wed · not yet accepted

Details
Sent to
Priya Shah
Email
priya@stannesscouts.org

Wednesday · Main Hall

Wednesday · Main Hall

Thursday · Garden Room

Ballroom beginners · 1:30 am

Which 1:30 am The clocks go back at 2 am, so 1:30 am happens twice. Choose which 1:30 am the class starts.

Tuesday · Main Hall

It goes to the hall’s address.
Hartley Scouts Awaiting payment

Invoice

£126.00

Invoice resent to treasurer@hartleyscouts.org.uk.

A Row of several separate facts that wrap as whole facts.

Hirer: Priya Shah

Day: Saturday

Seats: 40

Deposit: £50.00

Balance: £34.00

Key: with the caretaker

Cleaning: booked

A supporting line of long words that ends in a time.

A run at the Desk width: one Row folds its actions into More, and one without More wraps them.

Invitations

St Anne’s Scout Group Awaiting payment

Invited Mon · not yet accepted

Oakmere Primary School Awaiting payment

Invited Tue · not yet accepted

Payment reminder sent to the school office.

A run whose Rows each hold an inert action and its words.

Meetings

Main Hall · 

This booking is closed. Reopen it to move a meeting.

Main Hall · 

This booking is closed. Reopen it to move a meeting.

A Row at the Desk width whose actions wrap where no fold remains.

Invitation

A run at the Desk width whose Stamps wrap at their words where nothing else fits.

Bookings

Riverside Community Choir Held until the deposit and the first month’s hire are paid in full

Main Hall · Thursdays

Oakmere WI Awaiting payment

Garden Room · Saturdays

A question at the Desk width whose actions wrap where no fold remains.

Register

Wednesday · Main Hall

A question whose label wraps.

Thursday bookings

Thursday · Garden Room

A question whose act sends an email, its preview before the actions.

Teacher · Tuesday beginners

The invitation lasts 7 days.

aisha@oakmereprimary.org

The invitation, as Aisha will get it

Channel
Email to aisha@oakmereprimary.org
Subject
Teach at Oakmere Village Hall

Goes when you send it.

A question answered in a Dialog, with its whole Scope line.
Which location is this?To answer

Your answer sets the location for Monday’s choir rehearsal, Tuesday’s committee meeting and Thursday’s reading group.

Add a location

Garden Room
Oakmere Village Hall, High Street

An email as the subject.

accounts.receivable.northeast-region.billing@hartfordcommunitydancestudio.com

Sends the invoices

A web address as the subject.

venues.example.com/oakmere-primary-school-parents-association

Booking page

A person as the subject, with their availability.

An unread notification.

Show a row arriving
Source
<p class="specimen-case-line">Two facts and the supporting line stay on desktop.</p>
<div id="row-desktop-only">
  <article data-kit-role="row" id="desktop-facts-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">INV-001<span data-kit-region="supporting" data-kit-desktop-only="true">Hire of Main Hall.</span></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" data-kit-desktop-only="true"><span data-kit-region="fact">Hirer: Priya Shah</span></p>
        <p data-kit-region="facts" data-kit-desktop-only="true"><span data-kit-region="fact">Amount: <span data-kit-role="amount">£25.00</span></span></p>
      </div>
    </div></div></div>
  </article>
  <div class="specimen-table-contained">
    <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
      <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th scope="col">Status</th><th scope="col">Hirer</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
      <tbody><tr id="desktop-facts-record"><th scope="row" data-kit-column="subject"><a href="#role-row">INV-001</a><span data-kit-region="supporting" data-kit-desktop-only="true">Hire of Main Hall.</span></th><td data-label="Status"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span></div></td><td data-label="Hirer" data-kit-desktop-only="true"><div data-kit-region="fact">Priya Shah</div></td><td data-label="Amount" data-kit-column="amount" data-kit-desktop-only="true"><div data-kit-region="fact" data-kit-role="amount">£25.00</div></td></tr></tbody>
    </table></div>
  </div>
</div>
<p class="specimen-case-line">A closed question: Ava's answer is recorded and Ben has none.</p>
<div id="row-closed-choices">
  <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" id="row-closed-ava">Ava Patel</a></div></div>
      <fieldset data-kit-role="selection-control" data-kit-region="group" id="row-closed-ava-choices" aria-labelledby="row-closed-ava" aria-describedby="row-closed-ava-choices-reason">
        <label><input data-kit-role="selection-control" type="radio" name="row-closed-ava" value="present" checked disabled><span>Present</span><output>Chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="row-closed-ava" value="absent" disabled><span>Absent</span><output>Not chosen</output></label>
        <span data-kit-region="reason" id="row-closed-ava-choices-reason">Attendance is closed.</span>
      </fieldset>
    </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="#role-row" id="row-closed-ben">Ben Lewis</a></div></div>
      <fieldset data-kit-role="selection-control" data-kit-region="group" id="row-closed-ben-choices" aria-labelledby="row-closed-ben" aria-describedby="row-closed-ben-choices-reason">
        <label><input data-kit-role="selection-control" type="radio" name="row-closed-ben" value="present" disabled><span>Present</span><output>Not chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="row-closed-ben" value="absent" disabled><span>Absent</span><output>Not chosen</output></label>
        <span data-kit-region="reason" id="row-closed-ben-choices-reason">Attendance is closed.</span>
      </fieldset>
    </div></div>
  </article>
</div>
<p class="specimen-case-line">Collection is closed. Clara has a recorded answer; Daniel has none.</p>
<div id="row-closed-fields">
  <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">Clara Webb</a></div></div>
      <div data-kit-role="form-group" id="row-closed-clara">
        <label for="row-closed-clara-control" id="row-closed-clara-label">Collection</label>
        <div data-kit-region="select"><select id="row-closed-clara-control" name="collection-clara" disabled aria-describedby="row-closed-clara-reason"><option value="">Not recorded</option><option value="collected" selected>Collected</option><option value="not-collected">Not collected</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
        <output for="row-closed-clara-control">Collected</output>
        <span data-kit-region="reason" id="row-closed-clara-reason">Collection is closed.</span>
      </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="#role-row">Daniel Reed</a></div></div>
      <div data-kit-role="form-group" id="row-closed-daniel">
        <label for="row-closed-daniel-control" id="row-closed-daniel-label">Collection</label>
        <div data-kit-region="select"><select id="row-closed-daniel-control" name="collection-daniel" disabled aria-describedby="row-closed-daniel-reason"><option value="" selected>Not recorded</option><option value="collected">Collected</option><option value="not-collected">Not collected</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
        <output for="row-closed-daniel-control">No answer recorded</output>
        <span data-kit-region="reason" id="row-closed-daniel-reason">Collection is closed.</span>
      </div>
    </div></div>
  </article>
</div>
<p class="specimen-case-line">A room whose name opens its details.</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">
          <button data-kit-region="subject" id="row-room-opener" type="button" commandfor="row-room-dialog" command="show-modal">Garden Room</button>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Seats <span data-kit-role="amount">40</span></span></p></div>
      </div>
    </div>
  </div>
</article>
<dialog id="row-room-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="row-room-dialog-title">
  <h2 data-kit-region="heading" id="row-room-dialog-title">Garden Room</h2>
  <div data-kit-region="form-groups"><form id="row-room-form">
    <div data-kit-role="form-group" data-kit-width="medium"><label for="row-room-name">Room name</label><input id="row-room-name" name="name" type="text" value="Garden Room"><output for="row-room-name">Garden Room</output></div>
  </form></div>
  <div data-kit-role="action-group"><div data-kit-region="actions"><button type="submit" form="row-room-form" data-kit-role="primary-action"><span data-kit-region="label">Save room</span></button><button type="button" data-kit-role="secondary-action" commandfor="row-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>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="oak"><span>Select Oakmere Primary School</span></label>
  <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">Oakmere Primary School</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">Invoice</span></p>
        <p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">£84.00</span></span></p>
        <p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="rating" role="img" aria-label="4.5 out of 5, from 38 reviews"><span data-kit-region="stars" style="--kit-rating: 4.5"></span><span data-kit-region="score"><span data-kit-role="amount">4.5</span> from <span data-kit-role="amount">38</span> reviews</span></span></span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="north"><span>Select Oakmere Primary School invoice</span></label>
  <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">Oakmere WI</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall hire</span></p></div>
      </div>
    </div>
  </div>
  <details data-kit-role="disclosure" data-kit-region="expansion"><summary><span data-kit-region="label">Invoice details</span></summary><div data-kit-region="content" data-kit-authored-text="true"><h5>Before you arrive</h5><p>Ask <a data-kit-region="mention" href="#role-row">@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-row">garden-room-plan.pdf</a></p></div></details>
</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 href="#role-row">Oakmere WI</a><span data-kit-region="supporting">1 invoice awaiting correction: the March hire was billed at the weekday rate and the committee has asked for it to be reissued at the weekend rate for the Saturday sessions</span><span data-kit-region="supporting">Due <time datetime="2025-04-30">30 April 2025</time></span></span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invoiced: <span data-kit-role="amount">£84.00</span> ·&nbsp;Collected: <span data-kit-role="amount">£24.00</span> ·&nbsp;Outstanding: <span data-kit-role="amount">£60.00</span> ·&nbsp;payment expected after the hirer confirms the billing address, purchase order and named contact for Saturday’s Main Hall booking</span><span data-kit-region="supporting">Part payment taken by card on <time datetime="2025-04-12">12 April 2025</time>; the balance stays outstanding until the reissued invoice is agreed, and the deposit is held against the Garden Room key that has not come back</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">Oakmere WI</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">Your invoice is ready</span>
          <span data-kit-role="stamp" data-kit-state="alert">Address refused</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sent to aisha@oakmereprimary.org ·&nbsp;<time datetime="2025-02-03">3 February 2025</time></span></p></div>
      </div>
    </div>
  </div>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="willowbrook"><span>Select Willowbrook Community Centre, Long Meadow Lane annexe</span></label>
  <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">Willowbrook Community Centre, Long Meadow Lane annexe</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invited Mon ·&nbsp;not yet accepted</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Resend</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <a data-kit-region="subject" href="#role-row">Oakmere Primary School</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invited Tue ·&nbsp;not yet accepted</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Resend</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy invitation link</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button><div id="role-row-fold" data-kit-role="action-menu"><button aria-controls="role-row-fold-layer" aria-haspopup="menu" aria-label="More actions for this invitation" data-kit-role="icon-action" id="role-row-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="role-row-fold-layer" popover="manual" role="menu" aria-labelledby="role-row-fold-trigger"></ul></div></div>
  </div>
</article>
<article data-kit-role="row" data-kit-state="expanded">
  <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">St Anne’s Scout Group</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invited Wed ·&nbsp;not yet accepted</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button></div>
  </div>
  <details data-kit-role="disclosure" data-kit-region="expansion" open><summary><span data-kit-region="label">Details</span></summary><div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Sent to</dt><dd data-kit-region="value">Priya Shah</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>priya@</span><wbr /><span>stannesscouts.org</span></span></span></dd></dl></div></div></details>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="stannes-register"><span>Select St Anne’s Scout Group</span></label>
  <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" id="row-choices-stannes">St Anne’s Scout Group</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Wednesday ·&nbsp;Main Hall</span></p></div>
      </div>
      <fieldset data-kit-role="selection-control" data-kit-region="group" aria-labelledby="row-choices-stannes">
        <label><input data-kit-role="selection-control" type="radio" name="row-choices-stannes" value="present" checked><span>Present</span><output>Chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="row-choices-stannes" value="apologies"><span>Apologies</span><output>Not chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="row-choices-stannes" value="absent"><span>Absent</span><output>Not chosen</output></label>
      </fieldset>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the register</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="stannes-time"><span>Select St Anne’s Scout Group</span></label>
  <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" id="row-question-stannes">St Anne’s Scout Group</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Wednesday ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-role="form-group" id="row-question-time">
        <label for="row-question-time-control" id="row-question-time-label">Time</label>
        <div data-kit-role="time-field" id="row-question-time-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
          <input id="row-question-time-control" type="text" autocomplete="off" value="10:00" aria-describedby="row-question-time-control-resolved" aria-expanded="false" aria-controls="row-question-time-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="row-question-time-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
          <button type="button" data-kit-role="icon-action" data-kit-region="times" id="row-question-time-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="time" value="10:00">
          <div id="row-question-time-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
        </div>
        <output for="row-question-time-control"><time datetime="10:00">10:00</time></output>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the register</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="brookfield-time"><span>Select Brookfield Choir</span></label>
  <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" id="row-question-brookfield">Brookfield Choir</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Thursday ·&nbsp;Garden Room</span></p></div>
      </div>
      <div>
        <div data-kit-role="form-group" id="row-question-brookfield-time">
          <label for="row-question-brookfield-time-control" id="row-question-brookfield-time-label">Time</label>
          <div data-kit-role="time-field" id="row-question-brookfield-time-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
            <input id="row-question-brookfield-time-control" type="text" autocomplete="off" value="19:30" aria-describedby="row-question-brookfield-time-control-resolved" aria-expanded="false" aria-controls="row-question-brookfield-time-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="row-question-brookfield-time-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
            <button type="button" data-kit-role="icon-action" data-kit-region="times" id="row-question-brookfield-time-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="time" value="19:30">
            <div id="row-question-brookfield-time-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
          </div>
          <output for="row-question-brookfield-time-control"><time datetime="19:30">19:30</time></output>
        </div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the register</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <a data-kit-region="subject" href="#role-row">Sunday 26 October</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Ballroom beginners ·&nbsp;1:30 am</span></p></div>
      </div>
      <fieldset data-kit-role="selection-control" data-kit-region="group" id="row-question-which-time" data-kit-state="error">
        <legend>Which 1:30 am</legend>
        <label><input data-kit-role="selection-control" type="radio" name="which-time" value="earlier" aria-describedby="row-question-which-time-help row-question-which-time-error" aria-invalid="true"><span>The earlier one</span><output>Not chosen</output></label>
        <label><input data-kit-role="selection-control" type="radio" name="which-time" value="later" aria-describedby="row-question-which-time-help row-question-which-time-error" aria-invalid="true"><span>The later one</span><output>Not chosen</output></label>
        <span data-kit-region="help" id="row-question-which-time-help">The clocks go back at 2 am, so 1:30 am happens twice.</span>
        <span data-kit-region="error" id="row-question-which-time-error">Choose which 1:30 am the class starts.</span>
      </fieldset>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the class</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <a data-kit-region="subject" href="#role-row">Oakmere WI</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Tuesday ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-role="selection-control" data-kit-region="group" id="row-question-post-invoice">
        <input type="hidden" name="post-invoice" value="">
        <label><input data-kit-role="selection-control" type="checkbox" name="post-invoice" aria-describedby="row-question-post-invoice-help"><span>Post the invoice too</span><output>Not chosen</output></label>
        <span data-kit-region="help" id="row-question-post-invoice-help">It goes to the hall’s address.</span>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <a data-kit-region="subject" href="#role-row">Garden room</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Third in the room list</span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move</span></button></div>
  </div>
</article>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="hartley"><span>Select Hartley Scouts</span></label>
  <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">Hartley Scouts</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">Invoice</span></p>
        <p data-kit-region="facts"><span data-kit-region="fact"><span data-kit-role="amount">£126.00</span></span></p></div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Resend</span></button></div>
    <p data-kit-role="status-line" role="status" aria-live="polite">Invoice resent to treasurer@hartleyscouts.org.uk.</p>
  </div>
</article>
<p class="specimen-case-line">A Row of several separate facts that wrap as whole facts.</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">Garden Room hire</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Hirer: Priya Shah</span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Day: Saturday</span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Seats: <span data-kit-role="amount">40</span></span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Deposit: <span data-kit-role="amount">£50.00</span></span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Balance: <span data-kit-role="amount">£34.00</span></span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Key: with the caretaker</span></p>
        <p data-kit-region="facts"><span data-kit-region="fact">Cleaning: booked</span></p></div>
      </div>
    </div>
  </div>
</article>
<p class="specimen-case-line">A supporting line of long words that ends in a time.</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">Oakmere Primary School<span data-kit-region="supporting">Accepted the revised Garden Room terms and asked for the key arrangements, the deposit and the cleaning rota to be confirmed in writing by <time datetime="2026-10-16">16 October 2026</time></span></a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invoice</span><span data-kit-region="supporting">The deposit, the cleaning charge and the return of the key are held against the Saturday booking until <time datetime="2026-10-30">30 October 2026</time></span></p></div>
      </div>
    </div>
  </div>
</article>
<p class="specimen-case-line">A run at the Desk width: one Row folds its actions into More, and one without More wraps them.</p>
<div data-kit-role="headed-region" style="inline-size: min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)));">
  <h3 data-kit-region="heading">Invitations</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">St Anne’s Scout Group</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">Invited Mon ·&nbsp;not yet accepted</span></p></div>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send reminder</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy invitation link</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Withdraw</span></button><div id="role-row-width-fold" data-kit-role="action-menu"><button aria-controls="role-row-width-fold-layer" aria-haspopup="menu" aria-label="More actions for this invitation" data-kit-role="icon-action" id="role-row-width-fold-trigger" type="button"><svg data-kit-icon="dots-three" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z"></path></svg></button><ul data-kit-role="popover" id="role-row-width-fold-layer" popover="manual" role="menu" aria-labelledby="role-row-width-fold-trigger"></ul></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="#role-row">Oakmere Primary School</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">Invited Tue ·&nbsp;not yet accepted</span></p></div>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send a payment reminder</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy the invitation link</span></button></div>
        <p data-kit-role="status-line" role="status" aria-live="polite">Payment reminder sent to the school office.</p>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A run whose Rows each hold an inert action and its words.</p>
<div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Meetings</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">Tuesday 22 April</a>
            </div>
            <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall ·&nbsp;<time datetime="19:00">19:00</time></span></p></div>
          </div>
        </div>
        <div data-kit-region="actions" data-kit-holds="words"><button type="button" id="role-row-inert-move-mid-april" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-inert-move-mid-april-words"><span data-kit-region="label">Move this meeting</span></button><p data-kit-region="words" id="role-row-inert-move-mid-april-words">This booking is closed. Reopen it to move a meeting.</p></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="#role-row">Tuesday 29 April</a>
            </div>
            <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall ·&nbsp;<time datetime="19:00">19:00</time></span></p></div>
          </div>
        </div>
        <div data-kit-region="actions" data-kit-holds="words"><button type="button" id="role-row-inert-move-late-april" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-inert-move-late-april-words"><span data-kit-region="label">Move this meeting</span></button><p data-kit-region="words" id="role-row-inert-move-late-april-words">This booking is closed. Reopen it to move a meeting.</p></div>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A Row at the Desk width whose actions wrap where no fold remains.</p>
<div data-kit-role="headed-region" style="inline-size: min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)));">
  <h3 data-kit-region="heading">Invitation</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">Hartley and District Scouts, Tuesday Explorers</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">Invited Wed ·&nbsp;not yet accepted</span></p></div>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send a reminder to the treasurer</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Copy the invitation link</span></button></div>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A run at the Desk width whose Stamps wrap at their words where nothing else fits.</p>
<div data-kit-role="headed-region" style="inline-size: min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)));">
  <h3 data-kit-region="heading">Bookings</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">Riverside Community Choir</a>
              <span data-kit-role="stamp" data-kit-state="attention">Held until the deposit and the first month’s hire are paid in full</span>
            </div>
            <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Main Hall ·&nbsp;Thursdays</span></p></div>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send the treasurer a payment reminder</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Release the hold</span></button></div>
      </div>
    </article>
    <article data-kit-role="row">
      <div data-kit-region="content-column">
        <div data-kit-region="subject-column">
          <div data-kit-region="line">
            <div data-kit-region="subject-stamp">
              <a data-kit-region="subject" href="#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">Garden Room ·&nbsp;Saturdays</span></p></div>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send the treasurer a payment reminder</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Release the hold</span></button></div>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A question at the Desk width whose actions wrap where no fold remains.</p>
<div data-kit-role="headed-region" style="inline-size: min(100%, calc(var(--kit-desk-width) + 2 * var(--kit-inset-tight)));">
  <h3 data-kit-region="heading">Register</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">Hartley Scouts</a>
            </div>
            <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Wednesday ·&nbsp;Main Hall</span></p></div>
          </div>
          <div data-kit-role="form-group" id="row-question-register-time">
            <label for="row-question-register-time-control" id="row-question-register-time-label">Time</label>
            <div data-kit-role="time-field" id="row-question-register-time-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
              <input id="row-question-register-time-control" type="text" autocomplete="off" value="18:30" aria-describedby="row-question-register-time-control-resolved" aria-expanded="false" aria-controls="row-question-register-time-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="row-question-register-time-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
              <button type="button" data-kit-role="icon-action" data-kit-region="times" id="row-question-register-time-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="time" value="18:30">
              <div id="row-question-register-time-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
            </div>
            <output for="row-question-register-time-control"><time datetime="18:30">18:30</time></output>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the register for Wednesday evening</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send the register to the Explorers’ leader</span></button></div>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A question whose label wraps.</p>
<div data-kit-role="headed-region" style="inline-size: min(100%, var(--kit-focused-width));">
  <h3 data-kit-region="heading">Thursday bookings</h3>
  <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">
              <a data-kit-region="subject" href="#role-row">Brookfield Choir</a>
            </div>
            <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Thursday ·&nbsp;Garden Room</span></p></div>
          </div>
          <div data-kit-role="form-group" id="row-question-setup-time">
            <label for="row-question-setup-time-control" id="row-question-setup-time-label">Time the choir needs the room from, with half an hour to set out the chairs</label>
            <div data-kit-role="time-field" id="row-question-setup-time-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
              <input id="row-question-setup-time-control" type="text" autocomplete="off" value="19:00" aria-describedby="row-question-setup-time-control-resolved" aria-expanded="false" aria-controls="row-question-setup-time-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="row-question-setup-time-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
              <button type="button" data-kit-role="icon-action" data-kit-region="times" id="row-question-setup-time-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="time" value="19:00">
              <div id="row-question-setup-time-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
            </div>
            <output for="row-question-setup-time-control"><time datetime="19:00">19:00</time></output>
          </div>
        </div>
        <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the register</span></button></div>
      </div>
    </article>
  </div>
</div>
<p class="specimen-case-line">A question whose act sends an email, its preview before the actions.</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">Aisha Khan</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Teacher ·&nbsp;Tuesday beginners</span></p></div>
      </div>
      <p data-kit-role="scope-line">The invitation lasts 7 days.</p>
      <div data-kit-role="form-group">
        <label for="row-invite-email">Email</label>
        <input id="row-invite-email" name="email" type="email" value="aisha@oakmereprimary.org" />
        <output for="row-invite-email">aisha@oakmereprimary.org</output>
      </div>
      <div data-kit-role="headed-region">
        <h3 data-kit-region="heading">The invitation, as Aisha will get it</h3>
        <div data-kit-region="content">
          <article data-kit-role="outbound-preview">
            <div data-kit-role="fact-group">
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Channel</dt><dd data-kit-region="value">Email to <span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl>
              <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Subject</dt><dd data-kit-region="value">Teach at Oakmere Village Hall</dd></dl>
            </div>
            <iframe data-kit-region="body" srcdoc="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><p>Hello Aisha,</p><p>You are invited to teach Tuesday beginners at Oakmere Village Hall.</p><p>Accept within 7 days.</p></body></html>" title="Teach at Oakmere Village Hall" sandbox="allow-same-origin"></iframe>
          </article>
          <p data-kit-region="time">Goes when you send it.</p>
        </div>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invitation</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Don’t send</span></button></div>
  </div>
</article>
<article data-kit-role="row" id="row-dialog-question">
  <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">Which location is this?</span><span data-kit-role="stamp" data-kit-state="neutral">To answer</span></div></div>
      <p data-kit-role="scope-line">Your answer sets the location for Monday’s choir rehearsal, Tuesday’s committee meeting and Thursday’s reading group.</p>
    </div>
    <div data-kit-region="actions"><button type="button" id="row-location-opener" data-kit-role="secondary-action" commandfor="row-location-dialog" command="show-modal"><span data-kit-region="label">Add a location</span></button></div>
  </div>
</article>
<dialog id="row-location-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="row-location-dialog-title">
  <h2 data-kit-region="heading" id="row-location-dialog-title">Add a location</h2>
  <div data-kit-region="form-groups"><form id="row-location-form">
    <div data-kit-role="form-group" data-kit-width="medium"><label for="row-location-name">Location name</label><input id="row-location-name" name="name" type="text" value="Garden Room"><output for="row-location-name">Garden Room</output></div>
    <div data-kit-role="form-group" data-kit-width="wide"><label for="row-location-address">Address</label><input id="row-location-address" name="address" type="text" value="Oakmere Village Hall, High Street"><output for="row-location-address">Oakmere Village Hall, High Street</output></div>
  </form></div>
  <div data-kit-role="action-group"><div data-kit-region="actions"><button type="button" data-kit-role="primary-action" commandfor="row-location-dialog" command="close"><span data-kit-region="label">Use this location</span></button><button type="button" data-kit-role="secondary-action" commandfor="row-location-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>
<p class="specimen-case-line">An email as the subject.</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"><span data-kit-region="email"><span><span>accounts<wbr />.receivable<wbr />.northeast-region<wbr />.billing@</span><wbr /><span>hartfordcommunitydancestudio.com</span></span></span></span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Sends the invoices</span></p></div>
      </div>
    </div>
  </div>
</article>
<p class="specimen-case-line">A web address as the subject.</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"><code><span>venues.example.com/</span><span>oakmere-</span><span>primary-</span><span>school-</span><span>parents-</span><span>association</span></code></span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Booking page</span></p></div>
      </div>
    </div>
  </div>
</article>
<p class="specimen-case-line">A person as the subject, with their availability.</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-role="avatar" data-kit-size="small" aria-hidden="true"><span data-kit-region="initials">A</span><span data-kit-region="picture" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+&quot;)"></span><span data-kit-region="availability" aria-hidden="true"></span></span>
          <a data-kit-region="subject" href="#role-row">Aisha Khan</a>
          <span data-kit-region="availability"> Away</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Books the choir rehearsals</span></p></div>
      </div>
    </div>
  </div>
</article>
<p class="specimen-case-line">An unread notification.</p>
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="notification" value="paid"><span>Select Oakmere Primary School paid its invoice</span></label>
  <span data-kit-region="unread" role="img" aria-label="Unread"></span>
  <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">Oakmere Primary School paid its invoice</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Paid by Aisha Khan</span></p></div>
      </div>
    </div>
  </div>
</article>
<article data-kit-role="row" id="role-row-empty-region">
  <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">Oakmere Primary School</a>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"></span></p></div>
      </div>
    </div>
  </div>
</article>
<details>
  <summary>Show a row arriving</summary>
  <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">Main Hall</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Tuesday</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="#role-row">Committee room</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Wednesday</span></p></div>
        </div>
      </div>
    </div>
  </article>
  <article data-kit-role="row" data-kit-arrival="true">
    <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">Kitchen</a>
          </div>
          <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Thursday</span></p></div>
        </div>
      </div>
    </div>
  </article>
  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a row</span></button>
</details>

Row, selected

Source
<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="oak" checked><span>Select Oakmere Primary School</span></label>
  <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-selected">Oakmere Primary School</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">Invoice ·&nbsp;<span data-kit-role="amount">£84.00</span></span></p></div>
      </div>
    </div>
  </div>
</article>

Row, expanded

Oakmere Primary School Awaiting payment

Invoice · £84.00

Invoice details
Bookings
2
Each
£42.00
Source
<article data-kit-role="row" data-kit-state="expanded">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="record" value="oak"><span>Select Oakmere Primary School</span></label>
  <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-expanded">Oakmere Primary School</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">Invoice ·&nbsp;<span data-kit-role="amount">£84.00</span></span></p></div>
      </div>
    </div>
  </div>
  <details data-kit-role="disclosure" data-kit-region="expansion" open>
    <summary><span data-kit-region="label">Invoice details</span></summary>
    <div data-kit-region="content">
      <div data-kit-role="fact-group">
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Bookings</dt><dd data-kit-region="value" data-kit-role="amount">2</dd></dl>
        <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Each</dt><dd data-kit-region="value" data-kit-role="amount">£42.00</dd></dl>
      </div>
    </div>
  </details>
</article>

Row, failed

On a Row.

Choir rehearsal Cancelled

· Main Hall

This meeting was not reinstated: the connection dropped before it saved.

On a records row.

MeetingWhenRoom
Choir rehearsal

This meeting was not reinstated: the connection dropped before it saved.
Main Hall

On a Row with Try again unavailable.

Choir rehearsal Cancelled

· Main Hall

This meeting was not reinstated: the connection dropped before it saved.

Try again once you are back online.

On a records row with Try again unavailable.

MeetingWhenRoom
Choir rehearsal

This meeting was not reinstated: the connection dropped before it saved.

Try again once you are back online.
Main Hall
Source
<p class="specimen-case-line">On a Row.</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-failed">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="failed">
        <p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-failed">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="failed"><p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>
<p class="specimen-case-line">On a Row with Try again unavailable.</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-failed">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="failed">
        <p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p>
        <button type="button" id="role-row-failed-try-again" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-failed-try-again-words"><span data-kit-region="label">Try again</span></button>
        <p data-kit-region="words" id="role-row-failed-try-again-words">Try again once you are back online.</p>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row with Try again unavailable.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-failed">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="failed"><p role="alert">This meeting was not reinstated: the connection dropped before it saved.</p><button type="button" id="role-row-failed-records-try-again" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-failed-records-try-again-words"><span data-kit-region="label">Try again</span></button><p data-kit-region="words" id="role-row-failed-records-try-again-words">Try again once you are back online.</p></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>

Row, conflict

On a Row.

Choir rehearsal Cancelled

· Main Hall

Maya Patel cancelled this meeting while you were moving it to the Garden Room.

On a records row.

MeetingWhenRoom
Choir rehearsal

Maya Patel cancelled this meeting while you were moving it to the Garden Room.
Main Hall

On a Row with the action unavailable.

Choir rehearsal Cancelled

· Main Hall

Maya Patel cancelled this meeting while you were moving it to the Garden Room.

Reinstate this meeting before moving it.

On a records row with the action unavailable.

MeetingWhenRoom
Choir rehearsal

Maya Patel cancelled this meeting while you were moving it to the Garden Room.

Reinstate this meeting before moving it.
Main Hall
Source
<p class="specimen-case-line">On a Row.</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-conflict">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="conflict">
        <p role="alert">Maya Patel cancelled this meeting while you were moving it to the Garden Room.</p>
        <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move it to the Garden Room</span></button>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-conflict">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel cancelled this meeting while you were moving it to the Garden Room.</p><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move it to the Garden Room</span></button></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>
<p class="specimen-case-line">On a Row with the action unavailable.</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-conflict">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="conflict">
        <p role="alert">Maya Patel cancelled this meeting while you were moving it to the Garden Room.</p>
        <button type="button" id="role-row-conflict-action" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-conflict-action-words"><span data-kit-region="label">Move it to the Garden Room</span></button>
        <p data-kit-region="words" id="role-row-conflict-action-words">Reinstate this meeting before moving it.</p>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row with the action unavailable.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-conflict">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="conflict"><p role="alert">Maya Patel cancelled this meeting while you were moving it to the Garden Room.</p><button type="button" id="role-row-conflict-records-action" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-row-conflict-records-action-words"><span data-kit-region="label">Move it to the Garden Room</span></button><p data-kit-region="words" id="role-row-conflict-records-action-words">Reinstate this meeting before moving it.</p></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>

Row, processing

On a Row.

Choir rehearsal Cancelled

· Main Hall

Reinstating this meeting…

On a records row.

MeetingWhenRoom
Choir rehearsal

Reinstating this meeting…
Main Hall
Source
<p class="specimen-case-line">On a Row.</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-processing">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="processing">
        <p role="status">Reinstating this meeting…</p>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-processing">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="processing"><p role="status">Reinstating this meeting…</p></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>

Row, unsaved

On a Row.

Choir rehearsal Cancelled

· Main Hall

This meeting will be reinstated when you are back online.

On a records row.

MeetingWhenRoom
Choir rehearsal

This meeting will be reinstated when you are back online.
Main Hall
Source
<p class="specimen-case-line">On a Row.</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-unsaved">Choir rehearsal</a>
          <span data-kit-role="stamp" data-kit-state="settled">Cancelled</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time> ·&nbsp;Main Hall</span></p></div>
      </div>
      <div data-kit-region="standing" data-kit-state="unsaved">
        <p role="status">This meeting will be reinstated when you are back online.</p>
      </div>
    </div>
    <div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
  </div>
</article>
<p class="specimen-case-line">On a records row.</p>
<div class="specimen-table-contained"><div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Meeting</th><th scope="col" data-kit-column="time">When</th><th scope="col">Room</th><td data-kit-column="actions"></td></tr></thead>
  <tbody>
    <tr>
      <th scope="row" data-kit-column="subject"><a href="#role-row-unsaved">Choir rehearsal</a><div data-kit-region="standing" data-kit-state="unsaved"><p role="status">This meeting will be reinstated when you are back online.</p></div></th>
      <td data-kit-column="time" data-label="When"><div data-kit-region="fact"><time datetime="2025-04-22T19:00+01:00"><span>Tuesday, 22 April 2025</span><wbr><span> at 19:00</span></time></div></td>
      <td data-label="Room"><div data-kit-region="fact">Main Hall</div></td>
      <td data-kit-column="actions"><div data-kit-region="actions"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div></td>
    </tr>
  </tbody>
</table></div></div>