Help

Find the entry that matches the surface you are composing, then copy the HTML for the layout or role you need, keeping the standard’s names as they stand.

Load the stylesheet

Load kit.css once, at the top of every page. Keep its fonts and icons in the folder beside the stylesheet, at the paths they ship with.

Set the density

Select the actor’s density on the surface with data-kit-density="desk". Narrowing the page changes its arrangement, not its density.

Copy a layout

1. Open the page for the layout or role you need and read its example; the entry’s name is its density, and the window’s width settles the arrangement.
2. Copy the HTML as it stands.
3. Put your own words, links and native attributes in its place.

A row copied out of its entry, with a hirer’s own booking put in place of the sample, reads like this:

<article data-kit-role="row">
  <label data-kit-region="selection"><input data-kit-role="selection-control" type="checkbox" name="booking" value="oakmere-12-april"><span>Select Oakmere Primary School, Main Hall, 12 April 2025</span></label>
  <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="/bookings/oakmere-primary-school/12-april/">Oakmere Primary School</a>
          <span data-kit-role="stamp" data-kit-state="neutral">Awaiting payment</span>
        </div>
        <p data-kit-region="facts"><span data-kit-region="fact">Main Hall · 12 April 2025, 09:00–13:00 · £84.00 due on invoice BH2025041209001300MAINHALL00840</span></p>
      </div>
    </div>
  </div>
</article>

The row’s own regions carry the booking; nothing is added around them.