device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

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