No notes defined.
<!-- Default -->
<div class="mockupInset">
<div class="mockupInset-figure">
<div class="productMockup">
<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>
<!-- Tablet -->
<div class="mockupInset">
<div class="mockupInset-figure">
<div class="productMockup" data-device="tablet">
<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>
<div class="mockupInset{{#modifier}} {{.}}{{/modifier}}">
<div class="mockupInset-figure">
{{#productmockup}}
{{render '@productmockup' (contextData '@mockupinset' this) merge=true}}
{{/productmockup}}
</div>
</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": "#"
}
}
}
}
/* 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": "#"
}
},
"device": "tablet"
}
}
@import "_mockupInset.settings";
@import "_mockupInset.styles";
$mockupInset_styles: (
font-family: monospace,
background-color: lightgray,
) !default;
.mockupInset {
@include stack-spacing(section);
.productMockup {
@include stack-spacing(0);
}
@include only-on-desktop(){
width: get-columns-width(8);
margin-left: auto;
margin-right: auto;
}
}