Devices

Beautifully demonstrate your contents in phone, laptop or tablet device mockups.

Examples

Image Description Image Description 
                    
                      <!-- Device Mockup -->
                      <div class="device device-iphone-x">
                        <img class="device-iphone-x-frame" src="../assets/svg/components/iphone-x.svg" alt="Image Description">
                        <img class="device-iphone-x-screen" src="../assets/img/407x867/img8.jpg" alt="Image Description">
                      </div>
                      <!-- End Device Mockup -->
Image Description Image Description 
                    
                      <!-- Device Mockup -->
                      <div class="device device-ipad">
                        <img class="device-ipad-frame" src="../assets/svg/components/ipad.svg" alt="Image Description">
                        <img class="device-ipad-screen" src="../assets/img/533x711/img2.jpg" alt="Image Description">
                      </div>
                      <!-- End Device Mockup -->
Image Description Image Description 
                    
                      <!-- Device Mockup -->
                      <div class="device device-horizontal-ipad">
                        <img class="device-horizontal-ipad-frame" src="../assets/svg/components/ipad-horizontal.svg" alt="Image Description">
                        <img class="device-horizontal-ipad-screen" src="../assets/img/1618x1010/img1.jpg" alt="Image Description">
                      </div>
                      <!-- End Device Mockup -->
Image Description Image Description 
                    
                      <!-- Device Mockup -->
                      <div class="device">
                        <img class="img-fluid" src="../assets/svg/components/macbook.svg" alt="Image Description">
                        <img class="device-macbook-screen" src="../assets/img/1618x1010/img2.jpg" alt="Image Description">
                      </div>
                      <!-- End Device Mockup -->
Image Description Image Description
Image Description Image Description 
                    
                      <!-- Device Mockup -->
                      <div class="device-wrapper">
                        <div class="device">
                          <img class="img-fluid" src="../assets/svg/components/macbook.svg" alt="Image Description">
                          <img class="device-macbook-screen" src="../assets/img/1618x1010/img4.jpg" alt="Image Description">
                        </div>
                        <div class="device device-iphone-x">
                          <img class="device-iphone-x-frame" src="../assets/svg/components/iphone-x.svg" alt="Image Description">
                          <img class="device-iphone-x-screen" src="../assets/img/407x867/img7.jpg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End Device Mockup -->