kit

Record

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.

Record

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div data-kit-holds="presence"><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p><p data-kit-region="standing"><span data-kit-role="stamp" data-kit-state="attention">Failed ·&nbsp;Recipient address refused</span></p><div data-kit-role="presence"><div data-kit-role="avatar-group"><button type="button" popovertarget="record-presence" aria-label="Sam Okafor and Priya Shah are here"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">SO</span></span><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span></button><div id="record-presence" data-kit-role="popover" popover="auto"><ul><li><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">SO</span></span><span data-kit-region="name">Sam Okafor</span><span data-kit-region="doing">Editing billing and payment</span></li><li><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span><span data-kit-region="name">Priya Shah</span><span data-kit-region="doing">Reading</span></li></ul></div></div></div></div>
    <div data-kit-region="next-previous"><span data-kit-region="position"><span data-kit-role="amount">12</span> of <span data-kit-role="amount">1,240</span></span><a href="?record=11" aria-label="Previous" data-kit-role="icon-action" data-kit-region="previous"><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 href="?record=13" aria-label="Next" data-kit-role="icon-action" data-kit-region="next"><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>
    <div data-kit-region="actions"><a href="../layout-record/#layout-record">CSS core</a><button type="button" value="https://oakmerehall.uk/invoices/OH-INV-003" aria-label="Copy link" data-kit-role="icon-action" data-kit-region="copy-link"><svg data-kit-icon="link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"/></svg><svg data-kit-icon="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"/></svg></button></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite"></div>
      <nav aria-label="Invoice facets" data-kit-region="local-tabs" data-kit-role="local-tabs" id="layout-record-invoice-facets">
        <a href="#facts" aria-current="location" data-kit-state="current"><span data-kit-region="name">Invoice</span><span data-kit-region="reserve" aria-hidden="true">Invoice</span></a>
        <a href="#history"><span data-kit-region="name">History</span><span data-kit-region="reserve" aria-hidden="true">History</span></a>
        <div data-kit-region="more" hidden>
          <button data-kit-role="subtle-action" popovertarget="layout-record-invoice-facets-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span></span></button>
          <div data-kit-role="popover" id="layout-record-invoice-facets-more" popover="auto">
            <ul>
              <li hidden><a href="#facts" aria-current="location"><span data-kit-region="name">Invoice</span></a></li>
              <li hidden><a href="#history"><span data-kit-region="name">History</span></a></li>
            </ul>
          </div>
        </div>
      </nav>
      <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">Sending failed</p>
          <p data-kit-region="sentence">The recipient’s mail service refused the billing address, so the invoice was not delivered.</p>
        </div>
      </div>
      <section data-kit-region="facts-related-records" id="facts" aria-labelledby="invoice-title">
        <h2 id="invoice-title">Oakmere Primary School invoice</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Invoice</dt><dd data-kit-region="value"><code><span>OH-</span><span>INV-</span><span>003</span></code></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">£20.00</dd><dd data-kit-region="supporting">1 booking</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value"><a href="../list/">Oakmere Primary School</a></dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Damage photo</dt><dd data-kit-region="value"><a data-kit-role="image" id="record-damage-photo" href="#record-damage-photo-overlay"><img src="../chair-damage.svg" alt="Chair with a split seat, photographed after a hall booking." width="800" height="500" style="--kit-image-natural-width: 800; --kit-image-natural-height: 500"><span hidden>The photo cannot be shown.</span></a></dd></dl>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Messages</h3>
          <div data-kit-region="content">
        <div data-kit-region="rows">
          <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">Record</th><th scope="col">Message</th><th scope="col">Sent to</th><th scope="col">Delivery</th></tr></thead>
              <tbody>
                <tr id="payment-201"><th scope="row" data-kit-column="subject"><a href="#payment-201">Invoice OH-INV-003</a></th><td data-label="Message"><div data-kit-region="fact">Your invoice is ready</div></td><td data-label="Sent to"><div data-kit-region="fact"><span data-kit-region="email"><span><span>accounts<wbr />.payable<wbr />.finance-office@</span><wbr /><span>oakmereprimary.org</span></span></span></div></td><td data-label="Delivery"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="attention">Address refused</span></div><span data-kit-region="supporting">Last tried <time datetime="2025-02-03">3 February 2025</time></span><span data-kit-region="supporting">Two attempts made</span></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Payments</h3>
          <div data-kit-region="content">
            <div data-kit-layout="list" id="layout-record-payments">
              <div data-kit-region="notices" aria-live="polite"></div>
              <section data-kit-region="saved-views-filters-sort" data-kit-holds="form-group" aria-label="Payment search and filters">
                <div data-kit-role="form-group"><label for="record-payments-search">Search payments</label><div data-kit-region="control"><input id="record-payments-search" type="search" enterkeyhint="search" placeholder="Find payments by reference"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="record-payments-search-clear" aria-label="Clear" hidden><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>
                <form><button type="button" data-kit-role="secondary-action" popovertarget="record-payments-filters"><span data-kit-region="label">Filters</span></button><div data-kit-region="filters" id="record-payments-filters" data-kit-role="phone-sheet" popover="auto"><div data-kit-region="filter">
                      <button type="button" data-kit-role="secondary-action" popovertarget="record-payments-method-filter"><span data-kit-region="label"><span data-kit-region="name">Method</span></span></button>
                      <div data-kit-role="popover" id="record-payments-method-filter" popover="auto">
                        <div data-kit-role="form-group"><label for="record-payments-method">Method</label><div data-kit-region="select"><select id="record-payments-method" name="method"><option value="" selected>Any method</option><option value="card">Card</option><option value="bank-transfer">Bank transfer</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>
<div data-kit-region="filter">
                      <button type="button" data-kit-role="secondary-action" popovertarget="record-payments-received-filter"><span data-kit-region="label"><span data-kit-region="name">Received</span></span></button>
                      <div data-kit-role="popover" id="record-payments-received-filter" popover="auto">
                        <div data-kit-role="form-group"><label for="record-payments-received">Received</label><div data-kit-region="select"><select id="record-payments-received" name="received"><option value="" selected>Any time</option><option value="30">Last 30 days</option><option value="90">Last 90 days</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>
<div data-kit-region="more" id="record-payments-more-filters" data-kit-fit="pending" hidden>
                      <button type="button" data-kit-role="secondary-action" popovertarget="record-payments-more-filters-popover"><span data-kit-region="label"><span data-kit-region="name">More filters</span></span></button>
                      <div data-kit-role="popover" id="record-payments-more-filters-popover" popover="auto">
                        <ul>
                          <li><button type="button" data-kit-role="secondary-action" popovertarget="record-payments-method-filter"><span data-kit-region="label"><span data-kit-region="name">Method</span></span></button></li>
                          <li><button type="button" data-kit-role="secondary-action" popovertarget="record-payments-received-filter"><span data-kit-region="label"><span data-kit-region="name">Received</span></span></button></li>
                        </ul>
                      </div>
                    </div>
</div></form>
              </section>
              <section data-kit-region="rows" aria-label="Payments">
                <div data-kit-region="notices" aria-live="polite"></div>
                <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">Payment</th><th scope="col" data-kit-column="time">Received</th><th scope="col">Reference</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
                  <tbody>
                    <tr><th scope="row" data-kit-column="subject"><a href="../record/">Card payment</a></th><td data-kit-column="time" data-label="Received"><div data-kit-region="fact"><time datetime="2025-02-03">3 February 2025</time></div></td><td data-label="Reference"><div data-kit-region="fact"><code><span>OH-</span><span>INV-</span><span>003-</span><span>PAYMENT-</span><span>2025-</span><span>02-</span><span>03-</span><span>CARD-</span><span>ENDING-</span><span>4417</span></code></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="value"><div data-kit-region="fact" data-kit-role="amount">£40.00</div><span data-kit-region="supporting">Part payment</span></div></td></tr>
                    <tr><th scope="row" data-kit-column="subject"><a href="../record/">Bank transfer</a></th><td data-kit-column="time" data-label="Received"><div data-kit-region="fact"><time datetime="2025-01-28">28 January 2025</time></div></td><td data-label="Reference"><div data-kit-region="fact"><code><span>OH-</span><span>INV-</span><span>003-</span><span>PAYMENT-</span><span>2025-</span><span>01-</span><span>28-</span><span>BANK-</span><span>TRANSFER-</span><span>0388</span></code></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£24.00</div></td></tr>
                  </tbody>
                </table>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>
      <aside data-kit-region="decision-compact-work" aria-labelledby="record-payment-title">
        <form data-kit-region="decision">
          <div data-kit-role="form-group"><label for="record-invoice-note">Note on the invoice</label><textarea id="record-invoice-note" name="invoice-note"></textarea><output for="record-invoice-note">No note</output></div>
          <section data-kit-role="inline-consequence" aria-label="Send Oakmere Primary School invoice">
            <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
            <p data-kit-region="consequence">Sending emails the £84.00 invoice to aisha@oakmereprimary.org.</p>
            <p data-kit-region="effective-time">It goes as soon as you confirm.</p>
            <p data-kit-region="correction-path">You can send a corrected invoice from this record.</p>
          </section>
          <div data-kit-role="action-group" id="record-decision-actions"><div data-kit-role="refusal" id="record-send-refused" role="alert" aria-atomic="true">
            <p data-kit-region="line">The recipient’s mail service refused the last send. Check the billing email, then send again.</p>
            <ul data-kit-region="causes"><li><a href="#record-email">Billing email</a></li></ul>
          </div>
          <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Preview invoice</span></button><a href="#facts" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
        </form>
        <h2 id="record-payment-title">Billing and payment</h2><p data-kit-role="presence"><span data-kit-role="avatar" data-kit-size="small" role="img" aria-label="Sam Okafor"><span data-kit-region="initials">S</span></span><span data-kit-region="editing">editing</span></p>
        <form data-kit-role="label-panel" aria-labelledby="decision-title">
          <h3 id="decision-title">Billing contact</h3>
          <div data-kit-role="form-group" data-kit-width="medium">
            <label for="record-contact">Contact name</label>
            <input id="record-contact" name="name" value="Aisha Khan" />
            <output for="record-contact">Aisha Khan</output>
          </div>
          <div data-kit-role="form-group" data-kit-holds="help">
            <label for="record-email">Billing email</label>
            <input id="record-email" name="email" type="email" value="aisha@oakmereprimary.org" aria-describedby="record-email-help" />
            <output for="record-email">aisha@oakmereprimary.org</output>
            <span data-kit-region="help" id="record-email-help">Invoices go to this address.</span>
          </div>
          <div data-kit-role="action-group">
            <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save contact details</span></button>
          </div>
          <p data-kit-role="status-line" role="status" aria-live="polite"></p>
        </form>
        <section data-kit-role="label-panel" aria-labelledby="settlement-title">
          <h3 id="settlement-title">Settlement</h3>
          <span data-kit-role="amount">£20.00</span>
        </section>
        <form data-kit-layout="form">
          <div data-kit-region="notices" aria-live="polite"></div>
          <div data-kit-region="form-groups">
            <div data-kit-region="notices" aria-live="polite"></div>
          <div data-kit-role="form-group" id="payment-received">
            <label for="payment-received-control" id="payment-received-label">Payment received on</label>
            <div data-kit-role="date-field" id="payment-received-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-09"}'>
              <input id="payment-received-control" type="text" autocomplete="off" value="Tuesday, 15 April 2025" aria-describedby="payment-received-control-resolved" aria-expanded="false" aria-controls="payment-received-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="payment-received-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
              <button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="payment-received-control-calendar" aria-label="Calendar" aria-describedby="payment-received-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="payment_received" value="2025-04-15">
              <div id="payment-received-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
            </div>
            <output for="payment-received-control"><time datetime="2025-04-15">Tuesday, 15 April 2025</time></output>
          </div>
          </div>
          <section data-kit-role="inline-consequence" aria-label="Record payment">
            <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
            <p data-kit-region="consequence">Recording this payment marks £20.00 of the invoice paid.</p>
            <p data-kit-region="effective-time">It takes effect as soon as you confirm.</p>
            <p data-kit-region="correction-path">You can remove a payment recorded in error from the invoice’s payments.</p>
          </section>
          <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Record payment</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
        </form>
      </aside>
      <section data-kit-region="notes-files-history" id="history" aria-labelledby="history-title">
        <h2 id="history-title">History</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Notes</h3>
          <div data-kit-region="content">
            <article data-kit-role="message-entry">
              <header>
                <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">MP</span></span>Maya Patel</span>
                <time data-kit-region="time" datetime="2025-02-12T10:30+00:00"><span>12 February 2025</span><wbr><span> at 10:30</span></time>
              </header>
              <div data-kit-region="body" data-kit-authored-text="true"><p>Ask <a data-kit-region="mention" href="../record/">@Aisha Khan</a> to confirm the address before the next send.</p></div>
            </article>
            <article data-kit-role="message-entry">
              <header>
                <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">TR</span><span data-kit-region="picture" style="background-image: url(&quot;data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIGZpbGw9IiM4ZmE1YjYiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjM4IiByPSIxOCIgZmlsbD0iI2U4YzlhOCIvPjxwYXRoIGQ9Ik00OCA2MGMtMTcgMC0yOSAxMS0zMSAyNnYxMGg2MlY4NmMtMi0xNS0xNC0yNi0zMS0yNnoiIGZpbGw9IiMzZjVkNTIiLz48cGF0aCBkPSJNMzAgMzRjMC0xMiA4LTIwIDE4LTIwczE4IDggMTggMjBjMC02LTYtOC0xOC04cy0xOCAyLTE4IDh6IiBmaWxsPSIjNGEzYTJmIi8+PC9zdmc+&quot;)"></span></span>Tom Reid</span>
                <time data-kit-region="time" datetime="2025-02-13T09:05+00:00"><span>13 February 2025</span><wbr><span> at 09:05</span></time>
              </header>
              <div data-kit-region="body" data-kit-authored-text="true"><p>Aisha confirmed the address by phone. Send it again today.</p></div>
            </article>
            <form data-kit-role="form-group"><label for="record-note">Note</label><textarea id="record-note" name="note"></textarea><button type="submit" data-kit-role="secondary-action"><span data-kit-region="label">Add note</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></form>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Files</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="../record/">Signed hire agreement</a>
                    </div>
                    <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-01-28">28 January 2025</time></span></p>
                    <p data-kit-region="facts"><span data-kit-region="fact">Maya Patel</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="../record/">Room check photographs</a>
                    </div>
                    <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-02-03">3 February 2025</time></span></p>
                    <p data-kit-region="facts"><span data-kit-region="fact">Aisha Khan</span></p></div>
                  </div>
                </div>
              </div>
            </article>
            <div data-kit-role="form-group"><label for="record-file">Add a file</label><input id="record-file" name="file" type="file" /></div>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Changes</h3>
          <div data-kit-region="content">
            <div data-kit-region="rows">
              <div data-kit-region="table" tabindex="0">
                <table data-kit-table="records" data-kit-print-form="rows">
                  <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Change</th><th scope="col" data-kit-column="time">From</th><th scope="col" data-kit-column="time">To</th><th scope="col" data-kit-column="time">Notified</th><th scope="col" data-kit-column="time">When</th><th scope="col">Recorded by</th></tr></thead>
                  <tbody>
                    <tr><th scope="row" data-kit-column="subject" data-label="Change"><div data-kit-region="value"><a href="../record/">Session moved</a></div></th><td data-kit-column="time" data-label="From"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-03-08T09:00+00:00"><span>8 March 2025</span><wbr><span> at 09:00</span></time></div></div></td><td data-kit-column="time" data-label="To"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-03-15T09:00+00:00"><span>15 March 2025</span><wbr><span> at 09:00</span></time></div></div></td><td data-kit-column="time" data-label="Notified"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-02-12T10:26+00:00"><span>12 February 2025</span><wbr><span> at 10:26</span></time></div></div></td><td data-kit-column="time" data-label="When"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-02-12T10:24+00:00"><span>12 February 2025</span><wbr><span> at 10:24</span></time></div></div></td><td data-label="Recorded by"><div data-kit-region="value"><div data-kit-region="fact">Maya Patel</div></div></td></tr>
                    <tr><th scope="row" data-kit-column="subject" data-label="Change"><div data-kit-region="value"><a href="../record/">Session shortened</a></div></th><td data-kit-column="time" data-label="From"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-03-15T13:00+00:00"><span>15 March 2025</span><wbr><span> at 13:00</span></time></div></div></td><td data-kit-column="time" data-label="To"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-03-15T12:00+00:00"><span>15 March 2025</span><wbr><span> at 12:00</span></time></div></div></td><td data-kit-column="time" data-label="Notified"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-01-28T16:42+00:00"><span>28 January 2025</span><wbr><span> at 16:42</span></time></div></div></td><td data-kit-column="time" data-label="When"><div data-kit-region="value"><div data-kit-region="fact"><time datetime="2025-01-28T16:40+00:00"><span>28 January 2025</span><wbr><span> at 16:40</span></time></div></div></td><td data-label="Recorded by"><div data-kit-region="value"><div data-kit-region="fact">Aisha Khan</div></div></td></tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div data-kit-layout="list">
              <div data-kit-region="notices" aria-live="polite"></div>
              <section data-kit-region="rows" aria-label="Invoice history">
                <div data-kit-region="notices" aria-live="polite"></div>
                <section data-kit-region="day" aria-labelledby="record-history-day-feb-12">
                  <h3 id="record-history-day-feb-12"><time datetime="2025-02-12">12 February 2025</time></h3>
                  <p data-kit-region="entry">Maya Patel corrected the billing email on <a data-kit-region="subject" href="#facts">Invoice OH-INV-003</a> from wrong@oakmereprimary.org to aisha@oakmereprimary.org after the recipient’s mail service refused the earlier send. <span data-kit-region="time"><time datetime="2025-02-12T10:24+00:00">10:24</time></span></p>
                </section>
                <section data-kit-region="day" aria-labelledby="record-history-day-jan-28">
                  <h3 id="record-history-day-jan-28"><time datetime="2025-01-28">28 January 2025</time></h3>
                  <p data-kit-region="entry">Maya Patel sent <a data-kit-region="subject" href="#facts">Invoice OH-INV-003</a> to Oakmere Primary School. <span data-kit-region="time"><time datetime="2025-01-28T16:40+00:00">16:40</time></span></p>
                </section>
              </section>
              <footer data-kit-region="count-continuation"><p>2 entries shown</p></footer>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div data-kit-role="image-overlay" id="record-damage-photo-overlay" tabindex="-1" aria-labelledby="record-damage-photo-overlay-caption">
      <figure data-kit-region="box">
        <div data-kit-region="image"><img src="../chair-damage.svg" width="800" height="500" alt="Chair with a split seat, photographed after a hall booking."><span hidden>The photo cannot be shown.</span></div>
        <figcaption data-kit-region="caption" id="record-damage-photo-overlay-caption">Split chair seat</figcaption>
        <nav data-kit-region="actions" aria-label="Damage photo">
          <a data-kit-role="secondary-action" href="../chair-damage.svg"><span data-kit-region="label">Open file</span></a>
          <a data-kit-role="secondary-action" href="#record-damage-photo"><span data-kit-region="label">Close</span></a>
        </nav>
      </figure>
      <div data-kit-region="ground" aria-hidden="true"></div>
    </div>
    <div data-kit-layout="record" id="layout-record-empty-region">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records" aria-labelledby="empty-region-invoice-title">
        <h2 id="empty-region-invoice-title">Oakmere Primary School invoice</h2>
      </section>
      <aside data-kit-region="decision-compact-work"></aside>
    </div>
  </main>
</div>

Record, no-decision-or-work

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p><p data-kit-region="standing"><span data-kit-role="stamp" data-kit-state="attention">Failed ·&nbsp;Recipient address refused</span></p></div>
    <div data-kit-region="next-previous"><span data-kit-region="position"><span data-kit-role="amount">1</span> of <span data-kit-role="amount">240</span></span><button type="button" aria-label="Previous" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="previous" disabled><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></button><a href="?record=2" aria-label="Next" data-kit-role="icon-action" data-kit-region="next"><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>
    <div data-kit-region="actions"><a href="../../layout-record/#layout-record-no-decision-or-work">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite">
        <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">Reminders are paused</p>
          <p data-kit-region="sentence">No reminder goes out for this hirer until the account is reviewed.</p>
        </div>
      </div>
      <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">Sending failed</p>
          <p data-kit-region="sentence">The recipient’s mail service refused the billing address, so the invoice was not delivered.</p>
        </div>
      </div>
      <section data-kit-region="facts-related-records" aria-labelledby="record-no-decision-or-work-title">
        <h2 id="record-no-decision-or-work-title">Oakmere Primary School invoice</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£84.00</dd><dd data-kit-region="supporting">1 booking</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Collected</dt><dd data-kit-region="value" data-kit-role="amount">£0.00</dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Delivery</dt><dd data-kit-region="value" data-kit-role="stamp" data-kit-state="attention">Address refused</dd></dl>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Messages</h3>
          <div data-kit-region="content">
        <div data-kit-region="rows">
          <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">Record</th><th scope="col">Message</th><th scope="col">Delivery</th></tr></thead>
              <tbody>
                <tr><th scope="row" data-kit-column="subject">Invoice OH-INV-003</th><td data-label="Message"><div data-kit-region="fact">Your invoice is ready</div></td><td data-label="Delivery"><div data-kit-region="value"><div data-kit-region="fact"><span data-kit-role="stamp" data-kit-state="attention">Address refused</span></div><span data-kit-region="supporting">Last tried <time datetime="2025-02-03">3 February 2025</time></span></div></td></tr>
              </tbody>
            </table>
          </div>
        </div>
          </div>
        </div>
      </section>
      <section data-kit-region="notes-files-history" aria-labelledby="record-no-decision-or-work-history-title">
        <h2 id="record-no-decision-or-work-history-title">History</h2>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Notes</h3>
          <div data-kit-region="content">
            <article data-kit-role="message-entry">
              <header>
                <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">MP</span></span>Maya Patel</span>
                <time data-kit-region="time" datetime="2025-02-12T10:30+00:00"><span>12 February 2025</span><wbr><span> at 10:30</span></time>
              </header>
              <div data-kit-region="body" data-kit-authored-text="true"><p>Ask Aisha to confirm the address before the next send.</p></div>
            </article>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Files</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">
                      <span data-kit-region="subject">Signed hire agreement</span>
                    </div>
                    <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-01-28">28 January 2025</time></span></p>
                    <p data-kit-region="facts"><span data-kit-region="fact">Maya Patel</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">Room check photographs</span>
                    </div>
                    <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2025-02-03">3 February 2025</time></span></p>
                    <p data-kit-region="facts"><span data-kit-region="fact">Aisha Khan</span></p></div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Changes</h3>
          <div data-kit-region="content">
            <div data-kit-layout="list">
              <div data-kit-region="notices" aria-live="polite"></div>
              <section data-kit-region="rows" aria-label="Invoice history">
                <div data-kit-region="notices" aria-live="polite"></div>
                <section data-kit-region="day" aria-labelledby="record-no-decision-or-work-day-feb-12">
                  <h3 id="record-no-decision-or-work-day-feb-12"><time datetime="2025-02-12">12 February 2025</time></h3>
                  <p data-kit-region="entry">Maya Patel corrected the billing email on <a data-kit-region="subject" href="#record-no-decision-or-work-title">Invoice OH-INV-003</a> from wrong@oakmereprimary.org to aisha@oakmereprimary.org after the recipient’s mail service refused the earlier send. <span data-kit-region="time"><time datetime="2025-02-12T10:24+00:00">10:24</time></span></p>
                </section>
                <section data-kit-region="day" aria-labelledby="record-no-decision-or-work-day-jan-28">
                  <h3 id="record-no-decision-or-work-day-jan-28"><time datetime="2025-01-28">28 January 2025</time></h3>
                  <p data-kit-region="entry">Maya Patel sent <a data-kit-region="subject" href="#record-no-decision-or-work-title">Invoice OH-INV-003</a> to Oakmere Primary School. <span data-kit-region="time"><time datetime="2025-01-28T16:40+00:00">16:40</time></span></p>
                </section>
              </section>
              <footer data-kit-region="count-continuation"><p>2 entries shown</p></footer>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
</div>

Record, calendar-item

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-record/#layout-record-calendar-item">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records" aria-labelledby="record-calendar-item-title">
        <h2 id="record-calendar-item-title">Yoga class</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Schedule</dt><dd data-kit-region="value"><time datetime="2025-04-15T10:00+01:00"><span>15 April 2025</span><wbr><span>, 10:00–</span><wbr><span>12:00</span></time></dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Kind</dt><dd data-kit-region="value">Booking</dd></dl>
        </div>
      </section>
      <aside data-kit-region="decision-compact-work">
        <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Move</span></button></div>
      </aside>
    </div>
  </main>
</div>

Record, unsaved

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-record/#layout-record-unsaved">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records" aria-labelledby="record-unsaved-title">
        <h2 id="record-unsaved-title">Oakmere Primary School</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact" data-kit-holds="edit">
            <dt data-kit-region="name">Billing email</dt>
            <dd data-kit-region="value"><span data-kit-region="email"><span><span>accounts@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Edit billing email"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"></path></svg></button></dd>
            <dd data-kit-region="supporting">Invoices for every hire go here</dd>
            <dd data-kit-region="edit-form" id="record-unsaved-email-edit">
              <form id="record-unsaved-email-edit-form" data-kit-keep="aisha-khan/hirer/oakmere-primary/billing-email" data-kit-keep-version="12">
                <div data-kit-role="form-group" data-kit-holds="help">
                  <label for="record-unsaved-email-control">Billing email</label>
                  <input id="record-unsaved-email-control" name="email" type="email" value="bursar@oakmereprimary.org" aria-describedby="record-unsaved-email-help">
                  <output for="record-unsaved-email-control">bursar@oakmereprimary.org</output>
                  <span data-kit-region="help" id="record-unsaved-email-help">Use the address that receives the hirer’s invoices.</span>
                </div>
                <div data-kit-role="action-group">
                  <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button>
                  <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
                  <p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p>
                </div>
              </form>
            </dd>
          </dl>
          <dl data-kit-role="labelled-fact">
            <dt data-kit-region="name">Telephone</dt>
            <dd data-kit-region="value">01632 960 123</dd>
          </dl>
        </div>
      </section>
    </div>
  </main>
</div>

Record, shared-columns

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-record/#layout-record-shared-columns">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records" aria-labelledby="record-shared-columns-title">
        <h2 id="record-shared-columns-title">March statement</h2>
        <div data-kit-region="rows">
          <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">Item</th><th scope="col" data-kit-column="time">Date</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
              <tbody data-kit-region="part" id="record-shared-columns-ledger">
                <tr><th scope="row" data-kit-column="subject">Opening balance</th><td data-kit-column="time" data-label="Date"><div data-kit-region="fact"><time datetime="2025-03-01">1 March 2025</time></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£120.00</div></td></tr>
                <tr><th scope="row" data-kit-column="subject"><a href="../">Hall hire</a></th><td data-kit-column="time" data-label="Date"><div data-kit-region="fact"><time datetime="2025-03-08">8 March 2025</time></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£60.00</div></td></tr>
                <tr><th scope="row" data-kit-column="subject"><a href="../">Card payment</a></th><td data-kit-column="time" data-label="Date"><div data-kit-region="fact"><time datetime="2025-03-12">12 March 2025</time></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">-£100.00</div></td></tr>
              </tbody>
              <tbody data-kit-region="total">
                <tr><th scope="row" data-kit-column="subject">Balance</th><td data-kit-column="time"></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£80.00</div></td></tr>
              </tbody>
              <tbody data-kit-region="part" id="record-shared-columns-expected">
                <tr data-kit-region="part-heading"><th scope="rowgroup" colspan="3"><div data-kit-region="heading">Expected charges</div><p>Not charged yet, so not in the balance.</p></th></tr>
                <tr><th scope="row" data-kit-column="subject">Hall hire</th><td data-kit-column="time" data-label="Date"><div data-kit-region="fact"><time datetime="2025-04-01">1 April 2025</time></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£60.00</div></td></tr>
              </tbody>
              <tbody data-kit-region="part" id="record-shared-columns-due">
                <tr data-kit-region="part-heading"><th scope="rowgroup" colspan="3"><div data-kit-region="heading">What’s due</div></th></tr>
                <tr><th scope="row" data-kit-column="subject"><a href="../">March balance</a></th><td data-kit-column="time" data-label="Date"><div data-kit-region="fact"><time datetime="2025-09-30">30 September 2025</time></div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">£80.00</div></td></tr>
              </tbody>
              <tbody data-kit-region="part" id="record-shared-columns-refunds" data-kit-state="empty">
                <tr data-kit-region="part-heading"><th scope="rowgroup" colspan="3"><div data-kit-region="heading">Refunds</div></th></tr>
                <tr><td colspan="3">No refunds this month.</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </div>
  </main>
</div>

Record, inert

Open the whole page

Source
<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-record/#layout-record-inert">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="facts-related-records" id="record-inert-facts" aria-labelledby="record-inert-title">
        <h2 id="record-inert-title">Oakmere Primary School invoice</h2>
        <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£84.00</dd></dl></div>
      </section>
      <aside data-kit-region="decision-compact-work">
        <form data-kit-region="decision">
          <section data-kit-role="inline-consequence" aria-label="Send Oakmere Primary School invoice">
            <h3 data-kit-region="subject">Oakmere Primary School invoice</h3>
            <p data-kit-region="consequence">Sending emails the £84.00 invoice to aisha@oakmereprimary.org.</p>
            <p data-kit-region="effective-time">It goes as soon as you confirm.</p>
            <p data-kit-region="correction-path">You can send a corrected invoice from this record.</p>
          </section>
          <div data-kit-role="action-group" data-kit-holds="words">
            <button type="button" id="record-inert-preview" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="record-inert-preview-words"><span data-kit-region="label">Preview invoice</span></button><p data-kit-region="words" id="record-inert-preview-words">The preview waits until the invoice is ready.</p>
            <button type="submit" id="record-inert-send" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="record-inert-send-words"><span data-kit-region="label">Send invoice</span></button><p data-kit-region="words" id="record-inert-send-words">Check the billing email before sending.</p>
            <a href="#record-inert-facts" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
            <p data-kit-role="status-line" role="status" aria-live="polite"></p>
          </div>
        </form>
      </aside>
    </div>
  </main>
</div>

Record, issued-document

Open the whole page

Source
<div data-kit-density="desk" data-kit-layout="shell">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
  <div>
    <h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Record</h1>
    <p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p>
    <p data-kit-region="standing"><span data-kit-role="stamp" data-kit-state="attention">Awaiting payment</span></p>
  </div>
  <div data-kit-region="actions"><a href="../../layout-record/#layout-record-issued-document">CSS core</a>
<button data-kit-region="share" data-kit-role="secondary-action" id="kit-shell-share" type="button" value="https://sahyadrihall.in/invoices/SHT-2026-27-0042.pdf">
  <span data-kit-region="label">Share</span>
</button><button aria-label="Copy link" data-kit-region="copy-link" data-kit-role="icon-action" id="kit-shell-copy-link" type="button" value="https://sahyadrihall.in/invoices/SHT-2026-27-0042"><svg data-kit-icon="link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z"></path></svg><svg data-kit-icon="check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></button></div>
</header>
  <main data-kit-region="body">
    <div data-kit-layout="record">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="notices" aria-live="polite"></div>
  <section aria-labelledby="record-issued-document-title" data-kit-region="facts-related-records"><h2 id="record-issued-document-title">Invoice SHT/2026-27/0042</h2>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Billed to</dt>
  <dd data-kit-region="value">Kothrud Music Circle</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">₹7,080.00</dd>
</dl>
          <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Due by</dt>
  <dd data-kit-region="value"><time datetime="2026-10-20">20 October 2026</time></dd>
</dl>
        </div>
      </section>
  <aside data-kit-region="decision-compact-work">
        <div data-kit-role="action-group">
<button data-kit-role="secondary-action" type="button">
  <span data-kit-region="label">Record payment</span>
</button>
</div>
      </aside>
  <div data-kit-layout="issued-document" id="issued-document-record">
  <article aria-labelledby="issued-document-record-title" data-kit-region="document">
    <header data-kit-region="title-letterhead">
      <div data-kit-region="letterhead">
  <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NiIgaGVpZ2h0PSI5NiIgdmlld0JveD0iMCAwIDk2IDk2Ij48cmVjdCB3aWR0aD0iOTYiIGhlaWdodD0iOTYiIHJ4PSIxNCIgZmlsbD0iIzdhMmUxZiIvPjxwYXRoIGQ9Ik00OCAxNiAxNCA0NGgxMHYzNmg0OFY0NGgxMHoiIGZpbGw9IiNmNmVmZTIiLz48cGF0aCBkPSJNNDAgODBWNThhOCA4IDAgMCAxIDE2IDB2MjJ6IiBmaWxsPSIjN2EyZTFmIi8+PC9zdmc+Cg==" width="96" height="96" alt="">
  <p data-kit-region="tenant">Sahyadri Hall Trust</p>
  <address>14 Prabhat Road, Erandwane, Pune 411004<br>accounts@sahyadrihall.in ·&nbsp;+91 20 2543 1180</address>
</div>
      <h1 data-kit-region="title" id="issued-document-record-title">Tax invoice</h1>
    </header>
    <div data-kit-region="number-dates">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Invoice number</dt>
  <dd data-kit-region="value">SHT/2026-27/0042</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Issued</dt>
  <dd data-kit-region="value"><time datetime="2026-10-05">5 October 2026</time></dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Due by</dt>
  <dd data-kit-region="value"><time datetime="2026-10-20">20 October 2026</time></dd>
</dl>
    </div>
  </div>
    <div data-kit-region="parties">
      <div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Billed to</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Name</dt>
  <dd data-kit-region="value">Kothrud Music Circle</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Address</dt>
  <dd data-kit-region="value">22 Paud Road, Kothrud, Pune 411038</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">GSTIN</dt>
  <dd data-kit-region="value">27AAAAK5678L1Z2</dd>
</dl>
    </div>
  </div>
</div><div data-kit-role="headed-region">
  <h3 data-kit-region="heading">Supplier</h3>
  <div data-kit-region="content">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">GSTIN</dt>
  <dd data-kit-region="value">27AAATS1234F1Z5</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">PAN</dt>
  <dd data-kit-region="value">AAATS1234F</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Place of supply</dt>
  <dd data-kit-region="value">Maharashtra (27)</dd>
</dl>
    </div>
  </div>
</div>
    </div>
    <div data-kit-region="lines">
    <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
  <thead data-kit-region="column-headings">
    <tr><th data-kit-column="subject" scope="col">Item</th><th scope="col">SAC</th><th data-kit-column="amount" scope="col">Hours</th><th data-kit-column="amount" scope="col">Rate</th><th data-kit-column="amount" scope="col">Amount</th></tr>
  </thead>
  <tbody>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Tuesday 1 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Thursday 3 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Saturday 5 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Tuesday 8 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Thursday 10 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Saturday 12 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Tuesday 15 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Thursday 17 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Saturday 19 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Tuesday 22 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Thursday 24 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">Rehearsal room, Saturday 26 September 2026, 18:00–20:00</th>
  <td data-label="SAC"><div data-kit-region="fact">997212</div></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">2</div></td><td data-kit-column="amount" data-label="Rate"><div data-kit-region="fact" data-kit-role="amount">₹250.00</div></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹500.00</div></td>
</tr>
  </tbody>
  <tfoot data-kit-region="total">
    <tr data-kit-holds="amount"><th data-kit-column="subject" scope="row">Total before tax</th><td></td><td data-kit-column="amount" data-label="Hours"><div data-kit-region="fact" data-kit-role="amount">24</div></td><td data-kit-column="amount"></td><td data-kit-column="amount" data-label="Amount"><div data-kit-region="fact" data-kit-role="amount">₹6,000.00</div></td></tr>
  </tfoot>
</table></div>
    <div data-kit-region="table" tabindex="0"><table aria-label="Tax summary" data-kit-table="records">
  <thead data-kit-region="column-headings">
    <tr><th data-kit-column="subject" scope="col">Tax</th><th scope="col">Rate</th><th data-kit-column="amount" scope="col">Taxable value</th><th data-kit-column="amount" scope="col">Tax</th></tr>
  </thead>
  <tbody>
<tr>
  <th data-kit-column="subject" scope="row">CGST</th>
  <td data-label="Rate"><div data-kit-region="fact">9%</div></td><td data-kit-column="amount" data-label="Taxable value"><div data-kit-region="fact" data-kit-role="amount">₹6,000.00</div></td><td data-kit-column="amount" data-label="Tax"><div data-kit-region="fact" data-kit-role="amount">₹540.00</div></td>
</tr>
<tr>
  <th data-kit-column="subject" scope="row">SGST</th>
  <td data-label="Rate"><div data-kit-region="fact">9%</div></td><td data-kit-column="amount" data-label="Taxable value"><div data-kit-region="fact" data-kit-role="amount">₹6,000.00</div></td><td data-kit-column="amount" data-label="Tax"><div data-kit-region="fact" data-kit-role="amount">₹540.00</div></td>
</tr>
  </tbody>
  <tfoot data-kit-region="total">
    <tr data-kit-holds="amount"><th data-kit-column="subject" scope="row">Total tax</th><td></td><td data-kit-column="amount" data-label="Taxable value"><div data-kit-region="fact" data-kit-role="amount">₹6,000.00</div></td><td data-kit-column="amount" data-label="Tax"><div data-kit-region="fact" data-kit-role="amount">₹1,080.00</div></td></tr>
  </tfoot>
</table></div>
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Amount due</dt>
  <dd data-kit-region="value" data-kit-role="amount">₹7,080.00</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Amount in words</dt>
  <dd data-kit-region="value">Rupees seven thousand and eighty only</dd>
</dl>
    </div>
  </div>
    <div data-kit-region="payment">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Bank</dt>
  <dd data-kit-region="value">Cosmos Co-operative Bank, Erandwane</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Account</dt>
  <dd data-kit-region="value">0123 4567 8901</dd>
</dl>
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">IFSC</dt>
  <dd data-kit-region="value">COSB0000012</dd>
</dl>
    </div>
    <div data-kit-role="scan-code">
  <svg aria-label="Pay ₹7,080.00 to Sahyadri Hall Trust by UPI" data-kit-region="code" role="img" viewBox="0 0 49 49"><path d="M4 4h7v1h-7zM15 4h1v1h-1zM18 4h2v1h-2zM21 4h4v1h-4zM27 4h1v1h-1zM30 4h3v1h-3zM35 4h2v1h-2zM38 4h7v1h-7zM4 5h1v1h-1zM10 5h1v1h-1zM14 5h4v1h-4zM19 5h2v1h-2zM22 5h1v1h-1zM25 5h9v1h-9zM36 5h1v1h-1zM38 5h1v1h-1zM44 5h1v1h-1zM4 6h1v1h-1zM6 6h3v1h-3zM10 6h1v1h-1zM13 6h2v1h-2zM17 6h3v1h-3zM22 6h2v1h-2zM26 6h1v1h-1zM28 6h1v1h-1zM30 6h1v1h-1zM32 6h3v1h-3zM36 6h1v1h-1zM38 6h1v1h-1zM40 6h3v1h-3zM44 6h1v1h-1zM4 7h1v1h-1zM6 7h3v1h-3zM10 7h1v1h-1zM13 7h1v1h-1zM18 7h1v1h-1zM20 7h4v1h-4zM27 7h2v1h-2zM31 7h1v1h-1zM36 7h1v1h-1zM38 7h1v1h-1zM40 7h3v1h-3zM44 7h1v1h-1zM4 8h1v1h-1zM6 8h3v1h-3zM10 8h1v1h-1zM13 8h2v1h-2zM20 8h3v1h-3zM26 8h8v1h-8zM36 8h1v1h-1zM38 8h1v1h-1zM40 8h3v1h-3zM44 8h1v1h-1zM4 9h1v1h-1zM10 9h1v1h-1zM12 9h3v1h-3zM16 9h1v1h-1zM22 9h5v1h-5zM28 9h1v1h-1zM30 9h3v1h-3zM35 9h2v1h-2zM38 9h1v1h-1zM44 9h1v1h-1zM4 10h7v1h-7zM12 10h1v1h-1zM14 10h1v1h-1zM16 10h1v1h-1zM18 10h1v1h-1zM20 10h1v1h-1zM22 10h1v1h-1zM24 10h1v1h-1zM26 10h1v1h-1zM28 10h1v1h-1zM30 10h1v1h-1zM32 10h1v1h-1zM34 10h1v1h-1zM36 10h1v1h-1zM38 10h7v1h-7zM13 11h1v1h-1zM21 11h1v1h-1zM24 11h5v1h-5zM30 11h7v1h-7zM4 12h1v1h-1zM7 12h1v1h-1zM9 12h2v1h-2zM12 12h5v1h-5zM18 12h3v1h-3zM23 12h1v1h-1zM25 12h1v1h-1zM27 12h5v1h-5zM34 12h4v1h-4zM39 12h1v1h-1zM5 13h3v1h-3zM12 13h1v1h-1zM17 13h2v1h-2zM20 13h1v1h-1zM24 13h3v1h-3zM28 13h2v1h-2zM32 13h1v1h-1zM34 13h1v1h-1zM36 13h1v1h-1zM38 13h1v1h-1zM4 14h2v1h-2zM7 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM15 14h2v1h-2zM19 14h2v1h-2zM23 14h1v1h-1zM25 14h1v1h-1zM29 14h2v1h-2zM32 14h1v1h-1zM35 14h1v1h-1zM37 14h1v1h-1zM39 14h1v1h-1zM42 14h2v1h-2zM4 15h2v1h-2zM7 15h2v1h-2zM14 15h1v1h-1zM16 15h2v1h-2zM23 15h3v1h-3zM29 15h1v1h-1zM31 15h2v1h-2zM34 15h3v1h-3zM42 15h1v1h-1zM5 16h1v1h-1zM7 16h1v1h-1zM9 16h3v1h-3zM14 16h1v1h-1zM16 16h1v1h-1zM19 16h1v1h-1zM21 16h2v1h-2zM25 16h2v1h-2zM29 16h1v1h-1zM31 16h1v1h-1zM38 16h2v1h-2zM41 16h1v1h-1zM43 16h1v1h-1zM4 17h1v1h-1zM7 17h1v1h-1zM14 17h1v1h-1zM16 17h1v1h-1zM21 17h1v1h-1zM25 17h1v1h-1zM29 17h1v1h-1zM32 17h1v1h-1zM34 17h2v1h-2zM42 17h1v1h-1zM44 17h1v1h-1zM4 18h1v1h-1zM6 18h1v1h-1zM8 18h9v1h-9zM20 18h1v1h-1zM24 18h1v1h-1zM27 18h4v1h-4zM32 18h2v1h-2zM37 18h1v1h-1zM40 18h5v1h-5zM5 19h4v1h-4zM11 19h1v1h-1zM14 19h2v1h-2zM18 19h1v1h-1zM20 19h2v1h-2zM23 19h1v1h-1zM25 19h3v1h-3zM29 19h1v1h-1zM33 19h2v1h-2zM38 19h3v1h-3zM43 19h1v1h-1zM4 20h1v1h-1zM8 20h1v1h-1zM10 20h3v1h-3zM15 20h2v1h-2zM18 20h1v1h-1zM21 20h1v1h-1zM23 20h1v1h-1zM25 20h1v1h-1zM28 20h1v1h-1zM30 20h1v1h-1zM32 20h5v1h-5zM41 20h1v1h-1zM7 21h2v1h-2zM13 21h1v1h-1zM18 21h1v1h-1zM20 21h1v1h-1zM22 21h2v1h-2zM25 21h5v1h-5zM34 21h1v1h-1zM37 21h2v1h-2zM42 21h3v1h-3zM6 22h1v1h-1zM9 22h8v1h-8zM18 22h1v1h-1zM20 22h1v1h-1zM22 22h1v1h-1zM24 22h1v1h-1zM28 22h1v1h-1zM32 22h3v1h-3zM38 22h1v1h-1zM42 22h3v1h-3zM4 23h1v1h-1zM7 23h2v1h-2zM11 23h2v1h-2zM15 23h1v1h-1zM17 23h1v1h-1zM21 23h6v1h-6zM28 23h1v1h-1zM30 23h4v1h-4zM39 23h3v1h-3zM4 24h1v1h-1zM6 24h1v1h-1zM8 24h4v1h-4zM13 24h1v1h-1zM16 24h3v1h-3zM21 24h3v1h-3zM25 24h5v1h-5zM31 24h1v1h-1zM34 24h1v1h-1zM38 24h2v1h-2zM41 24h3v1h-3zM4 25h1v1h-1zM11 25h3v1h-3zM15 25h1v1h-1zM17 25h1v1h-1zM19 25h2v1h-2zM22 25h1v1h-1zM24 25h3v1h-3zM29 25h2v1h-2zM32 25h1v1h-1zM34 25h1v1h-1zM36 25h4v1h-4zM41 25h1v1h-1zM44 25h1v1h-1zM4 26h1v1h-1zM7 26h1v1h-1zM9 26h2v1h-2zM13 26h1v1h-1zM15 26h1v1h-1zM18 26h1v1h-1zM20 26h1v1h-1zM23 26h1v1h-1zM25 26h1v1h-1zM29 26h2v1h-2zM33 26h1v1h-1zM35 26h3v1h-3zM40 26h1v1h-1zM43 26h1v1h-1zM4 27h3v1h-3zM11 27h1v1h-1zM13 27h1v1h-1zM15 27h1v1h-1zM18 27h1v1h-1zM23 27h3v1h-3zM29 27h1v1h-1zM31 27h1v1h-1zM34 27h4v1h-4zM39 27h1v1h-1zM42 27h1v1h-1zM4 28h1v1h-1zM7 28h4v1h-4zM16 28h5v1h-5zM24 28h2v1h-2zM27 28h3v1h-3zM31 28h1v1h-1zM33 28h1v1h-1zM36 28h1v1h-1zM38 28h2v1h-2zM42 28h3v1h-3zM4 29h1v1h-1zM11 29h4v1h-4zM16 29h1v1h-1zM18 29h1v1h-1zM21 29h1v1h-1zM23 29h4v1h-4zM28 29h1v1h-1zM32 29h6v1h-6zM6 30h3v1h-3zM10 30h4v1h-4zM17 30h1v1h-1zM20 30h2v1h-2zM26 30h2v1h-2zM30 30h1v1h-1zM34 30h1v1h-1zM38 30h1v1h-1zM40 30h1v1h-1zM44 30h1v1h-1zM4 31h1v1h-1zM6 31h1v1h-1zM9 31h1v1h-1zM11 31h4v1h-4zM17 31h1v1h-1zM19 31h5v1h-5zM25 31h1v1h-1zM27 31h1v1h-1zM29 31h1v1h-1zM31 31h1v1h-1zM33 31h3v1h-3zM37 31h2v1h-2zM43 31h2v1h-2zM4 32h4v1h-4zM9 32h3v1h-3zM15 32h2v1h-2zM20 32h3v1h-3zM24 32h1v1h-1zM26 32h2v1h-2zM32 32h2v1h-2zM35 32h1v1h-1zM37 32h1v1h-1zM41 32h1v1h-1zM43 32h2v1h-2zM5 33h1v1h-1zM13 33h1v1h-1zM15 33h2v1h-2zM22 33h2v1h-2zM27 33h1v1h-1zM29 33h1v1h-1zM36 33h2v1h-2zM39 33h1v1h-1zM41 33h2v1h-2zM44 33h1v1h-1zM4 34h1v1h-1zM6 34h3v1h-3zM10 34h3v1h-3zM14 34h1v1h-1zM16 34h3v1h-3zM20 34h1v1h-1zM23 34h2v1h-2zM28 34h1v1h-1zM30 34h1v1h-1zM33 34h1v1h-1zM36 34h2v1h-2zM40 34h3v1h-3zM44 34h1v1h-1zM6 35h3v1h-3zM15 35h2v1h-2zM18 35h1v1h-1zM21 35h1v1h-1zM23 35h3v1h-3zM28 35h1v1h-1zM31 35h1v1h-1zM33 35h4v1h-4zM39 35h3v1h-3zM43 35h1v1h-1zM4 36h1v1h-1zM7 36h4v1h-4zM15 36h1v1h-1zM17 36h1v1h-1zM23 36h1v1h-1zM27 36h3v1h-3zM31 36h1v1h-1zM34 36h1v1h-1zM36 36h7v1h-7zM44 36h1v1h-1zM12 37h3v1h-3zM16 37h5v1h-5zM23 37h3v1h-3zM29 37h2v1h-2zM33 37h4v1h-4zM40 37h2v1h-2zM43 37h2v1h-2zM4 38h7v1h-7zM15 38h1v1h-1zM18 38h1v1h-1zM20 38h2v1h-2zM23 38h1v1h-1zM25 38h1v1h-1zM28 38h1v1h-1zM30 38h1v1h-1zM33 38h1v1h-1zM36 38h1v1h-1zM38 38h1v1h-1zM40 38h2v1h-2zM43 38h1v1h-1zM4 39h1v1h-1zM10 39h1v1h-1zM12 39h1v1h-1zM16 39h1v1h-1zM20 39h2v1h-2zM23 39h3v1h-3zM29 39h3v1h-3zM36 39h1v1h-1zM40 39h1v1h-1zM42 39h2v1h-2zM4 40h1v1h-1zM6 40h3v1h-3zM10 40h1v1h-1zM13 40h1v1h-1zM18 40h3v1h-3zM23 40h2v1h-2zM26 40h1v1h-1zM28 40h1v1h-1zM32 40h3v1h-3zM36 40h6v1h-6zM44 40h1v1h-1zM4 41h1v1h-1zM6 41h3v1h-3zM10 41h1v1h-1zM12 41h2v1h-2zM16 41h1v1h-1zM18 41h1v1h-1zM20 41h1v1h-1zM23 41h2v1h-2zM26 41h1v1h-1zM28 41h2v1h-2zM33 41h1v1h-1zM36 41h1v1h-1zM38 41h1v1h-1zM40 41h1v1h-1zM42 41h2v1h-2zM4 42h1v1h-1zM6 42h3v1h-3zM10 42h1v1h-1zM13 42h2v1h-2zM16 42h1v1h-1zM18 42h1v1h-1zM22 42h1v1h-1zM26 42h3v1h-3zM33 42h3v1h-3zM37 42h1v1h-1zM39 42h2v1h-2zM43 42h2v1h-2zM4 43h1v1h-1zM10 43h1v1h-1zM14 43h1v1h-1zM16 43h1v1h-1zM19 43h1v1h-1zM21 43h1v1h-1zM23 43h1v1h-1zM25 43h2v1h-2zM29 43h1v1h-1zM31 43h1v1h-1zM33 43h1v1h-1zM36 43h1v1h-1zM43 43h1v1h-1zM4 44h7v1h-7zM12 44h7v1h-7zM20 44h1v1h-1zM22 44h1v1h-1zM24 44h3v1h-3zM33 44h1v1h-1zM36 44h1v1h-1zM38 44h1v1h-1zM42 44h2v1h-2z"></path></svg>
  <div data-kit-region="value">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">UPI ID</dt>
  <dd data-kit-region="value"><div data-kit-role="copyable" id="issued-document-record-upi-id">
  <code>sahyadrihall@okaxis</code>
<button data-kit-changed-label="Copied" data-kit-resting-label="Copy" data-kit-role="secondary-action" type="button">
  <span data-kit-region="label">Copy</span>
</button>
</div></dd>
</dl>
    </div>
  </div>
</div>
  </div>
    <div data-kit-region="terms">
    <div data-kit-role="fact-group">
      <dl data-kit-role="labelled-fact">
  <dt data-kit-region="name">Terms</dt>
  <dd data-kit-region="value">Payment is due within 15 days. Quote the invoice number with your payment.</dd>
</dl>
    </div>
  </div>
    <div data-kit-region="signatory">
      <p data-kit-region="tenant">Sahyadri Hall Trust</p>
      <span data-kit-role="image" id="issued-document-record-signature"><img alt="Signature of the treasurer" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNDAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCAyNDAgODAiPjxwYXRoIGQ9Ik0xMCA1OGMxNC0zMCAyNi00NCAzMi0zOHMtMTQgNDAtNiA0MiAyMi0zNCAzMC0zMC04IDI2IDAgMjYgMTYtMjAgMjQtMTggMiAxNCAxMCAxNCAxOC0xNiAyOC0xNCA0IDEwIDE0IDEwIDMwLTggNDYtMTJNNjAgNjZjNDAtNiA5MC04IDE0MC02IiBmaWxsPSJub25lIiBzdHJva2U9IiMxZDJhNWMiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+Cg=="></span>
      <p>Treasurer</p>
    </div>
  </article>
</div>
</div>
  </main>
</div>