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) |
|---|---|---|---|---|
|
|
Name of the device. |
string
| — |
|
|
|
Device color. |
string
| — |
|
|
|
Device orientation. |
string
| — |
|
|
|
Add the magnifier effect. |
boolean
|
false
|
|
|
|
object
| — |
|