menu

Device mockups and previews are a useful component in product websites. These devices are incredibly flexible allowing many combinations and groupings and integrates well with all the scrolling effects.


HTML Markup

Set the preview image of the device in the background-image of the image-container. You can have multiple image-containers but the one with the class active will be the visible one. 


  <!-- Desktop -->
  <div class="desktop-preview-sizer">
    <div class="desktop-preview"></div>
    <div class="image-container active" style="background-image:url(http://placehold.it/600x400)"></div>
  </div>

  <!-- Laptop -->
  <div class="laptop-preview-sizer">
    <div class="laptop-preview"></div>
    <div class="image-container active" style="background-image:url(http://placehold.it/600x400)"></div>
  </div>

  <!-- Tablet -->
  <div class="tablet-preview-sizer">
    <div class="tablet-preview"></div>
    <div class="image-container active" style="background-image:url(http://placehold.it/600x400)"></div>
  </div>

  <!-- Phone -->
  <div class="phone-preview-sizer">
    <div class="phone-preview"></div>
    <div class="image-container active" style="background-image:url(http://placehold.it/600x400)"></div>
  </div>

Device Pairs

You can combine devices in a paired grouping to preview your images. Add the right-side class to the wrapping div to change the directional orientation. 



  <!-- Try out different combinations -->
  <div class="device-pair">

    <!-- Main Device -->
    <div class="desktop-preview-sizer">
      <div class="desktop-preview"></div>
      <div class="image-container default" style="background-image:url(http://placehold.it/600x400)"></div>
    </div>

    <!-- Accent -->
    <div class="laptop-preview-sizer">
      <div class="laptop-preview"></div>
      <div class="image-container default" style="background-image:url(http://placehold.it/600x400)"></div>
    </div>
  </div>

Device Triplets

A triplet of devices that is great for showing multiple screens or products. 



  <!-- Try out different combinations -->
  <div class="device-triplet">

    <!-- Main Device -->
    <div class="laptop-preview-sizer white">
      <div class="laptop-preview"></div>
      <div class="image-container default" style="background-image:url(http://placehold.it/600x400)"></div>
    </div>

    <!-- Left Accent Device -->
    <div class="phone-preview-sizer iphone">
      <div class="phone-preview"></div>
      <div class="image-container default" style="background-image:url(http://placehold.it/600x400)"></div>
    </div>

    <!-- Right Accent Device -->
    <div class="tablet-preview-sizer white">
      <div class="tablet-preview"></div>
      <div class="image-container default" style="background-image:url(http://placehold.it/600x400)"></div>
    </div>
  </div>