kit

Pager

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 List, Find, Reports

Pager

First page
Go to page
Go to page refused
Last page
One page

12 invoices

Source
<div data-kit-layout="find">
<div data-kit-region="notices" aria-live="polite"></div>
<footer data-kit-region="page-foot">
  <p>Invoice <span data-kit-role="amount">1</span> of <span data-kit-role="amount">12</span> ·&nbsp;<span data-kit-role="amount">1</span> per page</p>
  <nav data-kit-role="pager" aria-label="Invoice pages">
    <span data-kit-region="desk-window"><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?view=all&amp;page=2" aria-label="Page 2">2</a><span>…</span><a href="?view=all&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;page=2" rel="next">Next</a></span>
    <span data-kit-region="phone-window"><a role="link" aria-disabled="true" data-kit-state="inert">Previous</a><span data-kit-state="current" aria-current="page" aria-label="Page 1, first page">1</span><a href="?view=all&amp;page=2" aria-label="Page 2">2</a><span>…</span><a href="?view=all&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;page=2" rel="next">Next</a></span>
  </nav>
</footer>
</div>
<div data-kit-layout="find">
<div data-kit-region="notices" aria-live="polite"></div>
<footer data-kit-region="page-foot">
  <p>Invoices <span data-kit-role="amount">126</span>–<span data-kit-role="amount">150</span> of <span data-kit-role="amount">300</span></p>
  <form data-kit-region="rows-per-page">
    <div data-kit-role="form-group" id="pager-rows-per-page">
      <label for="pager-rows-per-page-control">Rows per page</label>
      <div data-kit-region="select"><select id="pager-rows-per-page-control" name="rows_per_page">
        <option selected value="25">25</option><option value="50">50</option><option value="100">100</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>
  </form>
  <nav data-kit-role="pager" aria-label="Invoice pages">
    <span data-kit-region="desk-window"><a href="?view=all&amp;size=25&amp;page=5" rel="prev">Previous</a><a href="?view=all&amp;size=25&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&amp;size=25&amp;page=4" aria-label="Page 4">4</a><a href="?view=all&amp;size=25&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="?view=all&amp;size=25&amp;page=7" aria-label="Page 7">7</a><a href="?view=all&amp;size=25&amp;page=8" aria-label="Page 8">8</a><span>…</span><a href="?view=all&amp;size=25&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;size=25&amp;page=7" rel="next">Next</a></span>
    <span data-kit-region="phone-window"><a href="?view=all&amp;size=25&amp;page=5" rel="prev">Previous</a><a href="?view=all&amp;size=25&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="?view=all&amp;size=25&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;size=25&amp;page=7" rel="next">Next</a></span>
  </nav>
  <form data-kit-region="go-to-page">
    <div data-kit-role="form-group" id="pager-go-to-page">
      <label for="pager-go-to-page-control" id="pager-go-to-page-label">Go to page</label>
      <div data-kit-number='{"fraction":false,"locale":"en-GB","max":12,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="pager-go-to-page-control-number-field">
        <input autocomplete="off" autocorrect="off" enterkeyhint="go" id="pager-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value="">
        <input type="hidden" name="page" value="">
      </div>
    </div>
  </form>
</footer>
</div>
<div data-kit-layout="find">
<div data-kit-region="notices" aria-live="polite"></div>
<footer data-kit-region="page-foot">
  <p>Invoices <span data-kit-role="amount">126</span>–<span data-kit-role="amount">150</span> of <span data-kit-role="amount">300</span></p>
  <form data-kit-region="rows-per-page">
    <div data-kit-role="form-group" id="pager-refused-rows-per-page">
      <label for="pager-refused-rows-per-page-control">Rows per page</label>
      <div data-kit-region="select"><select id="pager-refused-rows-per-page-control" name="rows_per_page">
        <option selected value="25">25</option><option value="50">50</option><option value="100">100</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>
  </form>
  <nav data-kit-role="pager" aria-label="Invoice pages">
    <span data-kit-region="desk-window"><a href="?view=all&amp;size=25&amp;page=5" rel="prev">Previous</a><a href="?view=all&amp;size=25&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&amp;size=25&amp;page=4" aria-label="Page 4">4</a><a href="?view=all&amp;size=25&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="?view=all&amp;size=25&amp;page=7" aria-label="Page 7">7</a><a href="?view=all&amp;size=25&amp;page=8" aria-label="Page 8">8</a><span>…</span><a href="?view=all&amp;size=25&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;size=25&amp;page=7" rel="next">Next</a></span>
    <span data-kit-region="phone-window"><a href="?view=all&amp;size=25&amp;page=5" rel="prev">Previous</a><a href="?view=all&amp;size=25&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="?view=all&amp;size=25&amp;page=12" aria-label="Page 12, last page">12</a><a href="?view=all&amp;size=25&amp;page=7" rel="next">Next</a></span>
  </nav>
  <form data-kit-region="go-to-page">
    <div data-kit-role="form-group" data-kit-state="error" id="pager-refused-go-to-page">
      <label for="pager-refused-go-to-page-control" id="pager-refused-go-to-page-label">Go to page</label>
      <div data-kit-number='{"fraction":false,"locale":"en-GB","max":12,"min":1}' data-kit-role="number-field" data-kit-width="narrow" id="pager-refused-go-to-page-control-number-field">
        <input aria-describedby="pager-refused-go-to-page-error" aria-invalid="true" autocomplete="off" autocorrect="off" enterkeyhint="go" id="pager-refused-go-to-page-control" inputmode="numeric" spellcheck="false" type="text" value="">
        <input type="hidden" name="page" value="">
      </div>
      <span data-kit-region="error" id="pager-refused-go-to-page-error">Type a page from 1 to 12.</span>
    </div>
  </form>
</footer>
</div>
<div data-kit-layout="find">
<div data-kit-region="notices" aria-live="polite"></div>
<footer data-kit-region="page-foot">
  <p>Invoice <span data-kit-role="amount">12</span> of <span data-kit-role="amount">12</span> ·&nbsp;<span data-kit-role="amount">1</span> per page</p>
  <nav data-kit-role="pager" aria-label="Invoice pages">
    <span data-kit-region="desk-window"><a href="?view=all&amp;page=11" rel="prev">Previous</a><a href="?view=all&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&amp;page=11" aria-label="Page 11">11</a><span data-kit-state="current" aria-current="page" aria-label="Page 12, last page">12</span><a role="link" aria-disabled="true" data-kit-state="inert">Next</a></span>
    <span data-kit-region="phone-window"><a href="?view=all&amp;page=11" rel="prev">Previous</a><a href="?view=all&amp;page=1" aria-label="Page 1, first page">1</a><span>…</span><a href="?view=all&amp;page=11" aria-label="Page 11">11</a><span data-kit-state="current" aria-current="page" aria-label="Page 12, last page">12</span><a role="link" aria-disabled="true" data-kit-state="inert">Next</a></span>
  </nav>
</footer>
</div>
<div data-kit-layout="find">
<div data-kit-region="notices" aria-live="polite"></div>
<footer data-kit-region="page-foot">
  <p><span data-kit-role="amount">12</span> invoices</p>
  <form data-kit-region="rows-per-page">
    <div data-kit-role="form-group" id="pager-single-rows-per-page">
      <label for="pager-single-rows-per-page-control">Rows per page</label>
      <div data-kit-region="select"><select id="pager-single-rows-per-page-control" name="rows_per_page">
        <option selected value="25">25</option><option value="50">50</option><option value="100">100</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>
  </form>
</footer>
</div>