Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage 
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: '/images/sample/product-device-screenshot--phone.jpg',
      loading: 'lazy',
    }
  } only %}
{% endset %}

{% include '@bolt-components-device-viewer/device-viewer.twig' with {
  device: 'iphone8',
  orientation: 'portrait',
  color: 'white',
  content: content,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
deviceName

Name of the device.

 string —
  • ipad, iphone8, macbook
color

Device color.

 string —
  • black, silver, gold
orientation

Device orientation.

 string —
  • portrait or landscape
content

Renderable content (i.e. a string, render array, or included pattern) to display within the device. Usually represents an image or video.

 any —
  • —
Install Install 
npm install @bolt/components-device-viewer
Dependencies @bolt/core-v3.x