mono.works Design Components

Groupmate Screenshotlist 

<div class="flickity_overflow_wrap flow--one">
    <div class="container flow--one">
        <div class="row --center">
            <div class="d_grid-6 m_grid-4">
                <h2 class="legend">groupmate in use:</h2>
            </div>
        </div>
    </div>

    <ul class="screenshot_list --antiflicker" data-flickity-overflow="{wrapAround: true}">
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/complex_full.png" data-fancybox="in_use" data-caption="Nice, Big Product Image Swatches">
                        <img src="../../dummy_content/complex.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>Nice, Big Product Image Swatches</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_01.png" data-fancybox="in_use" data-caption="groupmate buttons (top) in combination with regular variant selectors (bottom)">
                        <img src="../../dummy_content/groupmate_in_use_01.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>groupmate buttons (top) in combination with regular variant selectors (bottom)</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_02.png" data-fancybox="in_use" data-caption="lorem ipsum">
                        <img src="../../dummy_content/groupmate_in_use_02.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>lorem ipsum</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_03.png" data-fancybox="in_use" data-caption="lorem ipsum">
                        <img src="../../dummy_content/groupmate_in_use_03.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>lorem ipsum</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_03.png" data-fancybox="in_use" data-caption="lorem ipsum">
                        <img src="../../dummy_content/groupmate_in_use_03.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>lorem ipsum</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_04.png" data-fancybox="in_use" data-caption="lorem ipsum">
                        <img src="../../dummy_content/groupmate_in_use_04.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>lorem ipsum</figcaption>
                </figure>
            </div>
        </li>
        <li>
            <div class="screenshot">
                <figure>
                    <a href="../../dummy_content/groupmate_in_use_04.png" data-fancybox="in_use" data-caption="lorem ipsum">
                        <img src="../../dummy_content/groupmate_in_use_04.png" alt="groupmate in the wild" />
                    </a>
                    <figcaption>lorem ipsum</figcaption>
                </figure>
            </div>
        </li>
    </ul>
</div>
 
<div class="flickity_overflow_wrap flow--one">
	<div class="container flow--one">
		<div class="row --center">
			<div class="d_grid-6 m_grid-4">
				<h2 class="legend">groupmate in use:</h2>
			</div>
		</div>
	</div>

	<ul
		class="screenshot_list --antiflicker"
		data-flickity-overflow="{wrapAround: true}"
	>
		{{#each screenshots}}
			<li>
				<div class="screenshot">
					<figure>
						<a
							href="{{path src_large}}"
							data-fancybox="in_use"
							data-caption="{{caption}}"
						>
							<img
								src="{{path src}}"
								alt="groupmate in the wild"
							/>
						</a>
						<figcaption>{{{caption}}}</figcaption>
					</figure>
				</div>
			</li>
		{{/each}}
	</ul>
</div>
 
{
  "screenshots": [
    {
      "src": "/dummy_content/complex.png",
      "src_large": "/dummy_content/complex_full.png",
      "caption": "Nice, Big Product Image Swatches"
    },
    {
      "src": "/dummy_content/groupmate_in_use_01.png",
      "src_large": "/dummy_content/groupmate_in_use_01.png",
      "caption": "groupmate buttons (top) in combination with regular variant selectors (bottom)"
    },
    {
      "src": "/dummy_content/groupmate_in_use_02.png",
      "src_large": "/dummy_content/groupmate_in_use_02.png",
      "caption": "lorem ipsum"
    },
    {
      "src": "/dummy_content/groupmate_in_use_03.png",
      "src_large": "/dummy_content/groupmate_in_use_03.png",
      "caption": "lorem ipsum"
    },
    {
      "src": "/dummy_content/groupmate_in_use_03.png",
      "src_large": "/dummy_content/groupmate_in_use_03.png",
      "caption": "lorem ipsum"
    },
    {
      "src": "/dummy_content/groupmate_in_use_04.png",
      "src_large": "/dummy_content/groupmate_in_use_04.png",
      "caption": "lorem ipsum"
    },
    {
      "src": "/dummy_content/groupmate_in_use_04.png",
      "src_large": "/dummy_content/groupmate_in_use_04.png",
      "caption": "lorem ipsum"
    }
  ]
}

No notes defined.