<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Story Matrix
        <span class="token string" style="font-size: var(--font-size-2)">selective-yellow</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Circle</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Square</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow square">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow square size-1">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow square size-2">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow square size-3">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix selective-yellow square size-4">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
</div>
<div style="padding: var(--size-4);">
  <h1 class="mexican-pink">
    Story Matrix
    {{#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-matrix {{#if modifier}}{{modifier}}{{/if}}">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
  <h3 class="celestial-blue">Square</h3>
  <div style="padding: var(--size-4);">
    <div class="story-matrix {{#if modifier}}{{modifier}}{{/if}} square">
      <div>
        <a href="#story" title="Story 1">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 1"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
  <h3 class="celestial-blue">Size 1</h3>
  <div style="padding: var(--size-4);">
    <div class="story-matrix {{#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"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
  <h3 class="celestial-blue">Size 2</h3>
  <div style="padding: var(--size-4);">
    <div class="story-matrix {{#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"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
  <h3 class="celestial-blue">Size 3</h3>
  <div style="padding: var(--size-4);">
    <div class="story-matrix {{#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"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
  <h3 class="celestial-blue">Size 4</h3>
  <div style="padding: var(--size-4);">
    <div class="story-matrix {{#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"/>
          <div>Story 1</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 2">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 2"/>
          <div>Story 2</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 3">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 3"/>
          <div>Story 3</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 4">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 4"/>
          <div>Story 4</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 5">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 5"/>
          <div>Story 5</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 6">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 6"/>
          <div>Story 6</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 7">
          <img src="/components/raw/story-button/story-1.jpg" alt="Story 7"/>
          <div>Story 7</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 8">
          <img src="/components/raw/story-button/story-2.jpg" alt="Story 8"/>
          <div>Story 8</div>
        </a>
      </div>
      <div>
        <a href="#story" title="Story 9">
          <img src="/components/raw/story-button/story-3.jpg" alt="Story 9"/>
          <div>Story 9</div>
        </a>
      </div>
    </div>
  </div>
</div>
{
  "modifier": "selective-yellow"
}
  • Handle: @story-matrix--selective-yellow
  • Preview:
  • Filesystem Path: components/03-organisms/story-matrix/story-matrix.hbs

No notes defined.