device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Published Last updated: 4.2.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
content

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

any
image
(deprecated)

Pass a rendered image as content instead.

magnify
(deprecated)

This feature is no longer supported. The recommended UI replacement is to pass an image that is a modal trigger instead.

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'

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 video