Story Button: Surface 1

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Story Button
        <span class="token string" style="font-size: var(--font-size-2)">surface-1</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="surface-1 story-button" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 2">
                <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" class="surface-1 story-button" />
            </a>
        </div>
        <div>
            <a href="#story" title="Story 3">
                <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" class="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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="surface-1 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": "surface-1"
}

File:

Content:
URL: /components/raw/story-button/story-1.jpg
Filesystem Path: components/01-atoms/story-button/story-1.jpg
Size: 26.1 KB

Content:
URL: /components/raw/story-button/story-2.jpg
Filesystem Path: components/01-atoms/story-button/story-2.jpg
Size: 28.3 KB

Content:
URL: /components/raw/story-button/story-3.jpg
Filesystem Path: components/01-atoms/story-button/story-3.jpg
Size: 30.1 KB

Handle: @story-button--surface-1
Preview:
- With layout
- Component only
Filesystem Path: components/01-atoms/story-button/story-button.hbs

No notes defined.