Bolt Design System

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

Device Viewer

Published

Overview

Install via NPM

Usage

Schema