<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Story Button
        <span class="token string" style="font-size: var(--font-size-2)">chartreuse</span>
    </h1>
    <hr>
    <h3 id="story" class="celestial-blue">Circle</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-11), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button" />
            </a>
        </div>
    </div>
    <hr>
    <h3 id="story" class="celestial-blue">Square</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-11), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button square" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button square" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button square" />
            </a>
        </div>
    </div>
    <hr>
    <h3 id="story" class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-12), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button square size-1" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button square size-1" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button square size-1" />
            </a>
        </div>
    </div>
    <hr>
    <h3 id="story" class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-13), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button square size-2" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button square size-2" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button square size-2" />
            </a>
        </div>
    </div>
    <hr>
    <h3 id="story" class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-14), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button square size-3" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button square size-3" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button square size-3" />
            </a>
        </div>
    </div>
    <hr>
    <h3 id="story" class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-15), 1fr));">
        <div>
            <a href="#story" title="Story 1">
                <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="chartreuse story-button square size-4" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="chartreuse story-button square size-4" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="chartreuse story-button square size-4" />
            </a>
        </div>
    </div>
</div>
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Story Button
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 id="story" class="celestial-blue">Circle</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-11), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button"/>
      </a>
    </div>
  </div>
  <hr>
  <h3 id="story" class="celestial-blue">Square</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-11), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button square"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button square"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button square"/>
      </a>
    </div>
  </div>
  <hr>
  <h3 id="story" class="celestial-blue">Size 1</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-12), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-1"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-1"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-1"/>
      </a>
    </div>
  </div>
  <hr>
  <h3 id="story" class="celestial-blue">Size 2</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-13), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-2"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-2"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-2"/>
      </a>
    </div>
  </div>
  <hr>
  <h3 id="story" class="celestial-blue">Size 3</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-14), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-3"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-3"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-3"/>
      </a>
    </div>
  </div>
  <hr>
  <h3 id="story" class="celestial-blue">Size 4</h3>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: repeat(auto-fill, minmax(var(--size-15), 1fr));">
    <div>
      <a href="#story" title="Story 1">
        <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-4"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 2">
        <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-4"/>
      </a>
    </div>
    <div>
      <a href="#story" title="Story 3">
        <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="{{#if modifier}}{{modifier}}{{/if}} story-button square size-4"/>
      </a>
    </div>
  </div>
</div>
{
  "modifier": "chartreuse"
}
  • Handle: @story-button--chartreuse
  • Preview:
  • Filesystem Path: components/01-atoms/story-button/story-button.hbs

No notes defined.