kit

failed

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.

failed

Needs your attention

Payments could not be checked

The card provider did not answer, so overdue payments may be missing below.

A Calendar week that could not be read, its hours kept.

View

This week's bookings could not be read

The booking service did not answer, so bookings may be missing below.

Mon
Tue
Wed
Mon
Tue
Wed
Source
<div data-kit-layout="home">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="attention" aria-labelledby="failed-attention-title">
    <h2 id="failed-attention-title">Needs your attention</h2>
    <div data-kit-region="notices" aria-live="polite">
      <div data-kit-role="notice" data-kit-state="attention">
        <svg data-kit-icon="warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
        <p data-kit-region="standing">Payments could not be checked</p>
        <p data-kit-region="sentence">The card provider did not answer, so overdue payments may be missing below.</p>
        <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Check payments again</span></button></div>
      </div>
    </div>
    <article data-kit-role="attention-item">
      <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
      <p data-kit-region="standing">Delivery failed.</p>
      <p data-kit-region="urgency">Correct the address before sending again.</p>
      <a data-kit-region="route" href="../role-form-group/#role-form-group">Open Oakmere Primary School invoice</a>
    </article>
  </section>
</div>
<p class="specimen-case-line">A Calendar week that could not be read, its hours kept.</p>
<div data-kit-layout="calendar">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="toolbar" aria-label="Calendar controls">
    <div data-kit-region="range"><strong data-kit-region="range-in-words"><time datetime="2025-04-21/2025-04-23"><span>21 – </span><wbr><span>23 April 2025</span></time></strong><button type="button" data-kit-role="secondary-action" data-kit-region="today"><span data-kit-region="label">Today</span></button><a data-kit-role="icon-action" data-kit-region="previous" href="?week=previous" rel="prev" aria-label="Previous week"><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></a><a data-kit-role="icon-action" data-kit-region="next" href="?week=next" rel="next" aria-label="Next week"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></a><div data-kit-region="date"><div data-kit-role="form-group" id="failed-date"><label for="failed-date-control" id="failed-date-label">Go to a date</label><div data-kit-role="date-field" id="failed-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-04-21"}'><input id="failed-date-control" type="text" autocomplete="off" value="Monday, 21 April 2025" aria-describedby="failed-date-control-resolved" aria-expanded="false" aria-controls="failed-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span><span id="failed-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span><button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="failed-date-control-calendar" aria-label="Calendar" aria-describedby="failed-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button><input type="hidden" name="date" value="2025-04-21"><div id="failed-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div></div></div></div></div>
    <div data-kit-region="scope"><div data-kit-role="form-group"><label for="state-failed-calendar-scope">Hall</label><div data-kit-region="select"><select id="state-failed-calendar-scope"><option value="all">All halls</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></div></div>
    <div data-kit-region="view"><div data-kit-role="form-group" id="state-failed-calendar-view-form-group"><fieldset><legend id="state-failed-calendar-view-form-group-label">View</legend><div data-kit-role="segmented-control" id="state-failed-calendar-view-form-group-control"><label data-kit-region="segment"><input type="radio" name="state-failed-calendar-view" value="week" checked><span data-kit-region="segment-name">Week</span></label><label data-kit-region="segment"><input type="radio" name="state-failed-calendar-view" value="day"><span data-kit-region="segment-name">Day</span></label><label data-kit-region="segment"><input type="radio" name="state-failed-calendar-view" value="month"><span data-kit-region="segment-name">Month</span></label></div></fieldset></div></div>
    <div data-kit-region="actions"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">New booking</span></button></div>
  </section>
  <div data-kit-region="notices" aria-live="polite">
    <div data-kit-role="notice" data-kit-state="attention">
      <svg data-kit-icon="warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
      <p data-kit-region="standing">This week's bookings could not be read</p>
      <p data-kit-region="sentence">The booking service did not answer, so bookings may be missing below.</p>
      <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Try again</span></button></div>
    </div>
  </div>
  <div data-kit-region="desk-grid" style="--kit-calendar-columns: 3; --kit-calendar-hours: 4;">
    <div data-kit-region="heads">
      <div data-kit-region="column-head"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></div>
      <div data-kit-region="column-head"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></div>
      <div data-kit-region="column-head"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></div>
    </div>
    <div data-kit-region="time-grid">
      <aside data-kit-region="time-gutter" aria-label="Times">
        <div data-kit-region="hours">
          <time datetime="09:00">09:00</time>
          <time datetime="10:00">10:00</time>
          <time datetime="11:00">11:00</time>
          <time datetime="12:00">12:00</time>
        </div>
      </aside>
      <div data-kit-region="column"></div>
      <div data-kit-region="column"></div>
      <div data-kit-region="column"></div>
    </div>
  </div>
  <div data-kit-region="days">
    <section data-kit-region="day">
      <header data-kit-region="day-heading"><span><strong>Mon</strong><br /><time datetime="2025-04-21">21 Apr</time></span></header>
    </section>
    <section data-kit-region="day">
      <header data-kit-region="day-heading"><span><strong>Tue</strong><br /><time datetime="2025-04-22">22 Apr</time></span></header>
    </section>
    <section data-kit-region="day">
      <header data-kit-region="day-heading"><span><strong>Wed</strong><br /><time datetime="2025-04-23">23 Apr</time></span></header>
    </section>
  </div>
</div>