{% set content %}
{% include "@bolt-components-image/image.twig" with {
src: "/images/sample/product-device-screenshot--phone.jpg"
} only %}
{% endset %}
{% include "@bolt-components-device-viewer/device-viewer.twig" with {
device: "iphone8",
orientation: "portrait",
color: "white",
content: content,
} only %}
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
deviceName
|
Name of the device. |
string
| — |
|
color
|
Device color. |
string
| — |
|
orientation
|
Device orientation. |
string
| — |
|
magnify
|
Add the magnifier effect. |
boolean
|
false
|
|
image
|
object
| — |
|
npm install @bolt/components-device-viewer
Color: black
Orientation: 'portrait'
Color: black
Orientation: 'landscape'
Color: silver
Orientation: 'portrait'
Color: silver
Orientation: 'landscape'
Color: black
Orientation: 'portrait'
Color: black
Orientation: 'landscape'
Color: silver
Orientation: 'portrait'
Color: silver
Orientation: 'landscape'
Color: gold
Orientation: 'portrait'
Color: gold
Orientation: 'landscape'