Optimum image size
<!-- Default -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- Tablet -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-device="tablet" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-tablet.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<!-- With Cta -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<!-- With Links -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
<!-- With Cta And Links -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
<!-- With Details -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- With Details Cta And Links -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
<!-- With Linked Details -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- With Revealable Details Two Buttons -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details" data-hidden="true">
<template data-trigger>
<button data-action="show">Details einblenden<span class="productInset-details-marker"></span></button>
<button data-action="hide">Details ausblenden<span class="productInset-details-marker"></span></button>
</template>
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- With Revealable Details -->
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details" data-hidden="true">
<template data-trigger>
<button data-action="toggle">Details<span class="productInset-details-marker"></span></button>
</template>
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Documentation only -->
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Devices</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.productInset', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-device="tablet" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-tablet.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">Default</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.productInset', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
</section>
<section class="doc-variant">
<header class="doc-variant-header">
<h2 class="doc-variant-title">With Details</h2>
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.productInset', value: this.value});">
<option value="default">default</option>
<option value="dark">dark</option>
</select>
</label>
</div>
</header>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
<span class="productInset-cta">
<a href="#" class="link is-stand-alone"><span class="link-label">Link mit Icon</span><svg class="icon is-download-simple">
<use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
</svg>
</a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details">
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
<div class="featureList-cta">
<a href="#" class="link"><span class="link-label">Details anzeigen</span><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-details" data-hidden="true">
<template data-trigger>
<button data-action="toggle">Details<span class="productInset-details-marker"></span></button>
</template>
<div class="wrapper">
<div class="featureList is-x-small">
<ul class="featureList-list">
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Four loko disrupt jean shorts</strong>
<span class="featureList-description">
<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
<span class="pictogram">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M0.979156 7.21216H23.0208" stroke="black" stroke-linecap="round" stroke-linejoin="round" />
<path d="M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675" stroke="black" />
<path d="M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675" stroke="black" />
<path d="M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675" stroke="black" />
<path d="M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675" stroke="black" />
<path d="M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675" stroke="black" />
</svg>
</span>
</span>
<div class="featureList-text">
<strong class=featureList-label>Hashtag four loko skateboard chillwave deep</strong>
<span class="featureList-description">
<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>
</span>
</div>
</li>
<li class="featureList-item">
<span class="featureList-pictogram">
</span>
<div class="featureList-text">
<strong class=featureList-label>Mit nicht definiertem Piktogramm</strong>
<span class="featureList-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p>
<p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="min-height: 50vh"></div>
<!-- Doc Only Speed Test -->
<section class="doc-variant">
<header class="doc-variant-header">
<div class="doc-variant-configuration">
</div>
<div class="doc-variant-configuration">
</div>
</header>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
<div class="productInset">
<div class="wrapper">
<div class="productInset-figure">
<div class="productMockup" data-view="three-quarter">
<div class="productMockup-figure">
<figure class="figure" style="">
<a href="../../#.html">
<img class="figure-image" src="../../images/productMockup/sample-screenshot-desktop.png" alt="Ich bin eine Produktabbildung" />
</a>
<figcaption class="figure-caption"><span>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</span></figcaption>
</figure>
</div>
</div>
</div>
<div class="productInset-text">
<header class="productInset-header">
<span class="highlightMarker">Label</span>
<span class="kicker">
<span class="kicker-item">Echo Park</span>
<span class="kicker-item">Selfies</span>
<span class="kicker-item">Flexitarian</span>
</span>
<h3 class="productInset-title">
Ich bin der Titel
</h3>
</header>
<div class="productInset-description">
<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>
</div>
</div>
<div class="productInset-footer">
<span class="productInset-cta">
<a href="#" class="button" data-icon-position="right"><svg class="icon is-arrow-right">
<use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>
<span class="button-label">Details anzeigen</span></a>
</span>
</div>
</div>
</div>
</section>
<div style="min-height: 50vh"></div>
<!-- Default -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- Tablet -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Cta -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Links -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Cta And Links -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Details -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Details Cta And Links -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Linked Details -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Revealable Details Two Buttons -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- With Revealable Details -->
<div class="productInset{{#modifier}} {{.}}{{/modifier}}"{{#theme}} data-theme="{{.}}"{{/theme}}>
<div class="wrapper">
{{#if productmockup}}
<div class="productInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@productinset' this) merge=true}}
{{/productmockup}}
</div>
{{/if}}
<div class="productInset-text">
<header class="productInset-header">
{{#highlightmarker}}
{{render '@highlightmarker' (contextData '@productinset' this) merge=true}}
{{/highlightmarker}}
{{#kicker}}
{{render '@kicker' (contextData '@productinset' this) merge=true}}
{{/kicker}}
<h3 class="productInset-title">
{{#primary-cta}}<a href="{{url}}"{{#target}} target="{{.}}"{{/target}} title="{{label}}">{{/primary-cta}}{{{title}}}{{#primary-cta}}</a>{{/primary-cta}}
</h3>
</header>
{{#description}}
<div class="productInset-description">
{{{.}}}
</div>
{{/description}}
</div>
{{#if featurelist}}
<div class="productInset-details"{{#if hide-details}} data-hidden="true"{{/if}}>
{{#if hide-details}}
<template data-trigger>
{{#trigger}}
<button data-action="{{action}}">{{{label}}}<span class="productInset-details-marker"></span></button>
{{/trigger}}
</template>
{{/if}}
{{#featurelist}}
<div class="wrapper">
{{render '@featurelist' (contextData '@productinset' this) merge=true}}
</div>
{{/featurelist}}
</div>
{{/if}}
{{#if ctas}}
<div class="productInset-footer">
{{#ctas}}
<span class="productInset-cta">
{{#button}}
{{render '@button--link' (contextData '@productinset' this) merge=true}}
{{/button}}
{{#link}}
{{render '@link' (contextData '@productinset' this) merge=true}}
{{/link}}
</span>
{{/ctas}}
</div>
{{/if}}
</div>
</div>
<!-- Documentation only -->
{{#variants}}
<section class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
<div class="doc-variant-configuration">
{{#if themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.productInset', value: this.value});">
{{#themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/themes}}
</select>
</label>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@productinset' (contextData '@productinset' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
<div style="min-height: 50vh"></div>
<!-- Doc Only Speed Test -->
{{#variants}}
<section class="doc-variant">
<header class="doc-variant-header">
{{#title}}
<h2 class="doc-variant-title">{{{.}}}</h2>
{{/title}}
<div class="doc-variant-configuration">
{{#if modifiers}}
<ul data-label="Modifier">
{{#modifiers}}
<li>{{{.}}}</li>
{{/modifiers}}
</ul>
{{/if}}
</div>
<div class="doc-variant-configuration">
{{#if themes}}
<label>
Theme:
<select class="doc-select" onchange="fractal.setTheme(this, {target: '.productInset', value: this.value});">
{{#themes}}
<option value="{{{.}}}">{{{.}}}</option>
{{/themes}}
</select>
</label>
{{/if}}
</div>
</header>
{{#samples}}
{{render '@productinset' (contextData '@productinset' this) merge=true}}
{{/samples}}
</section>
{{/variants}}
<div style="min-height: 50vh"></div>
/* Default */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* Tablet */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-tablet.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
},
"url": "#"
},
"device": "tablet",
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
/* With Cta */
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
}
/* With Links */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
]
}
/* With Cta And Links */
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
]
}
/* With Details */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
}
/* With Details Cta And Links */
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
],
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
}
/* With Linked Details */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
}
],
"modifier": "is-x-small"
}
}
/* With Revealable Details Two Buttons */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"hide-details": true,
"trigger": [
{
"action": "show",
"label": "Details einblenden"
},
{
"action": "hide",
"label": "Details ausblenden"
}
],
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
}
/* With Revealable Details */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"hide-details": true,
"trigger": [
{
"action": "toggle",
"label": "Details"
}
],
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
}
/* Documentation only */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"variants": [
{
"title": "Devices",
"themes": [
"default",
"dark"
],
"samples": [
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
},
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-tablet.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
},
"url": "#"
},
"device": "tablet",
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n"
}
]
},
{
"title": "Default",
"themes": [
"default",
"dark"
],
"samples": [
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
]
}
]
},
{
"title": "With Details",
"themes": [
"default",
"dark"
],
"samples": [
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
},
{
"link": {
"label": "Link mit Icon",
"url": "#",
"is-stand-alone": true,
"icon": {
"id": "download-simple",
"weight": "bold"
}
}
}
],
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
},
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>",
"link": {
"url": "#",
"label": "Details anzeigen",
"icon": {
"id": "arrow-right"
}
}
}
],
"modifier": "is-x-small"
}
},
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"hide-details": true,
"trigger": [
{
"action": "toggle",
"label": "Details"
}
],
"featurelist": {
"items": [
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.6647 3.82637L11.1126 9.57637L8.71674 7.18054\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M3.48328 13.68C2.74832 13.4083 2.11428 12.9179 1.66656 12.2748C1.21883 11.6317 0.978928 10.8669 0.979157 10.0833V7.68751C0.979157 7.43334 1.08012 7.18958 1.25985 7.00986C1.43957 6.83014 1.68332 6.72917 1.93749 6.72917H3.90303\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.5167 13.68C21.2517 13.4083 21.8857 12.9179 22.3334 12.2748C22.7812 11.6317 23.0211 10.8669 23.0208 10.0833V7.68751C23.0208 7.43334 22.9199 7.18958 22.7401 7.00986C22.5604 6.83014 22.3167 6.72917 22.0625 6.72917H20.097\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M20.6077 1.96146C20.6109 1.83361 20.5885 1.70641 20.5418 1.58736C20.4951 1.46831 20.425 1.35982 20.3357 1.26828C20.2464 1.17674 20.1396 1.10399 20.0218 1.05434C19.9039 1.00469 19.7773 0.979132 19.6494 0.979172H4.35057C4.22268 0.979132 4.09607 1.00469 3.97821 1.05434C3.86035 1.10399 3.75362 1.17674 3.66431 1.26828C3.575 1.35982 3.50492 1.46831 3.45819 1.58736C3.41147 1.70641 3.38904 1.83361 3.39224 1.96146C3.72478 15.5832 11.0139 11.6914 11.0139 16.7917C10.9612 19.7453 9.7364 20.8406 7.63765 21.061C7.39001 21.0869 7.1607 21.2035 6.99399 21.3884C6.82728 21.5734 6.73498 21.8135 6.7349 22.0625C6.7349 22.3167 6.83587 22.5604 7.01559 22.7402C7.19531 22.9199 7.43907 23.0208 7.69324 23.0208H16.3067C16.5609 23.0208 16.8047 22.9199 16.9844 22.7402C17.1641 22.5604 17.2651 22.3167 17.2651 22.0625C17.265 21.8135 17.1727 21.5734 17.006 21.3884C16.8393 21.2035 16.61 21.0869 16.3623 21.061C14.2636 20.8406 13.0388 19.7453 12.9861 16.7917C12.9861 11.6914 20.2752 15.5832 20.6077 1.96146Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
"id": "gaming-trophy-check"
},
"label": "Four loko disrupt jean shorts",
"description": "<p>Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep. Crucifix you probably haven’t heard of them pork belly tilde, direct trade migas cornhole meggings chambray Vice put a bird on it DIY brunch.</p>\n"
},
{
"pictogram": {
"code": "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M21.1042 2.4205H2.89582C2.38749 2.4205 1.89998 2.62244 1.54054 2.98188C1.18109 3.34133 0.979156 3.82884 0.979156 4.33717V19.6705C0.979156 20.1788 1.18109 20.6663 1.54054 21.0258C1.89998 21.3852 2.38749 21.5872 2.89582 21.5872H21.1042C21.6125 21.5872 22.1 21.3852 22.4594 21.0258C22.8189 20.6663 23.0208 20.1788 23.0208 19.6705V4.33717C23.0208 3.82884 22.8189 3.34133 22.4594 2.98188C22.1 2.62244 21.6125 2.4205 21.1042 2.4205Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M0.979156 7.21216H23.0208\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M4.33333 5.05592C4.26979 5.05592 4.20885 5.03068 4.16392 4.98575C4.11899 4.94082 4.09375 4.87988 4.09375 4.81634C4.09375 4.75279 4.11899 4.69185 4.16392 4.64692C4.20885 4.60199 4.26979 4.57675 4.33333 4.57675\" stroke=\"black\"/>\n<path d=\"M4.33334 5.05592C4.39688 5.05592 4.45782 5.03068 4.50275 4.98575C4.54769 4.94082 4.57293 4.87988 4.57293 4.81634C4.57293 4.75279 4.54769 4.69185 4.50275 4.64692C4.45782 4.60199 4.39688 4.57675 4.33334 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20833 5.05592C7.14479 5.05592 7.08385 5.03068 7.03892 4.98575C6.99399 4.94082 6.96875 4.87988 6.96875 4.81634C6.96875 4.75279 6.99399 4.69185 7.03892 4.64692C7.08385 4.60199 7.14479 4.57675 7.20833 4.57675\" stroke=\"black\"/>\n<path d=\"M7.20834 5.05592C7.27188 5.05592 7.33282 5.03068 7.37775 4.98575C7.42268 4.94082 7.44793 4.87988 7.44793 4.81634C7.44793 4.75279 7.42268 4.69185 7.37775 4.64692C7.33282 4.60199 7.27188 4.57675 7.20834 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.0198 5.05592 9.95885 5.03068 9.91392 4.98575C9.86899 4.94082 9.84375 4.87988 9.84375 4.81634C9.84375 4.75279 9.86899 4.69185 9.91392 4.64692C9.95885 4.60199 10.0198 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n<path d=\"M10.0833 5.05592C10.1469 5.05592 10.2078 5.03068 10.2528 4.98575C10.2977 4.94082 10.3229 4.87988 10.3229 4.81634C10.3229 4.75279 10.2977 4.69185 10.2528 4.64692C10.2078 4.60199 10.1469 4.57675 10.0833 4.57675\" stroke=\"black\"/>\n</svg>\n",
"id": "app-window"
},
"label": "Hashtag four loko skateboard chillwave deep",
"description": "<p>Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.</p>\n"
},
{
"label": "Mit nicht definiertem Piktogramm",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk.</p><p>Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz.</p>"
}
],
"modifier": "is-x-small"
}
}
]
}
]
}
/* Doc Only Speed Test */
{
"productmockup": {
"figure": {
"src": "/images/productMockup/sample-screenshot-desktop.png",
"alt": "Ich bin eine Produktabbildung",
"caption": "Selfies fixie next level trust fund jean shorts photo booth raw denim butcher mixtape ethical mustache.",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"perspective": "three-quarter"
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"variants": [
{
"samples": [
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
},
{
"productmockup": {
"perspective": "three-quarter",
"link": {
"label": "Details anzeigen",
"url": "#"
}
},
"highlightmarker": {
"label": "Label"
},
"kicker": {
"content": null,
"items": [
"Echo Park",
"Selfies",
"Flexitarian"
]
},
"title": "Ich bin der Titel",
"description": "<p>Cardigan Pinterest gentrify, biodiesel locavore Echo Park bespoke tattooed mlkshk. Master cleanse actually XOXO Schlitz. Four loko disrupt jean shorts meh, normcore vegan tilde vinyl small batch organic Marfa migas Austin Schlitz. Bitters sartorial gastropub, hashtag four loko skateboard chillwave deep.</p>\n",
"ctas": [
{
"button": {
"label": "Details anzeigen",
"icon": {
"position": "right",
"id": "arrow-right"
},
"weight": "bold"
}
}
]
}
]
}
]
}
import productInset from "./_productInset.script.js";
productInset.init();
export default (function (){
const defaults = {
};
function init(options) {
const elements = document.querySelectorAll(".productInset");
for (let i = 0; i < elements.length; i++) {
new Revealer(elements[i], options);
}
}
const Revealer =function(container, options) {
this.settings = Object.assign({}, defaults, options);
this.container = container;
this.targets = this.container.querySelectorAll("[data-hidden]");
if (! this.targets) {
return;
}
const template = this.container.querySelector("template[data-trigger]");
if (template) {
const buttons = template.content.querySelectorAll("button[data-action]");
buttons.forEach((button) => {
const action = button.dataset.action;
const trigger = button.cloneNode(true);
template.after(trigger);
trigger.addEventListener("click", (event) => {
event.preventDefault();
let reveal;
if (event.target.dataset.action === "show") {
reveal = true;
} else if (event.target.dataset.action === "hide") {
reveal = false;
}
this.toggle(reveal);
});
});
}
}
Revealer.prototype.toggle = function(reveal) {
this.targets.forEach((target) => {
if (typeof reveal === "undefined") {
reveal = target.dataset.hidden === "true";
}
target.dataset.hidden = ! reveal;
});
}
return {
init: init
}
})();
@import "_productInset.styles";
.productInset {
$figure-ratio: math.div(3, 2);
$indent-top: 25%;
@include stack-spacing(component);
background: transparent;
overflow: hidden;
&::before { // Spacer for figure indent
content: "";
display: block;
width: 100%;
padding-top: ($indent-top * math.div(1, $figure-ratio));
}
> .wrapper {
@include box-padding(large);
background-color: $_backdrop-color;
@include border-radius(large);
}
&[data-theme="dark"] {
> .wrapper {
background-color: get-theme-property(dark, background-color);
}
}
&-text {
position: relative;
z-index: 1;
}
.productMockup {
@include stack-spacing(0);
.figure-caption {
@extend %visually-hidden;
}
}
&-header {
display: flex;
column-gap: $kicker_gutter;
row-gap: var(--sp);
flex-wrap: wrap;
align-content: center;
.highlightMarker,
.kicker {
@include stack-spacing(0);
}
}
&-title {
@extend %heading;
margin-top: calc(var(--sp-small) - var(--sp));
flex-grow: 1;
width: 100%;
a {
color: inherit;
text-decoration: inherit;
}
}
&-description {
@include stack-spacing();
> *:first-child {
@include stack-spacing(0);
}
}
&-footer,
&-ctas {
@extend %buttonGroup;
@include stack-spacing(large);
.button + .link {
flex-grow: 1;
}
}
&-details + &-footer,
&-details + &-ctas {
@include stack-spacing(component);
}
&-cta {
@extend %buttonGroup-item;
display: flex;
align-items: center;
.link-label {
white-space: nowrap;
}
}
&-cta:has(.button) + :has(.link) {
flex-grow: 1;
justify-content: flex-end;
}
&-details {
$marker_size: 32px;
$transition-duration: $_transition-duration--in;
@include stack-spacing(component);
&[data-hidden] {
@include stack-spacing(large);
> .wrapper {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows $transition-duration;
transition: (2 * $transition-duration);
transition-property: grid-template-rows, border-color;
}
.featureList {
overflow: hidden;
&-list {
margin: var(--bp) 0;
}
}
}
&[data-hidden="true"] {
> .wrapper {
grid-template-rows: 0fr;
}
}
&[data-hidden="true"] button[data-action="hide"] {
display: none;
}
&[data-hidden="false"] button[data-action="show"] {
display: none;
}
button[data-action="hide"],
button[data-action="show"],
button[data-action="toggle"] {
text-align: left;
user-select: none;
cursor: pointer;
display: flex;
column-gap: .5ch;
align-items: center;
outline: transparent;
font-weight: $_font-weight--bold;
color: $_text-color;
min-height: ($marker_size + 2px); // Fixing clipped button in Firefox
overflow-x: clip;
}
&-marker {
@extend %revealableContent-marker;
width: $marker_size;
height: $marker_size;
overflow: visible;
&::before {
content: "";
display: block;
width: 100vw;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
&[data-hidden="false"] &-marker {
@include state-styles($revealableContent_marker_styles, open);
}
.featureList {
@include stack-spacing(0);
}
}
@include not-on-desktop(){
&-figure {
margin: 0 calc(-1 * var(--bp-large));
height: 0;
padding-bottom: ((100% - $indent-top) * math.div(1, $figure-ratio));
position: relative;
.productMockup {
position: absolute;
bottom: 0;
width: 100%;
&-figure {
transform: scale(.91) translateY(-4%);
}
}
.productMockup[data-device="tablet"] .productMockup-figure {
transform: scale(.85) translateY(5%);
transform-origin: top center;
}
}
}
@include only-on-desktop(){
position: relative;
&::before { // Spacer for figure indent
padding-top: (.5 * $indent-top * math.div(1, $figure-ratio));
}
> .wrapper {
min-height: 350px;
&::before { // Min height for preventing overlap of figure and details
content: "";
display: block;
height: 0;
padding-bottom: math.div(260px, $_page_content_max-width) * 100%;
margin-bottom: $_stack-spacing--large;
float: right;
}
}
&-figure {
aspect-ratio: #{$figure-ratio};
width: 50%;
margin: 0;
position: absolute;
right: 0;
top: 0;
transform: scale(.91) translateY(-4%);
.productMockup[data-device="tablet"] .productMockup-figure {
transform: scale(.8) translateY(5%);
transform-origin: 50% 0%;
}
}
&-text {
width: calc((100% + var(--gg)) * 0.5);
padding-right: var(--bp-large);
}
&-details {
clear: both;
}
&:not(:has(&-figure)) &-text {
width: 100%;
padding-right: 0;
}
.featureList.is-small,
.featureList.is-x-small {
.featureList-list {
$min-width: get-flowbox-item-min-width(
$max-columns: 3,
$grid_min-width: ($_page_content_max-width - 2 * px($_box-padding--large)),
);
grid-template-columns: repeat(auto-fill, minmax(min(100%, $min-width), 1fr));
}
}
}
}