device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Published Last updated: 2.26.0 Change log Github NPM
Twig Usage 
  {% set content %}
  {% include "@bolt-components-image/image.twig" with {
    src: "/images/sample/product-device-screenshot--phone.jpg"
  } 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
magnify

Add the magnifier effect.

 boolean false
  • —
image
object —
    • src

      Source url for the image.

      • —
Install Install 
  npm install @bolt/components-device-viewer
Dependencies @bolt/components-icon @bolt/components-image @bolt/core-v3.x @bolt/lazy-queue drift-zoom

device viewer

device viewer ipad variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

device viewer iphone8 variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Color: gold
Orientation: 'portrait'

Color: gold
Orientation: 'landscape'

device viewer macbook variation

device viewer video

device viewer content magnifier modal