kit

Count

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, Reports, Calendar

Count

Enquiries 1,240 unread Checks 4 due Invoices
Source
<a data-kit-role="destination" href="#role-count"><span data-kit-region="name">Enquiries</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">1,240 unread</span></span></a>
<a data-kit-role="destination" href="#role-count"><span data-kit-region="name">Checks</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 due</span></span></a>
<a data-kit-role="destination" href="#role-count"><span data-kit-region="name">Invoices</span> </a>
<nav aria-label="Enquiry views" data-kit-role="local-tabs" id="role-count-enquiry-views">
  <a href="#role-count" aria-current="page" data-kit-state="current"><span data-kit-region="name">Open</span><span data-kit-region="reserve" aria-hidden="true">Open</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">128 unread</span></span></a>
  <a href="#role-count"><span data-kit-region="name">Waiting</span><span data-kit-region="reserve" aria-hidden="true">Waiting</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 due</span></span></a>
  <a href="#role-count"><span data-kit-region="name">Closed</span><span data-kit-region="reserve" aria-hidden="true">Closed</span> </a>
  <div data-kit-region="more" hidden>
    <button data-kit-role="subtle-action" popovertarget="role-count-enquiry-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span><span data-kit-role="count" hidden><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 due</span></span></span></button>
    <div data-kit-role="popover" id="role-count-enquiry-views-more" popover="auto">
      <ul>
        <li hidden><a href="#role-count" aria-current="page"><span data-kit-region="name">Open</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">128 unread</span></span></a></li>
        <li hidden><a href="#role-count"><span data-kit-region="name">Waiting</span> <span data-kit-role="count"><span data-kit-region="shown" aria-hidden="true">4</span><span data-kit-region="spoken">4 due</span></span></a></li>
        <li hidden><a href="#role-count"><span data-kit-region="name">Closed</span> </a></li>
      </ul>
    </div>
  </div>
</nav>

Count, attention

Inbox 7 unread Checks 240 due
Source
<a data-kit-role="destination" href="#role-count-attention"><span data-kit-region="name">Inbox</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">7</span><span data-kit-region="spoken">7 unread</span></span></a>
<a data-kit-role="destination" href="#role-count-attention"><span data-kit-region="name">Checks</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">240 due</span></span></a>
<nav aria-label="Check views" data-kit-role="local-tabs" id="role-count-attention-check-views">
  <a href="#role-count-attention" aria-current="page" data-kit-state="current"><span data-kit-region="name">This week</span><span data-kit-region="reserve" aria-hidden="true">This week</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a>
  <a href="#role-count-attention"><span data-kit-region="name">Unread notes</span><span data-kit-region="reserve" aria-hidden="true">Unread notes</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">240 unread</span></span></a>
  <a href="#role-count-attention"><span data-kit-region="name">Done</span><span data-kit-region="reserve" aria-hidden="true">Done</span></a>
  <div data-kit-region="more" hidden>
    <button data-kit-role="subtle-action" popovertarget="role-count-attention-check-views-more" type="button"><span data-kit-region="label"><span data-kit-region="name">More</span><span data-kit-role="count" data-kit-state="attention" hidden><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">240 unread</span></span></span></button>
    <div data-kit-role="popover" id="role-count-attention-check-views-more" popover="auto">
      <ul>
        <li hidden><a href="#role-count-attention" aria-current="page"><span data-kit-region="name">This week</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">3</span><span data-kit-region="spoken">3 due</span></span></a></li>
        <li hidden><a href="#role-count-attention"><span data-kit-region="name">Unread notes</span> <span data-kit-role="count" data-kit-state="attention"><span data-kit-region="shown" aria-hidden="true">99+</span><span data-kit-region="spoken">240 unread</span></span></a></li>
        <li hidden><a href="#role-count-attention"><span data-kit-region="name">Done</span></a></li>
      </ul>
    </div>
  </div>
</nav>