<svg xmlns="http://www.w3.org/2000/svg" width="910" height="520" viewBox="0 0 910 520" class="Device _left responsiveimage" 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": true,
  "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",
  "modifier": "_left"
}
  • Content:
    .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;
        }
    }
    
  • URL: /components/raw/device/Device.scss
  • Filesystem Path: components/molecules/Device/Device.scss
  • Size: 465 Bytes

Used to display a screenshot within an SVG device, such as a laptop or iPad.