Showcase

<div data-kit-layout="showcase" data-kit-density="desk" id="showcase">
  <div data-kit-region="letterhead">
    <img src="../media/oakmere-hall-crest.svg" width="480" height="360" alt="">
    <p data-kit-region="tenant">Oakmere Hall</p>
  </div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Events at the hall</h1></div>
    <div data-kit-region="actions"><a href="?quote" data-kit-role="primary-action"><span data-kit-region="label">Ask for a quote</span></a></div>
  </header>
  <div data-kit-region="examples">
    <div data-kit-role="headed-region">
      <h2 data-kit-region="heading">Harvest supper</h2>
      <div data-kit-region="content">
        <section data-kit-role="carousel" data-kit-fit="pending" id="showcase-supper" aria-roledescription="carousel" aria-labelledby="showcase-supper-line">
          <div data-kit-region="strip" id="showcase-supper-strip">
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="1 of 3">
              <a id="showcase-supper-1" href="#showcase-supper-1-overlay"><img src="../carousel/main-hall.svg" alt="Main hall set with long tables for supper" width="3000" height="750"><span hidden>The photo cannot be shown.</span></a>
            </div>
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="2 of 3">
              <a id="showcase-supper-2" href="#showcase-supper-2-overlay" tabindex="-1"><img src="../carousel/tables.svg" alt="Two tables laid for tea" width="1600" height="900"><span hidden>The photo cannot be shown.</span></a>
            </div>
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="3 of 3">
              <a id="showcase-supper-3" href="#showcase-supper-3-overlay" tabindex="-1"><img src="../carousel/kitchen.svg" alt="Kitchen counters ready for service" width="1600" height="1200"><span hidden>The photo cannot be shown.</span></a>
            </div>
          </div>
          <span data-kit-region="line" id="showcase-supper-line">3 photos of the harvest supper</span>
          <div data-kit-region="steps"><button type="button" aria-label="Previous" aria-controls="showcase-supper-strip" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="previous" disabled><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button><button type="button" aria-label="Next" aria-controls="showcase-supper-strip" data-kit-role="icon-action" data-kit-region="next"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button></div>
        </section>
        <div data-kit-region="caption"><p>Supper for 120 at long tables in the main hall, cooked in the hall kitchen and served from the hatch.</p></div>
      </div>
    </div>
    <div data-kit-role="headed-region">
      <h2 data-kit-region="heading">Piano recital</h2>
      <div data-kit-region="content">
        <a data-kit-role="image" id="showcase-recital" href="#showcase-recital-overlay"><img src="../carousel/piano.svg" alt="Upright piano beside the stage" width="1000" height="1000" style="--kit-image-natural-width: 1000; --kit-image-natural-height: 1000"><span hidden>The photo cannot be shown.</span></a>
        <div data-kit-region="caption"><p>An evening recital on the hall's upright piano, with seats for 60 facing the stage.</p></div>
      </div>
    </div>
    <div data-kit-role="headed-region">
      <h2 data-kit-region="heading">Garden wedding</h2>
      <div data-kit-region="content">
        <section data-kit-role="carousel" data-kit-fit="pending" id="showcase-wedding" aria-roledescription="carousel" aria-labelledby="showcase-wedding-line">
          <div data-kit-region="strip" id="showcase-wedding-strip">
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="1 of 3">
              <a id="showcase-wedding-1" href="#showcase-wedding-1-overlay"><img src="../carousel/garden.svg" alt="Garden behind the hall set for a wedding" width="1920" height="1080"><span hidden>The photo cannot be shown.</span></a>
            </div>
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="2 of 3">
              <a id="showcase-wedding-2" href="#showcase-wedding-2-overlay" tabindex="-1"><img src="../carousel/porch.svg" alt="Porch at the main door hung with flowers" width="1000" height="1000"><span hidden>The photo cannot be shown.</span></a>
            </div>
            <div data-kit-region="item" role="group" aria-roledescription="slide" aria-label="3 of 3">
              <a id="showcase-wedding-3" href="#showcase-wedding-3-overlay" tabindex="-1"><img src="../carousel/dusk.svg" alt="The hall at dusk with its windows lit" width="2400" height="800"><span hidden>The photo cannot be shown.</span></a>
            </div>
          </div>
          <span data-kit-region="line" id="showcase-wedding-line">3 photos of the garden wedding</span>
          <div data-kit-region="steps"><button type="button" aria-label="Previous" aria-controls="showcase-wedding-strip" data-kit-role="icon-action" data-kit-state="inert" data-kit-region="previous" disabled><svg data-kit-icon="caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z"/></svg></button><button type="button" aria-label="Next" aria-controls="showcase-wedding-strip" data-kit-role="icon-action" data-kit-region="next"><svg data-kit-icon="caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></button></div>
        </section>
        <div data-kit-region="caption"><p>A ceremony in the garden for 80 guests, then dinner and dancing in the main hall until eleven.</p><p>The porch and garden were dressed by the couple's own florist.</p></div>
      </div>
    </div>
  </div>
  <footer data-kit-region="foot"><div data-kit-region="actions"><a href="?quote" data-kit-role="primary-action"><span data-kit-region="label">Ask for a quote</span></a></div><span data-kit-wordmark>kit</span></footer>
</div>
<div data-kit-role="image-overlay" id="showcase-supper-1-overlay" tabindex="-1" aria-labelledby="showcase-supper-1-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/main-hall.svg" width="3000" height="750" alt="Main hall set with long tables for supper">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-supper-1-overlay-caption">Long tables<span>1 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Previous photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-supper-2-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/main-hall.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-supper-1"><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="showcase-supper-2-overlay" tabindex="-1" aria-labelledby="showcase-supper-2-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/tables.svg" width="1600" height="900" alt="Two tables laid for tea">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-supper-2-overlay-caption">Tea tables<span>2 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-supper-1-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-supper-3-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/tables.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-supper-2"><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="showcase-supper-3-overlay" tabindex="-1" aria-labelledby="showcase-supper-3-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/kitchen.svg" width="1600" height="1200" alt="Kitchen counters ready for service">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-supper-3-overlay-caption">Kitchen<span>3 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-supper-2-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-recital-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/kitchen.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-supper-3"><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="showcase-recital-overlay" tabindex="-1" aria-labelledby="showcase-recital-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/piano.svg" width="1000" height="1000" alt="Upright piano beside the stage">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-recital-overlay-caption">Piano<span>4 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-supper-3-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-wedding-1-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/piano.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-recital"><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="showcase-wedding-1-overlay" tabindex="-1" aria-labelledby="showcase-wedding-1-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/garden.svg" width="1920" height="1080" alt="Garden behind the hall set for a wedding">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-wedding-1-overlay-caption">Garden<span>5 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-recital-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-wedding-2-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/garden.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-wedding-1"><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="showcase-wedding-2-overlay" tabindex="-1" aria-labelledby="showcase-wedding-2-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/porch.svg" width="1000" height="1000" alt="Porch at the main door hung with flowers">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-wedding-2-overlay-caption">Porch<span>6 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-wedding-1-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <a data-kit-role="secondary-action" href="#showcase-wedding-3-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 photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/porch.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-wedding-2"><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="showcase-wedding-3-overlay" tabindex="-1" aria-labelledby="showcase-wedding-3-overlay-caption">
  <figure data-kit-region="box">
    <div data-kit-region="image">
      <img src="../carousel/dusk.svg" width="2400" height="800" alt="The hall at dusk with its windows lit">
      <span hidden>The photo cannot be shown.</span>
    </div>
    <figcaption data-kit-region="caption" id="showcase-wedding-3-overlay-caption">Hall at dusk<span>7 of 7</span></figcaption>
    <nav data-kit-region="actions" aria-label="Event photos">
      <a data-kit-role="secondary-action" href="#showcase-wedding-2-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 photo, the first photo"><span data-kit-region="label">Previous</span></button>
      <button type="button" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-label="Next photo, the last photo"><span data-kit-region="label">Next</span></button>
      <a data-kit-role="secondary-action" href="../carousel/dusk.svg"><span data-kit-region="label">Open file</span></a>
      <a data-kit-role="secondary-action" href="#showcase-wedding-3"><span data-kit-region="label">Close</span></a>
    </nav>
  </figure>
  <div data-kit-region="ground" aria-hidden="true"></div>
</div>