kit

Card

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 List

Card

Main Hall

Deposit awaiting payment Keys not collected Insurance on file
Next booking
Amount due
£240.00

Meeting Room

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

Kitchen

Key depositThe deposit, the cleaning charge and the return of the key are held against the Saturday booking until

Source
<div>
  <article data-kit-role="card">
    <h3 data-kit-region="subject"><a href="#role-card">Main Hall</a></h3>
    <div data-kit-region="stamps">
      <span data-kit-role="stamp" data-kit-state="attention">Deposit awaiting payment</span>
      <span data-kit-role="stamp" data-kit-state="neutral">Keys not collected</span>
      <span data-kit-role="stamp" data-kit-state="settled">Insurance on file</span>
    </div>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Next booking</dt><dd data-kit-region="value"><time datetime="2025-04-12">12 April 2025</time></dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£240.00</dd></dl>
    </div>
    <div data-kit-role="action-group">
      <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send reminder</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Hold the room</span></button>
    </div>
  </article>
  <article data-kit-role="card">
    <h3 data-kit-region="subject"><a href="#role-card">Meeting Room</a></h3>
    <div data-kit-region="line">
      <p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-04-17">17 April 2025</time></span></p>
      <p data-kit-region="facts"><span data-kit-region="fact">Invoiced: £84.00 ·&nbsp;Collected: £24.00 ·&nbsp;Outstanding: £60.00 ·&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 data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open bookings</span></button>
    </div>
  </article>
  <article data-kit-role="card">
    <h3 data-kit-region="subject"><a href="#role-card">Garden Room and the kitchen beside it</a></h3>
    <div data-kit-region="stamps">
      <span data-kit-role="stamp" data-kit-state="alert">Boiler out of service</span>
    </div>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Oakmere Primary School</dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Last cleaned</dt><dd data-kit-region="value"><time datetime="2025-04-07">7 April 2025</time></dd></dl>
      <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Capacity</dt><dd data-kit-region="value" data-kit-role="amount">40&nbsp;seated</dd></dl>
    </div>
    <div data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Report fixed</span></button>
    </div>
  </article>
  <article data-kit-role="card">
    <h3 data-kit-region="subject"><a href="#role-card">Kitchen</a></h3>
    <div data-kit-region="line">
      <p data-kit-region="facts"><span data-kit-region="fact">Key deposit</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 data-kit-role="action-group">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open the kitchen rota</span></button>
    </div>
  </article>
</div>

Card, failed

Choir rehearsal

Cancelled
Room
Main Hall

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

With Try again unavailable.

Choir rehearsal

Cancelled
Room
Main Hall

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

Try again once you are back online.

Source
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-failed">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></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 data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
</article>
<p class="specimen-case-line">With Try again unavailable.</p>
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-failed">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></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-card-failed-try-again" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-card-failed-try-again-words"><span data-kit-region="label">Try again</span></button><p data-kit-region="words" id="role-card-failed-try-again-words">Try again once you are back online.</p></div>
  <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
</article>

Card, conflict

Choir rehearsal

Cancelled
Room
Main Hall

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

With the action unavailable.

Choir rehearsal

Cancelled
Room
Main Hall

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

Reinstate this meeting before moving it.

Source
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-conflict">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></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 data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div>
</article>
<p class="specimen-case-line">With the action unavailable.</p>
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-conflict">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></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-card-conflict-action" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-card-conflict-action-words"><span data-kit-region="label">Move it to the Garden Room</span></button><p data-kit-region="words" id="role-card-conflict-action-words">Reinstate this meeting before moving it.</p></div>
  <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reinstate this meeting</span></button></div>
</article>

Card, processing

Choir rehearsal

Cancelled
Room
Main Hall

Reinstating this meeting…

Source
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-processing">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></div>
  <div data-kit-region="standing" data-kit-state="processing"><p role="status">Reinstating this meeting…</p></div>
  <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
</article>

Card, unsaved

Choir rehearsal

Cancelled
Room
Main Hall

This meeting will be reinstated when you are back online.

Source
<article data-kit-role="card">
  <h3 data-kit-region="subject"><a href="#role-card-unsaved">Choir rehearsal</a></h3>
  <div data-kit-region="stamps"><span data-kit-role="stamp" data-kit-state="settled">Cancelled</span></div>
  <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl></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 data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Open this meeting</span></button></div>
</article>