<div style="padding: var(--size-4);">
    <h1 id="nav-button" class="mexican-pink">
        Nav Button
        <span class="token string" style="font-size: var(--font-size-2)">mexican-pink</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Caret Circle</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-caret-left"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-caret-right"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-caret-up"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-caret-down"></i>
        </a>
    </div>
    <h3 class="celestial-blue">Chevrons Circle</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-chevrons-left"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-chevrons-right"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button mexican-pink">
            <i class="ti ti-chevrons-down"></i>
        </a>
    </div>
    <h3 class="celestial-blue">Caret Square</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-caret-left"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-caret-right"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-caret-up"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-caret-down"></i>
        </a>
    </div>
    <h3 class="celestial-blue">Chevrons Square</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-chevrons-left"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-chevrons-right"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button square mexican-pink">
            <i class="ti ti-chevrons-down"></i>
        </a>
    </div>
    <h3 class="celestial-blue">Sizes</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
        <a href="#nav-button" class="nav-button size-00 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button size-0 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button size-1 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button size-2 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button size-3 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
        <a href="#nav-button" class="nav-button size-4 mexican-pink">
            <i class="ti ti-chevrons-up"></i>
        </a>
    </div>
</div>
<div style="padding: var(--size-4);">
  <h1 id="nav-button" class="mexican-pink">
    Nav Button
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Caret Circle</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-left"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-right"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-up"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Chevrons Circle</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-left"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-right"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Caret Square</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-left"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-right"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-up"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-caret-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Chevrons Square</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));">
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-left"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-right"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button square {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-down"></i>
    </a>
  </div>
  <h3 class="celestial-blue">Sizes</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
    <a href="#nav-button" class="nav-button size-00 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-0 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-1 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-2 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-3 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
    <a href="#nav-button" class="nav-button size-4 {{#if modifier}}{{modifier}}{{/if}}">
      <i class="ti ti-chevrons-up"></i>
    </a>
  </div>
</div>
{
  "modifier": "mexican-pink"
}

No notes defined.