kit

Notice

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, Settings, Field result

Notice, attention

Card payments are paused

The card on file expired on , so no booking can be paid until it is replaced.

Three Saturday bookings have no caretaker

Inside a Panel.

Saturday opening

The caretaker has not confirmed

Maya Osei was asked on .

Source
<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">Card payments are paused</p>
  <p data-kit-region="sentence">The card on file expired on <time datetime="2025-04-30">30 April 2025</time>, so no booking can be paid until it is replaced.</p>
  <div data-kit-region="action"><a href="#role-notice-attention">Replace the card</a></div>
</div>
<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">Three Saturday bookings have no caretaker</p>
  <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Assign caretakers</span></button></div>
</div>
<p class="specimen-case-line">Inside a Panel.</p>
<section data-kit-role="label-panel" aria-label="Saturday opening">
  <h3>Saturday opening</h3>
  <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">The caretaker has not confirmed</p>
    <p data-kit-region="sentence">Maya Osei was asked on <time datetime="2025-04-14">14 April 2025</time>.</p>
    <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Ask again</span></button></div>
  </div>
</section>

Notice, settled

Card payments are running again

Bookings held while they were paused were paid on .

The last import skipped 4 rows

They had no booking date, so nothing was added for them.

Inside a Panel.

Hall calendar

Calendar sync is paused until Monday

Changes made meanwhile show once it resumes.

Source
<div data-kit-role="notice" data-kit-state="settled">
  <svg data-kit-icon="info" 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,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
  <p data-kit-region="standing">Card payments are running again</p>
  <p data-kit-region="sentence">Bookings held while they were paused were paid on <time datetime="2025-05-02">2 May 2025</time>.</p>
  <button type="button" data-kit-role="icon-action" data-kit-region="dismiss" aria-label="Dismiss"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</div>
<div data-kit-role="notice" data-kit-state="settled">
  <svg data-kit-icon="info" 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,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
  <p data-kit-region="standing">The last import skipped 4 rows</p>
  <p data-kit-region="sentence">They had no booking date, so nothing was added for them.</p>
  <div data-kit-region="action"><a href="#role-notice-settled">See the skipped rows</a></div>
</div>
<p class="specimen-case-line">Inside a Panel.</p>
<section data-kit-role="label-panel" aria-label="Hall calendar">
  <h3>Hall calendar</h3>
  <div data-kit-role="notice" data-kit-state="settled">
    <svg data-kit-icon="info" 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,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg>
    <p data-kit-region="standing">Calendar sync is paused until Monday</p>
    <p data-kit-region="sentence">Changes made meanwhile show once it resumes.</p>
    <button type="button" data-kit-role="icon-action" data-kit-region="dismiss" aria-label="Dismiss"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
  </div>
</section>

Notice, inert

A Notice whose action waits.

Three Saturday bookings have no caretaker

Assign caretakers waits until the bookings have loaded.

A settled Notice whose actions wait.

The last import skipped 4 rows

They had no booking date, so nothing was added for them.

See the skipped rows waits until they have loaded.

Dismiss waits until the skipped rows have loaded.

The skipped rows are being checked.

A settled Notice whose Dismiss waits.

Calendar sync is running again

Changes made while it was paused are being added.

Dismiss waits until the calendar has synced.

Source
<p class="specimen-case-line">A Notice whose action waits.</p>
<div data-kit-role="notice" data-kit-state="attention"><svg data-kit-icon="warning" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><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">Three Saturday bookings have no caretaker</p><div data-kit-region="action"><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="notice-inert-assign" aria-describedby="notice-inert-assign-words"><span data-kit-region="label">Assign caretakers</span></button><p data-kit-region="words" id="notice-inert-assign-words">Assign caretakers waits until the bookings have loaded.</p></div></div>
<p class="specimen-case-line">A settled Notice whose actions wait.</p>
<div data-kit-role="notice" data-kit-state="settled"><svg data-kit-icon="info" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><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,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg><p data-kit-region="standing">The last import skipped 4 rows</p><p data-kit-region="sentence">They had no booking date, so nothing was added for them.</p><div data-kit-region="action"><button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled id="notice-inert-rows" aria-describedby="notice-inert-rows-words"><span data-kit-region="label">See the skipped rows</span></button><p data-kit-region="words" id="notice-inert-rows-words">See the skipped rows waits until they have loaded.</p></div><button type="button" data-kit-role="icon-action" data-kit-region="dismiss" data-kit-state="inert" disabled id="notice-inert-dismiss" aria-label="Dismiss" aria-describedby="notice-inert-dismiss-words"><svg data-kit-icon="x" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button><p data-kit-region="words" id="notice-inert-dismiss-words">Dismiss waits until the skipped rows have loaded.</p><p data-kit-role="status-line" role="status" aria-live="polite">The skipped rows are being checked.</p></div>
<p class="specimen-case-line">A settled Notice whose Dismiss waits.</p>
<div data-kit-role="notice" data-kit-state="settled"><svg data-kit-icon="info" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><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,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"/></svg><p data-kit-region="standing">Calendar sync is running again</p><p data-kit-region="sentence">Changes made while it was paused are being added.</p><button type="button" data-kit-role="icon-action" data-kit-region="dismiss" data-kit-state="inert" disabled id="notice-inert-sync-dismiss" aria-label="Dismiss" aria-describedby="notice-inert-sync-dismiss-words"><svg data-kit-icon="x" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button><p data-kit-region="words" id="notice-inert-sync-dismiss-words">Dismiss waits until the calendar has synced.</p></div>