kit

Unavailable

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.

Unavailable

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>
  <nav data-kit-region="rail" aria-label="Application">
    <a data-kit-role="identity" data-kit-region="rail-head" href="?destination=assigned-work#main"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></a>
    <ul>
      <li><a data-kit-role="destination" href="?destination=assigned-work#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Assigned work</span></a></li></ul><ul data-kit-region="destinations">
      <li data-kit-region="destination-group">
        <p data-kit-region="group-name" id="kit-shell-group-0">Hire days</p>
        <ul aria-labelledby="kit-shell-group-0">
          <li><a data-kit-role="destination" data-kit-state="current" href="?destination=booking-diary#main" aria-current="page"><svg data-kit-icon="calendar" 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,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Diary</span></a></li>
          <li><a data-kit-role="destination" href="?destination=checks#main"><svg data-kit-icon="clipboard-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z"/></svg><span data-kit-region="name">Checks</span></a></li>
        </ul>
      </li>
      <li data-kit-region="destination-group">
        <ul>
          <li><a data-kit-role="destination" href="?destination=invoices#main"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"/></svg><span data-kit-region="name">Invoices</span></a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <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">You can't open this booking</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../layout-unavailable/#layout-unavailable">CSS core</a></div>
  </header>
  <main data-kit-region="body" id="main">
    <div data-kit-layout="unavailable">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="what-to-do-when">
        <p>This booking belongs to Riverside Hall, and the hall's manager can give you access.</p>
      </div>
      <div data-kit-region="next-action"><a data-kit-role="emphasised-next-action" href="../home/"><span data-kit-region="label">Home</span></a></div>
      <div data-kit-region="status-support"><a href="?service=status#main">Service status</a><a href="mailto:support@example.test">Human support</a></div>
    </div>
    <div data-kit-layout="unavailable" id="layout-unavailable-inert-next-action">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="what-to-do-when">
        <p>This booking no longer exists.</p>
      </div>
      <div data-kit-region="next-action"><button type="button" id="unavailable-home" data-kit-role="emphasised-next-action" data-kit-state="inert" disabled aria-describedby="unavailable-home-words"><span data-kit-region="label">Home</span></button><p data-kit-region="words" id="unavailable-home-words">Home opens once your session has been checked.</p></div>
      <div data-kit-region="status-support"><a href="?service=status#main">Service status</a><a href="mailto:support@example.test">Human support</a></div>
    </div>
  </main>
  <nav data-kit-region="bottom-bar" aria-label="Application">
    <ul data-kit-region="destinations">
      <li><a data-kit-role="destination" href="?destination=assigned-work#main"><svg data-kit-icon="house" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span data-kit-region="name">Assigned work</span></a></li>
      <li><a data-kit-role="destination" data-kit-state="current" href="?destination=booking-diary#main" aria-current="page"><svg data-kit-icon="calendar" 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,208H48V96H208V208Zm-96-88v64a8,8,0,0,1-16,0V132.94l-4.42,2.22a8,8,0,0,1-7.16-14.32l16-8A8,8,0,0,1,112,120Zm59.16,30.45L152,176h16a8,8,0,0,1,0,16H136a8,8,0,0,1-6.4-12.8l28.78-38.37A8,8,0,1,0,145.07,132a8,8,0,1,1-13.85-8A24,24,0,0,1,176,136,23.76,23.76,0,0,1,171.16,150.45Z"/></svg><span data-kit-region="name">Diary</span></a></li>
      <li><a data-kit-role="destination" href="?destination=checks#main"><svg data-kit-icon="clipboard-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M168,152a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,152Zm-8-40H96a8,8,0,0,0,0,16h64a8,8,0,0,0,0-16Zm56-64V216a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V48A16,16,0,0,1,56,32H92.26a47.92,47.92,0,0,1,71.48,0H200A16,16,0,0,1,216,48ZM96,64h64a32,32,0,0,0-64,0ZM200,48H173.25A47.93,47.93,0,0,1,176,64v8a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V64a47.93,47.93,0,0,1,2.75-16H56V216H200Z"/></svg><span data-kit-region="name">Checks</span></a></li>
      <li><a data-kit-role="destination" href="?destination=invoices#main"><svg data-kit-icon="receipt" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"/></svg><span data-kit-region="name">Invoices</span></a></li>
    </ul>
  </nav>
</div>

Unavailable, standing-alone

Open the whole page

Source
<div data-kit-layout="unavailable" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Something went wrong on our side</h1></div>
  </header>
  <div data-kit-region="what-to-do-when">
    <p>Nothing you saved is lost. Try again in a few minutes.</p>
    <dl data-kit-role="labelled-fact">
      <dt data-kit-region="name">Reference</dt>
      <dd data-kit-region="value">
        <div data-kit-role="copyable" id="copyable-unavailable-reference">
          <code>7f3a-29c1-e84d</code>
          <button type="button" data-kit-role="secondary-action" data-kit-resting-label="Copy" data-kit-changed-label="Copied"><span data-kit-region="label">Copy</span></button>
        </div>
      </dd>
    </dl>
  </div>
  <div data-kit-region="next-action"><a data-kit-role="emphasised-next-action" href="./"><span data-kit-region="label">Try again</span></a></div>
  <div data-kit-region="status-support"><a href="?service=status">Service status</a><a href="mailto:support@example.test">Human support</a></div>
</div>
<div data-kit-layout="unavailable" data-kit-density="desk" id="layout-unavailable-inert-next-action">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Something went wrong on our side</h1></div>
  </header>
  <div data-kit-region="what-to-do-when">
    <p>Nothing you saved is lost. Try again in a few minutes.</p>
    <dl data-kit-role="labelled-fact">
      <dt data-kit-region="name">Reference</dt>
      <dd data-kit-region="value">
        <div data-kit-role="copyable" id="copyable-unavailable-inert-reference">
          <code>7f3a-29c1-e84d</code>
          <button type="button" data-kit-role="secondary-action" data-kit-resting-label="Copy" data-kit-changed-label="Copied"><span data-kit-region="label">Copy</span></button>
        </div>
      </dd>
    </dl>
  </div>
  <div data-kit-region="next-action"><button type="button" id="unavailable-try-again" data-kit-role="emphasised-next-action" data-kit-state="inert" disabled aria-describedby="unavailable-try-again-words"><span data-kit-region="label">Try again</span></button><p data-kit-region="words" id="unavailable-try-again-words">Wait a minute before trying again.</p></div>
  <div data-kit-region="status-support"><a href="?service=status">Service status</a><a href="mailto:support@example.test">Human support</a></div>
</div>

Unavailable, withdrawn

Open the whole page

Source
<div data-kit-layout="unavailable" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">This invoice is no longer available</h1></div>
  </header>
  <div data-kit-region="what-to-do-when">
    <p>Sahyadri Hall Trust has withdrawn this link. Ask them for a new one.</p>
  </div>
</div>