<div class="typography">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</div>

<p class="h1">Class h1 on a paragraph</p>
<p class="h2">Class h2 on a paragraph</p>
<p class="h3">Class h3 on a paragraph</p>
<p class="h4">Class h4 on a paragraph</p>
<p class="h5">Class h5 on a paragraph</p>
<p class="h6">Class h6 on a paragraph</p>
<h2 class="h4">An h2 that looks like an h4</h2>

<div class="typography">
  <p data-variant="lead">Lead paragraph. One or two sentences that open the page and say what it is for.</p>
  <p>Paragraph. An order moves from Pending to Processing once payment is captured, and to Fulfilled once every item has shipped.</p>
  <p data-variant="muted">Muted paragraph. Extra detail for the text above.</p>
  <p><small>Small text. Last edited Oct 2, 2026 at 02:39.</small></p>
</div>

<div class="typography">
  <p><strong>Strong</strong> for the most important text.</p>
  <p><em>Emphasis</em> stresses a word.</p>
  <p><a href="#">Link</a> to another page.</p>
  <p><mark>Mark</mark> highlights a search match.</p>
  <p><del>$39.00</del> <ins>$29.00</ins> shows a change.</p>
  <p><abbr title="Stock keeping unit">SKU</abbr> is an abbreviation. Hover to see what it means.</p>
  <p><code>order_status</code> for field names, values or commands.</p>
  <p>Press <kbd>Ctrl</kbd> <kbd>K</kbd> to search.</p>
  <p>Subscript H<sub>2</sub>O and superscript m<sup>2</sup>.</p>
</div>

<div class="stack">
  <div class="stack" data-direction="row" data-gap="sm">
    <kbd class="kbd">⌘</kbd>
    <kbd class="kbd">⇧</kbd>
    <kbd class="kbd">⌥</kbd>
    <kbd class="kbd">⌃</kbd>
  </div>
  <div class="stack" data-direction="row" data-gap="sm">
    <kbd class="kbd">Ctrl</kbd>
    <span>+</span>
    <kbd class="kbd">B</kbd>
  </div>
</div>

<div class="typography">
  <ul>
    <li>Products</li>
    <li>Orders
      <ul>
        <li>Open carts</li>
        <li>Returns</li>
      </ul>
    </li>
    <li>Customers</li>
  </ul>
</div>

<div class="typography">
  <ol>
    <li>Create the product.</li>
    <li>Add its variants.</li>
    <li>Set it to public.</li>
  </ol>
</div>

<div class="typography">
  <dl>
    <dt>Method</dt>
    <dd>Express</dd>
    <dt>Source</dt>
    <dd>Checkout Flow</dd>
    <dt>Date</dt>
    <dd>Sep 3, 2026 at 00:35</dd>
  </dl>
</div>

<div class="typography">
  <blockquote>
    <p>Tell us anything we should know when delivering your order.</p>
  </blockquote>
</div>

<div class="typography">
  <pre><code>&lt;script src="https://payments.example.com/js/v1/payment.js?env_key=YOUR_ENV_KEY"&gt;&lt;/script&gt;</code></pre>
</div>

<div class="typography">
  <p>Text above the line.</p>
  <hr />
  <p>Text below the line.</p>
</div>

<article class="typography">
  <h1>Shipping protection</h1>
  <p data-variant="lead">
    Cover orders that are lost, stolen or damaged on the way to the customer.
  </p>
  <h2>How it works</h2>
  <p>
    Customers add protection at checkout for $2.99. If a parcel does not arrive, the customer opens
    a claim from the <a href="#">order status page</a> and chooses a refund or a reshipment.
  </p>
  <h3>What is covered</h3>
  <ul>
    <li>Parcels marked as delivered that never arrived</li>
    <li>Items damaged in transit</li>
    <li>Parcels lost by the carrier</li>
  </ul>
  <blockquote>
    <p>Claims can be opened within 30 days of the ship date.</p>
  </blockquote>
  <h3>Setting it up</h3>
  <ol>
    <li>Open <strong>Settings</strong> and go to <strong>Shipping</strong>.</li>
    <li>Turn on protection and set the price.</li>
    <li>Save. A <code>shipping-protection</code> product is created for you.</li>
  </ol>
</article>

<div class="typography">
  <h3><span lang="th">คำสั่งซื้อ</span> Orders</h3>
  <p lang="th">คำสั่งซื้อเปลี่ยนเป็น Fulfilled เมื่อจัดส่งสินค้าครบทุกรายการ</p>
  <p>An order becomes Fulfilled once every item has shipped.</p>
</div>