2.11.0

Device Viewer

Device Viewer Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-device-viewer
Source code
View on Github
Dependencies

Overview

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: "/images/sample/product-device-screenshot--phone.jpg"
  }
} 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.

      • —