No notes defined.
<!-- Default -->
<div class="documentMockup">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Description of displayed media" />
</figure>
</div>
<!-- With Link -->
<div class="documentMockup">
<a href="#" title="">
<figure class="figure" style="">
<img class="figure-image" src="../../images/placeholder/dummy-document.jpg" alt="Description of displayed media" />
</figure>
</a>
</div>
<div class="documentMockup">
{{#if link~}}
<a href="{{link.url}}"{{#link.target}} target="{{.}}"{{/link.target}} title="{{link.label}}">
{{~/if}}
{{#image}}
{{render '@figure' (contextData '@downloaditem' this) merge=false}}
{{/image}}
{{#if link~}}
</a>
{{~/if}}
</div>
/* Default */
{
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Description of displayed media"
}
}
/* With Link */
{
"image": {
"src": "/images/placeholder/dummy-document.jpg",
"alt": "Description of displayed media"
},
"link": {
"url": "#"
}
}
@import "_documentMockup.styles";
%documentMockup {
@include stack-spacing();
border-radius: var(--br-small);
overflow: hidden;
width: 100%;
height: auto;
aspect-ratio: var(--ratio, #{$figure_aspect-ratio});
position: relative;
z-index: 1;
background-color: $_backdrop-color;
@include border-radius(small);
.figure {
@include stack-spacing(0);
display: block;
width: 100%;
aspect-ratio: inherit;
position: relative;
}
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
aspect-ratio: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(.85);
background-color: white;
border-radius: 0;
@include box-shadow(large);
transition: transform $_transition-duration;
}
a {
display: block;
width: 100%;
aspect-ratio: inherit;
&:hover img {
transform: translate(-50%, -50%) scale(.93);
transition-duration: $_transition-duration--in;
}
}
}
.documentMockup {
@extend %documentMockup;
}