Display type

<p>Display type — the family <code>--kit-display-family</code> names.</p>
<p style="font-family: var(--kit-display-family), serif; font-size: var(--_kit-subject-size); font-weight: 700;">Page subject</p>
<p style="font-family: var(--kit-display-family), serif; font-size: var(--_kit-region-heading-size); font-weight: 700;">Region heading</p>
<p style="font-size: var(--_kit-sub-heading-size); font-weight: 700;">Sub-heading</p>
<p>Body prose names the subject and the next action.</p>
<div data-kit-role="form-group" data-kit-width="medium"><label for="type-label">Operational label</label><input id="type-label" value="Entered value" /></div>
<section data-kit-role="field-result" data-kit-state="accepted" aria-label="Result type">
  <div>
    <p data-kit-region="subject">Meeting Room</p>
    <h2 data-kit-region="result-words">Accepted</h2>
    <div data-kit-region="next-action"><button type="button" data-kit-role="emphasised-next-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 to booking</span></button></div>
  </div>
</section>
<div data-kit-role="identity"><span data-kit-mark aria-hidden="true">O</span><span data-kit-wordmark>Oakmere Primary School</span></div>
<div data-kit-layout="reports">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-region="measure-prior">
    <div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Invoiced</dt><dd data-kit-region="value" data-kit-role="amount">£84.00</dd><dd data-kit-region="supporting"><span data-kit-role="amount">£0.00</span> prior month ·&nbsp;Increase <span data-kit-role="amount">£84.00</span></dd></dl></div>
  </div>
</div>
<p class="specimen-case-line">Body and fact names, on one line and wrapped.</p>
<p>The Main Hall is free on Saturday.</p>
<p>The committee asked for the March hire to be reissued at the weekend rate, so the invoice stays outstanding until the hirer confirms the billing address, the purchase order and the named contact for Saturday’s Main Hall session.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Room</dt><dd data-kit-region="value">Main Hall</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Named contact for the Saturday Main Hall sessions and the key handover</dt><dd data-kit-region="value">Maya Okonkwo</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Payment</dt><dd data-kit-region="value"><span data-kit-role="stamp" data-kit-state="attention">Awaiting payment</span></dd></dl>
</div>
<article data-kit-role="row">
  <div data-kit-region="content-column">
    <div data-kit-region="subject-column">
      <div data-kit-region="line">
        <div data-kit-region="subject-stamp">
          <span data-kit-region="subject">Oakmere WI<span data-kit-region="supporting">1 invoice awaiting correction: the March hire was billed at the weekday rate and the committee has asked for it to be reissued at the weekend rate for the Saturday sessions</span></span>
          <span data-kit-role="stamp" data-kit-state="neutral">Awaiting correction</span>
        </div>
        <div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Invoiced: £84.00</span></p></div>
      </div>
    </div>
  </div>
</article>
<article data-kit-role="message-entry">
  <header>
    <span data-kit-region="author"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">PS</span></span>Priya Shah, St Anne’s Scout Group committee</span>
    <time data-kit-region="time" datetime="2025-02-04T18:05+00:00"><span>4 February 2025</span><wbr><span> at 18:05</span></time>
  </header>
  <div data-kit-region="body" data-kit-authored-text="true"><p>Thank you. We will bring our own chairs on the night.</p></div>
  <p data-kit-region="delivery"><span data-kit-role="stamp" data-kit-state="settled">Delivered</span> <span data-kit-region="destination">to bookings@oakmerevillagehall.org</span></p>
</article>
<label><input type="hidden" name="send-key-reminder" value="false"><input data-kit-role="selection-control" type="checkbox" name="send-key-reminder"><span>Send the key reminder</span></label>
<p class="specimen-case-line">Mono runs in prose, a fact, a Copyable, a table cell and a block, then a key.</p>
<p>The booking reference <code>oakmere--main-hall--0412</code> stays on the key tag.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Booking reference</dt><dd data-kit-region="value"><code>oakmere--main-hall--0412</code></dd></dl>
</div>
<div data-kit-role="copyable" id="type-copyable-reference"><code>oakmere--main-hall--0412</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>
<div data-kit-region="table" tabindex="0">
  <div><table data-kit-table="prose">
    <thead>
      <tr><th scope="col">Room</th><th scope="col">Reference</th><th scope="col">Key</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">Main Hall</th><td><div data-kit-region="fact"><code>oakmere--main-hall--0412</code></div></td><td><div data-kit-region="fact">Lockbox</div></td></tr>
      <tr><th scope="row">Garden Room</th><td><div data-kit-region="fact"><code>oakmere--garden-room--0517</code></div></td><td><div data-kit-region="fact">Office desk</div></td></tr>
    </tbody>
  </table></div>
</div>
<pre>oakmere--main-hall--0412  Maya Okonkwo
oakmere-xmain-hall-x0412  Priya Shah</pre>
<p><em>Copy <code>oakmere--main-hall--0412</code> exactly.</em></p>
<p>The room sits in the middle of the reference, <code>oakmere--<strong>main-hall</strong>--0412</code>.</p>
<p>Press <kbd>?</kbd> for the shortcuts.</p>

<p class="specimen-case-line">Latin and its script companions.</p>
<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>बगीचा आज खुला है।</h2>
  <p>सुबह बगीचे में फूल खिलते हैं। <strong>पेड़ों की छाया में बैठें</strong> और पक्षियों की आवाज़ सुनें।</p>
  <p><code>दरवाज़ा नौ बजे खुलता है।</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>தோட்டம் இன்று திறந்திருக்கிறது.</h2>
  <p>காலையில் தோட்டத்தில் பூக்கள் மலர்கின்றன. <strong>மரங்களின் நிழலில் அமருங்கள்</strong>. பறவைகளின் குரலைக் கேளுங்கள்.</p>
  <p><code>கதவு ஒன்பது மணிக்குத் திறக்கும்.</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>తోట ఈ రోజు తెరిచి ఉంది.</h2>
  <p>ఉదయం తోటలో పూలు వికసిస్తాయి. <strong>చెట్ల నీడలో కూర్చోండి</strong>. పక్షుల కిలకిలారావాలు వినండి.</p>
  <p><code>తలుపు తొమ్మిది గంటలకు తెరుచుకుంటుంది.</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>ತೋಟ ಇಂದು ತೆರೆದಿದೆ.</h2>
  <p>ಬೆಳಿಗ್ಗೆ ತೋಟದಲ್ಲಿ ಹೂಗಳು ಅರಳುತ್ತವೆ. <strong>ಮರಗಳ ನೆರಳಿನಲ್ಲಿ ಕುಳಿತುಕೊಳ್ಳಿ</strong>. ಹಕ್ಕಿಗಳ ಹಾಡನ್ನು ಕೇಳಿ.</p>
  <p><code>ಬಾಗಿಲು ಒಂಬತ್ತು ಗಂಟೆಗೆ ತೆರೆಯುತ್ತದೆ.</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>പൂന്തോട്ടം ഇന്ന് തുറന്നിരിക്കുന്നു.</h2>
  <p>രാവിലെ പൂന്തോട്ടത്തിൽ പൂക്കൾ വിരിയുന്നു. <strong>മരങ്ങളുടെ തണലിൽ ഇരിക്കൂ</strong>. പക്ഷികളുടെ പാട്ട് കേൾക്കൂ.</p>
  <p><code>വാതിൽ ഒമ്പത് മണിക്ക് തുറക്കും.</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>બગીચો આજે ખુલ્લો છે.</h2>
  <p>સવારે બગીચામાં ફૂલો ખીલે છે. <strong>વૃક્ષોની છાયામાં બેસો</strong> અને પક્ષીઓનો કલરવ સાંભળો.</p>
  <p><code>દરવાજો નવ વાગ્યે ખૂલે છે.</code></p>
</section>

<section>
  <h2>The garden is open today.</h2>
  <p>Flowers bloom in the garden each morning. <strong>Sit in the shade of the trees</strong> and listen to the birds.</p>
  <p><code>The gate opens at nine.</code></p>
</section>
<section>
  <h2>বাগান আজ খোলা আছে।</h2>
  <p>সকালে বাগানে ফুল ফোটে। <strong>গাছের ছায়ায় বসুন</strong> আর পাখির গান শুনুন।</p>
  <p><code>দরজা নটায় খোলে।</code></p>
</section>