<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Story Button Group
        <span class="token string" style="font-size: var(--font-size-2)">surface-2</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Circle</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Square</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2 square">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2 square size-1">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2 square size-2">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2 square size-3">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4);">
        <div class="story-button-group surface-2 square size-4">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    Story 1
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    Story 2
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    Story 3
                </a>
            </div>
        </div>
    </div>
</div>
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Story Button Group
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Circle</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}}">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Square</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}} square">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 1</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}} square size-1">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 2</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}} square size-2">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 3</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}} square size-3">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 4</h3>
  <div style="padding: var(--size-4);">
    <div class="story-button-group {{#if modifier}}{{modifier}}{{/if}} square size-4">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          Story 1
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          Story 2
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          Story 3
        </a>
      </div>
    </div>
  </div>
</div>
{
  "modifier": "surface-2"
}
  • Handle: @story-button-group--surface-2
  • Preview:
  • Filesystem Path: components/02-molecules/story-button-group/story-button-group.hbs

No notes defined.