kit

Pane divider

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Shell, List

Pane divider

Invoices awaiting payment
InvoiceHirerNoteAmount due
INV-001
Priya Shah
Reminder sent. She asked to pay once her last booking of the term has taken place.
£84.00
INV-002
Oakmere Primary School
Paid by bank transfer on Friday, not yet arrived.
£126.00

The divider stands at the Side panel's edge on Shell with a preview beside the List and Shell with work beside the List.

Source
<div class="specimen-table-contained">
  <div data-kit-region="table" tabindex="0"><table data-kit-table="records">
    <caption>Invoices awaiting payment</caption>
    <thead data-kit-region="column-headings"><tr><th scope="col" data-kit-column="subject">Invoice</th><th data-kit-holds="pane-divider" scope="col" id="pane-divider-hirer">Hirer<div aria-controls="pane-divider-hirer" aria-labelledby="pane-divider-hirer" aria-orientation="vertical" data-kit-role="pane-divider" id="pane-divider-hirer-divider" role="separator" tabindex="0"><span data-kit-region="grip"><svg data-kit-icon="dots-six-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z"></path></svg></span></div></th><th scope="col">Note</th><th scope="col" data-kit-column="amount">Amount due</th></tr></thead>
    <tbody><tr><th scope="row" data-kit-column="subject"><a href="#role-pane-divider"><code>INV-001</code></a></th><td data-label="Hirer"><div data-kit-region="fact">Priya Shah</div></td><td data-label="Note"><div data-kit-region="fact">Reminder sent. She asked to pay once her last booking of the term has taken place.</div></td><td data-label="Amount due" data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£84.00</div></td></tr><tr><th scope="row" data-kit-column="subject"><a href="#role-pane-divider"><code>INV-002</code></a></th><td data-label="Hirer"><div data-kit-region="fact">Oakmere Primary School</div></td><td data-label="Note"><div data-kit-region="fact">Paid by bank transfer on Friday, not yet arrived.</div></td><td data-label="Amount due" data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£126.00</div></td></tr></tbody>
  </table></div>
</div>
<p>The divider stands at the Side panel's edge on <a href="../shell/desk/side-panel/">Shell with a preview beside the List</a> and <a href="../shell/desk/side-panel/work/">Shell with work beside the List</a>.</p>