2.5.1

Device Viewer

Device Viewer Component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-device-viewer

Source code

View on Github

Dependencies

@bolt/core

drift-zoom

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. —