<svg xmlns="http://www.w3.org/2000/svg" width="910" height="520" viewBox="0 0 910 520" class="Device " aria-labelledby="device" xmlns:xlink="http://www.w3.org/1999/xlink">
<title id="device">Laptop showing Facebook message history and contact info for a customer</title>
<path d="M123.1,519A38.2,38.2,0,0,1,85,480.8V39.2A38.2,38.2,0,0,1,123.1,1H786.9A38.2,38.2,0,0,1,825,39.2V480.8A38.2,38.2,0,0,1,786.9,519Z" fill="#fff"/>
<path d="M786.9,2A37.2,37.2,0,0,1,824,39.2V480.8A37.2,37.2,0,0,1,786.9,518H123.1A37.2,37.2,0,0,1,86,480.8V39.2A37.2,37.2,0,0,1,123.1,2H786.9m0-2H123.1A39.2,39.2,0,0,0,84,39.2V480.8A39.2,39.2,0,0,0,123.1,520H786.9A39.2,39.2,0,0,0,826,480.8V39.2A39.2,39.2,0,0,0,786.9,0Z" fill="#f3f4f4"/>
<path d="M910,502.8H0a4.7,4.7,0,0,0,1.2,3H908.7A4.5,4.5,0,0,0,910,502.8Z" fill="#f3f4f4"/>
<path d="M1.3,505.8c6.4,7.9,38.4,14,89.2,14h729c50.9,0,82.9-6,89.2-14Z" fill="#dee1e1"/>
<rect x="114.5" y="36.5" width="681" height="443" rx="4.5" ry="4.5" fill="#dee1e1"/>
<path d="M791,37a4,4,0,0,1,4,4V475a4,4,0,0,1-4,4H119a4,4,0,0,1-4-4V41a4,4,0,0,1,4-4H791m0-1H119a5,5,0,0,0-5,5V475a5,5,0,0,0,5,5H791a5,5,0,0,0,5-5V41a5,5,0,0,0-5-5Z" fill="#dee1e1"/>
<image width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="https://media.sproutsocial.com/uploads/analytics-report-sent-messages-3.png"/>
</svg>
{{#if ipad}}
<svg width="522" height="746" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 522 746" class="Device {{modifier}} {{#if responsive}}responsiveimage{{/if}}" xml:space="preserve" aria-labelledby="{{titleid}}">
<title id="{{titleid}}">{{title}}</title>
<path fill="#FFFFFF" d="M30,0h462c16.6,0,30,13.4,30,30v686c0,16.6-13.4,30-30,30H30c-16.6,0-30-13.4-30-30V30C0,13.4,13.4,0,30,0z"/>
<circle fill="#F3F4F4" stroke="#D3D6D7" stroke-miterlimit="10" cx="261" cy="716.3" r="14.9"/>
<circle fill="#D3D6D7" cx="261" cy="27.6" r="3.7"/>
<image x="24.6" y="58.3" width="472" height="630" xlink:href="{{src}}"/>
</svg>
{{else}}
<svg xmlns="http://www.w3.org/2000/svg" width="910" height="520" viewBox="0 0 910 520" class="Device {{modifier}} {{#if responsive}}responsiveimage{{/if}}" aria-labelledby="{{titleid}}" xmlns:xlink="http://www.w3.org/1999/xlink">
<title id="{{titleid}}">{{title}}</title>
<path d="M123.1,519A38.2,38.2,0,0,1,85,480.8V39.2A38.2,38.2,0,0,1,123.1,1H786.9A38.2,38.2,0,0,1,825,39.2V480.8A38.2,38.2,0,0,1,786.9,519Z" fill="#fff"/>
<path d="M786.9,2A37.2,37.2,0,0,1,824,39.2V480.8A37.2,37.2,0,0,1,786.9,518H123.1A37.2,37.2,0,0,1,86,480.8V39.2A37.2,37.2,0,0,1,123.1,2H786.9m0-2H123.1A39.2,39.2,0,0,0,84,39.2V480.8A39.2,39.2,0,0,0,123.1,520H786.9A39.2,39.2,0,0,0,826,480.8V39.2A39.2,39.2,0,0,0,786.9,0Z" fill="#f3f4f4"/>
<path d="M910,502.8H0a4.7,4.7,0,0,0,1.2,3H908.7A4.5,4.5,0,0,0,910,502.8Z" fill="#f3f4f4"/>
<path d="M1.3,505.8c6.4,7.9,38.4,14,89.2,14h729c50.9,0,82.9-6,89.2-14Z" fill="#dee1e1"/>
<rect x="114.5" y="36.5" width="681" height="443" rx="4.5" ry="4.5" fill="#dee1e1"/>
<path d="M791,37a4,4,0,0,1,4,4V475a4,4,0,0,1-4,4H119a4,4,0,0,1-4-4V41a4,4,0,0,1,4-4H791m0-1H119a5,5,0,0,0-5,5V475a5,5,0,0,0,5,5H791a5,5,0,0,0,5-5V41a5,5,0,0,0-5-5Z" fill="#dee1e1"/>
<image width="800" height="520" transform="translate(115 37) scale(0.85)" xlink:href="{{src}}"/>
</svg>
{{/if}}
{
"color": "gray",
"ipad": null,
"responsive": null,
"src": "https://media.sproutsocial.com/uploads/analytics-report-sent-messages-3.png",
"title": "Laptop showing Facebook message history and contact info for a customer",
"titleid": "device"
}
.Device {
height: auto;
max-width: 100%;
}
.Device--angled {
transition: transform $transition-time-600 $transition-in-default;
transform: perspective(1400px) rotate3d(1, -.9, 1, 52deg) translate(-40px, -40px);
@media #{$desktop-media} {
transform: perspective(1400px) rotate3d(1, -.9, 1, 52deg) translate(100px, -100px);
}
@media screen and (min-width: #{$small-width}) and (max-width: 960px) {
transform: none;
}
}
Used to display a screenshot within an SVG device, such as a laptop or iPad.