device viewer docs

Device Viewer

Getting Started

Device frames for showcase. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-device-viewer

Usage 

{% include "@bolt-components-device-viewer/device-viewer.twig" with {
  device: "iphone8",
  orientation: "portrait",
  color: "white",
  image: {
    src: "/pattern-lab/images/sample/product-device-screenshot--phone.jpg"
  }
} only %}

Schema

Name Type Value(s) Description Default
deviceName string
  • ipad, iphone8, macbook

Name of the device.

 N/A
color string
  • black, silver, gold

Device color.

 N/A
orientation string
  • portrait OR landscape

Device orientation.

 N/A
magnify boolean

Add the magnifier effect.

 false
image object
    • src

      Source url for the image.

 N/A

device viewer

device viewer ipad variation

Color: black
Orientation: 'portrait'

Color: black
Orientation: 'landscape'

Color: silver
Orientation: 'portrait'

Color: silver
Orientation: 'landscape'

Magnification: true
Orientation: 'portrait'

Magnification: true
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'

Magnification: true
Orientation: 'portrait'

Magnification: true
Orientation: 'landscape'

device viewer macbook variation

Magnification: true