kit

Image

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 Record, Settings, Issued document, Showcase

Image

Hall name
Oakmere Village Hall
Logo
Condition photo
Chair with a split seat, photographed after a hall booking.
Letterhead
The letterhead cannot be shown.
Oakmere Hall wordmark
Oakmere Hall wordmark1 of 2
Chair with a split seat, photographed after a hall booking.
Split chair seat2 of 2
The letterhead cannot be shown.
Oakmere Hall letterhead
  • Oakmere Hall crest oakmere-hall-crest.svg Chosen
  • oakmere-hall-porch.png Chosen
Accepts images.
Source
<script type="application/json" data-specimen-failures>{"resources":["data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=","../media/oakmere-hall-porch.png"],"errors":[]}</script>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hall name</dt><dd data-kit-region="value">Oakmere Village Hall</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Logo</dt><dd data-kit-region="value"><a data-kit-role="image" id="image-logo" href="#image-logo-overlay"><img src="../media/oakmere-hall-wordmark.svg" alt="Oakmere Hall wordmark" width="1200" height="120" style="--kit-image-natural-width: 1200; --kit-image-natural-height: 120"><span hidden>The logo cannot be shown.</span></a></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Condition photo</dt><dd data-kit-region="value"><a data-kit-role="image" id="image-photo" href="#image-photo-overlay"><img src="../chair-damage.svg" alt="Chair with a split seat, photographed after a hall booking." width="800" height="500" style="--kit-image-natural-width: 800; --kit-image-natural-height: 500"><span hidden>The photo cannot be shown.</span></a></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Letterhead</dt><dd data-kit-region="value"><a data-kit-role="image" id="image-letterhead"><img src="data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=" alt="Oakmere Hall letterhead" width="1240" height="1754" style="--kit-image-natural-width: 1240; --kit-image-natural-height: 1754" hidden><span>The letterhead cannot be shown.</span></a></dd></dl>
</div>
<div data-kit-role="image-overlay" id="image-logo-overlay" tabindex="-1" aria-labelledby="image-logo-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../media/oakmere-hall-wordmark.svg" width="1200" height="120" alt="Oakmere Hall wordmark">
      <span hidden>The logo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="image-logo-overlay-caption">Oakmere Hall wordmark<span>1 of 2</span></figcaption>
    <nav data-kit-region="actions" aria-label="Hall images">
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Previous image, the first image"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#image-photo-overlay"><span data-kit-region="label">Next</span></a>
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Next image, the last image"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../media/oakmere-hall-wordmark.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#image-logo"><span data-kit-region="label">Close</span></a>
    </nav>
  </figure>
  <div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="image-photo-overlay" tabindex="-1" aria-labelledby="image-photo-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../chair-damage.svg" width="800" height="500" alt="Chair with a split seat, photographed after a hall booking.">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="image-photo-overlay-caption">Split chair seat<span>2 of 2</span></figcaption>
    <nav data-kit-region="actions" aria-label="Hall images">
      <a data-kit-role="secondary-action" href="#image-logo-overlay"><span data-kit-region="label">Previous</span></a>
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled hidden aria-label="Previous image, the first image"><span data-kit-region="label">Previous</span></button>
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Next image, the last image"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../chair-damage.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#image-photo"><span data-kit-region="label">Close</span></a>
    </nav>
  </figure>
  <div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="image-overlay" id="image-letterhead-overlay" tabindex="-1" aria-labelledby="image-letterhead-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ=" width="1240" height="1754" alt="Oakmere Hall letterhead" hidden>
      <span>The letterhead cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="image-letterhead-overlay-caption">Oakmere Hall letterhead</figcaption>
    <nav data-kit-region="actions" aria-label="Hall images">
      <a data-kit-role="secondary-action" href="data:image/png;base64,T2FrbWVyZSBIYWxsIGxldHRlcmhlYWQ="><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#image-letterhead"><span data-kit-region="label">Close</span></a>
    </nav>
  </figure>
  <div data-kit-region="ground" aria-hidden="true"></div>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
  <label for="image-hall-pictures">Hall pictures</label>
  <input id="image-hall-pictures" name="pictures" type="file" multiple accept="image/*" aria-describedby="image-hall-pictures-help">
  <ul>
    <li data-kit-state="chosen"><span data-kit-role="image" id="image-crest"><img src="../media/oakmere-hall-crest.svg" alt="Oakmere Hall crest"></span> <span id="image-hall-pictures-crest" data-kit-region="file-name"><span data-kit-region="head">oakmere-hall-crest</span><span data-kit-region="tail">.svg</span></span> <span>Chosen</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove oakmere-hall-crest.svg"><span data-kit-region="label">Remove</span></button></li>
    <li data-kit-state="chosen"><span data-kit-role="image" id="image-porch" hidden><img src="../media/oakmere-hall-porch.png" alt="Oakmere Hall porch"></span> <span id="image-hall-pictures-porch" data-kit-region="file-name"><span data-kit-region="head">oakmere-hall-porch</span><span data-kit-region="tail">.png</span></span> <span>Chosen</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove oakmere-hall-porch.png"><span data-kit-region="label">Remove</span></button></li>
  </ul>
  <span data-kit-region="help" id="image-hall-pictures-help">Accepts images.</span>
</div>