device viewer docs

Device Viewer

Mockup frames emulating phones, tablets, and laptops.

Twig Usage
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      src: 'https://via.placeholder.com/1500x2668',
      loading: 'lazy',
    }
  } only %}
{% endset %}

{% include '@bolt-components-device-viewer/device-viewer.twig' with {
  device: 'iphone8',
  orientation: 'portrait',
  color: 'white',
  content: content,
} only %}
Schema
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

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