Mockup
Available as: Web ComponentShortcodeOxygen ElementDisplay device mockups around your content.
Properties
color-galaxy-s8
Type: stringDefault: blackChoices: black, blue
Samsung S8 color.
color-google-pixel
Type: stringDefault: silverChoices: silver, black, blue
Google Pixel color.
color-ipad-pro
Type: stringDefault: silverChoices: silver, gold, rosegold, spacegray
IPad Pro color.
color-iphone8
Type: stringDefault: silverChoices: silver, gold, spacegray
IPhone 8 color.
color-macbook
Type: stringDefault: silverChoices: silver, gold, rosegold, spacegray
MacBook color.
color-macbook-pro
Type: stringDefault: silverChoices: silver, spacegray
MacBook Pro color.
image-position
Type: stringDefault: 50% 50%CSS Variable: --spx-mockup-image-position
size
Type: number
Mockup size.
size-max
Type: numberDefault: 0.6
Mockup size maximum.
size-min
Type: numberDefault: 0.3
Mockup size minimum.
src
Type: string
Image src if no inner slot is used.
type
Type: stringDefault: iphone-8Choices: iphone-8, iphone-x, google-pixel-2-xl, google-pixel, galaxy-s8, ipad-pro, surface-pro, surface-book, macbook, macbook-pro, surface-studio, imac-pro, apple-watch
Device type.
Slots
inner
Slot (between HTML tag).
Events
spxMockupDidLoad
Fires after component has loaded.