<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"
}
No notes defined.