kit

Guide

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.

Guide

First step

Add your rooms

Each room you add here can be booked on its own, with its own hours and price.

1 of 3

Last step

Invite your caretaker

The people you invite see the bookings for the rooms you share with them.

3 of 3

Source
<details>
  <summary>First step</summary>
  <button type="button" data-kit-role="secondary-action" aria-details="role-guide-rooms"><span data-kit-region="label">Add a room</span></button>
  <div id="role-guide-rooms" data-kit-role="guide" popover="manual">
    <h2 data-kit-region="heading">Add your rooms</h2>
    <p>Each room you add here can be booked on its own, with its own hours and price.</p>
    <p data-kit-region="place">1 of 3</p>
    <div data-kit-region="actions">
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Next</span></button>
      <button type="button" data-kit-region="dismiss">Dismiss</button>
    </div>
  </div>
</details>
<details>
  <summary>Last step</summary>
  <button type="button" data-kit-role="secondary-action" aria-details="role-guide-invite"><span data-kit-region="label">Invite someone</span></button>
  <div id="role-guide-invite" data-kit-role="guide" popover="manual">
    <h2 data-kit-region="heading">Invite your caretaker</h2>
    <p>The people you invite see the bookings for the rooms you share with them.</p>
    <p data-kit-region="place">3 of 3</p>
    <div data-kit-region="actions">
      <button type="button" data-kit-role="secondary-action"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Done</span></button>
      <button type="button" data-kit-region="dismiss">Dismiss</button>
    </div>
  </div>
</details>

Guide, inert

First step while the room saves

Add your rooms

Each room you add here can be booked on its own, with its own hours and price.

1 of 3

Next waits until the room has saved.

Last step while the invitation sends

Invite your caretaker

The people you invite see the bookings for the rooms you share with them.

3 of 3

Back waits until the invitation has sent.

Done waits until the invitation has sent.

Source
<details>
  <summary>First step while the room saves</summary>
  <button type="button" data-kit-role="secondary-action" aria-details="role-guide-inert-rooms"><span data-kit-region="label">Add a room</span></button>
  <div id="role-guide-inert-rooms" data-kit-role="guide" popover="manual">
    <h2 data-kit-region="heading">Add your rooms</h2>
    <p>Each room you add here can be booked on its own, with its own hours and price.</p>
    <p data-kit-region="place">1 of 3</p>
    <div data-kit-region="actions">
      <button type="button" id="role-guide-inert-next" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-guide-inert-next-words"><span data-kit-region="label">Next</span></button>
      <p data-kit-region="words" id="role-guide-inert-next-words">Next waits until the room has saved.</p>
      <button type="button" data-kit-region="dismiss">Dismiss</button>
    </div>
  </div>
</details>
<details>
  <summary>Last step while the invitation sends</summary>
  <button type="button" data-kit-role="secondary-action" aria-details="role-guide-inert-invite"><span data-kit-region="label">Invite someone</span></button>
  <div id="role-guide-inert-invite" data-kit-role="guide" popover="manual">
    <h2 data-kit-region="heading">Invite your caretaker</h2>
    <p>The people you invite see the bookings for the rooms you share with them.</p>
    <p data-kit-region="place">3 of 3</p>
    <div data-kit-region="actions">
      <button type="button" id="role-guide-inert-back" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-guide-inert-back-words"><svg data-kit-icon="arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg><span data-kit-region="label">Back</span></button>
      <p data-kit-region="words" id="role-guide-inert-back-words">Back waits until the invitation has sent.</p>
      <button type="button" id="role-guide-inert-done" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="role-guide-inert-done-words"><span data-kit-region="label">Done</span></button>
      <p data-kit-region="words" id="role-guide-inert-done-words">Done waits until the invitation has sent.</p>
      <button type="button" data-kit-region="dismiss">Dismiss</button>
    </div>
  </div>
</details>