kit

Find

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.

Find

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">Find</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../layout-find/#layout-find">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="find">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="query" data-kit-role="form-group"><label for="find-query">Find a subject or command</label><div data-kit-region="control"><input id="find-query" type="search" enterkeyhint="search" value="new" placeholder="Find a hirer, booking, hall or invoice" autofocus aria-describedby="find-count"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="find-query-clear" aria-label="Clear"><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>
      <div data-kit-region="scope"><div data-kit-role="form-group" id="find-scope-form-group"><fieldset><legend id="find-scope-form-group-label">Search in</legend><div data-kit-role="segmented-control" id="find-scope-form-group-control"><label data-kit-region="segment"><input type="radio" name="find-scope" value="all" checked><span data-kit-region="segment-name">All</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="hirers"><span data-kit-region="segment-name">Hirers</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="bookings"><span data-kit-region="segment-name">Bookings</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="halls"><span data-kit-region="segment-name">Halls</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="invoices"><span data-kit-region="segment-name">Invoices</span></label></div></fieldset></div></div>
      <p data-kit-region="scope-count" id="find-count">12 results for “new”</p>
      <section data-kit-region="subject-groups" aria-labelledby="hirers-title"><div data-kit-region="notices" aria-live="polite"></div><div data-kit-role="headed-region"><h2 data-kit-region="heading" id="hirers-title">Hirers</h2><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/">Riverside Newcomers Club</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Billing contact: Maya Patel</span></p></div></div></div></div></article></div></div></section>
      <section data-kit-region="command-group" aria-labelledby="commands-title"><h2 id="commands-title">Commands</h2><ul data-kit-region="commands"><li data-kit-region="command"><a href="../calendar/" aria-keyshortcuts="n"><span data-kit-region="name">New booking</span><span data-kit-region="keys" aria-hidden="true"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span></a></li></ul></section>
      <footer data-kit-region="page-foot">
        <p>Result 6 of 12 ·&nbsp;1 per page</p>
        <nav data-kit-role="pager" aria-label="Search result pages">
          <span data-kit-region="desk-window"><a href="?query=new&amp;page=5" rel="prev">Previous</a><a href="?query=new&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?query=new&amp;page=4" aria-label="Page 4">4</a><a href="?query=new&amp;page=5" aria-label="Page 5">5</a><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><a href="?query=new&amp;page=7" aria-label="Page 7">7</a><a href="?query=new&amp;page=8" aria-label="Page 8">8</a><span>…</span><a href="?query=new&amp;page=12" aria-label="Page 12, last page">12</a><a href="?query=new&amp;page=7" rel="next">Next</a></span>
          <span data-kit-region="phone-window"><a href="?query=new&amp;page=5" rel="prev">Previous</a><a href="?query=new&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><span>…</span><a href="?query=new&amp;page=12" aria-label="Page 12, last page">12</a><a href="?query=new&amp;page=7" rel="next">Next</a></span>
        </nav>
      </footer>
    </div>
    <div data-kit-layout="find">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="query" data-kit-role="form-group" id="find-scan-form-group">
        <label for="find-scan-query">Find a reference</label>
        <div data-kit-region="control">
          <input id="find-scan-query" name="query" type="search" enterkeyhint="search" value="INV-1042" placeholder="Find by reference">
          <button type="button" data-kit-role="icon-action" data-kit-region="clear" id="find-scan-query-clear" aria-label="Clear"><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>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Scan</span></button>
        </div>
        <div data-kit-region="stream"><video data-kit-region="camera" muted playsinline></video><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button></div>
      </div>
      <p data-kit-region="scope-count">1 result for “INV-1042”</p>
      <section data-kit-region="subject-groups"><div data-kit-region="notices" aria-live="polite"></div><div data-kit-role="headed-region"><h2 data-kit-region="heading">Invoices</h2><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/">INV-1042</a></div></div></div></div></article></div></div></section>
    </div>
    <div data-kit-layout="find" id="layout-find-empty-region">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="query" data-kit-role="form-group"><label for="empty-region-find-query">Find a subject or command</label><div data-kit-region="control"><input id="empty-region-find-query" type="search" enterkeyhint="search" value="North" placeholder="Find a hirer, booking, hall or invoice" aria-describedby="empty-region-find-count"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="empty-region-find-query-clear" aria-label="Clear"><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>
      <p data-kit-region="scope-count" id="empty-region-find-count">12 results for “North”</p>
      <footer data-kit-region="page-foot"></footer>
    </div>
    <div data-kit-layout="find" id="layout-find-command-waiting">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="query" data-kit-role="form-group"><label for="waiting-find-query">Find a subject or command</label><div data-kit-region="control"><input id="waiting-find-query" type="search" enterkeyhint="search" value="new" placeholder="Find a hirer, booking, hall or invoice" aria-describedby="waiting-find-count"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="waiting-find-query-clear" aria-label="Clear"><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>
      <p data-kit-region="scope-count" id="waiting-find-count">12 results for “new”</p>
      <section data-kit-region="command-group" aria-labelledby="waiting-commands-title"><h2 id="waiting-commands-title">Commands</h2><ul data-kit-region="commands"><li data-kit-region="command"><button type="button" aria-busy="true" aria-keyshortcuts="n"><span data-kit-region="name">New booking</span><span data-kit-region="keys" aria-hidden="true"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span></button></li></ul></section>
      <footer data-kit-region="page-foot"></footer>
    </div>
  </main>
</div>

Find, refused-undo

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">Find</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-find/#layout-find-refused-undo">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <div data-kit-layout="find">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-role="refusal" id="find-undo-refused-1" role="alert" aria-atomic="true">
        <p data-kit-region="line">Undo is refused: North Hall Players was deleted after you archived it.</p>
      </div>
      <div data-kit-region="query" data-kit-role="form-group"><label for="find-query">Find a subject or command</label><div data-kit-region="control"><input id="find-query" type="search" enterkeyhint="search" value="new" placeholder="Find a hirer, booking, hall or invoice" autofocus aria-describedby="find-count"><button type="button" data-kit-role="icon-action" data-kit-region="clear" id="find-query-clear" aria-label="Clear"><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>
      <div data-kit-region="scope"><div data-kit-role="form-group" id="find-scope-form-group"><fieldset><legend id="find-scope-form-group-label">Search in</legend><div data-kit-role="segmented-control" id="find-scope-form-group-control"><label data-kit-region="segment"><input type="radio" name="find-scope" value="all" checked><span data-kit-region="segment-name">All</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="hirers"><span data-kit-region="segment-name">Hirers</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="bookings"><span data-kit-region="segment-name">Bookings</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="halls"><span data-kit-region="segment-name">Halls</span></label><label data-kit-region="segment"><input type="radio" name="find-scope" value="invoices"><span data-kit-region="segment-name">Invoices</span></label></div></fieldset></div></div>
      <p data-kit-region="scope-count" id="find-count">12 results for “new”</p>
      <section data-kit-region="subject-groups" aria-labelledby="hirers-title"><div data-kit-region="notices" aria-live="polite"></div><div data-kit-role="headed-region"><h2 data-kit-region="heading" id="hirers-title">Hirers</h2><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/">Riverside Newcomers Club</a></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Billing contact: Maya Patel</span></p></div></div></div></div></article></div></div></section>
      <section data-kit-region="command-group" aria-labelledby="commands-title"><h2 id="commands-title">Commands</h2><ul data-kit-region="commands"><li data-kit-region="command"><a href="../../calendar/" aria-keyshortcuts="n"><span data-kit-region="name">New booking</span><span data-kit-region="keys" aria-hidden="true"><kbd data-kit-role="label-panel" data-kit-region="key">n</kbd></span></a></li></ul></section>
      <footer data-kit-region="page-foot">
        <p>Result 6 of 12 ·&nbsp;1 per page</p>
        <nav data-kit-role="pager" aria-label="Search result pages">
          <span data-kit-region="desk-window"><a href="?query=new&amp;page=5" rel="prev">Previous</a><a href="?query=new&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?query=new&amp;page=4" aria-label="Page 4">4</a><a href="?query=new&amp;page=5" aria-label="Page 5">5</a><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><a href="?query=new&amp;page=7" aria-label="Page 7">7</a><a href="?query=new&amp;page=8" aria-label="Page 8">8</a><span>…</span><a href="?query=new&amp;page=12" aria-label="Page 12, last page">12</a><a href="?query=new&amp;page=7" rel="next">Next</a></span>
          <span data-kit-region="phone-window"><a href="?query=new&amp;page=5" rel="prev">Previous</a><a href="?query=new&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><span data-kit-state="current" aria-current="page" aria-label="Page 6">6</span><span>…</span><a href="?query=new&amp;page=12" aria-label="Page 12, last page">12</a><a href="?query=new&amp;page=7" rel="next">Next</a></span>
        </nav>
      </footer>
    </div>
  </main>
</div>