kit

stale

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.

stale

These invoices may be out of date

They do not show changes made since the list was opened.

Invoices
HirerAmount due
Oakmere Primary School
£84.00
Northfield Choir
£120.00
Source
<div data-kit-layout="list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="rows" aria-label="Invoices">
    <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">These invoices may be out of date</p>
        <p data-kit-region="sentence">They do not show changes made since the list was opened.</p>
        <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reload invoices</span></button></div>
      </div>
    </div>
    <div data-kit-region="table" tabindex="0">
      <table data-kit-table="records">
        <caption>Invoices</caption>
        <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Hirer</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
        <tbody><tr><th scope="row" data-kit-column="subject">Oakmere Primary School</th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr><tr><th scope="row" data-kit-column="subject">Northfield Choir</th><td data-kit-column="amount" data-label="Amount due"><div data-kit-region="fact" data-kit-role="amount">£120.00</div></td></tr></tbody>
      </table>
    </div>
  </section>
</div>