Mockup

Available as: Web ComponentShortcodeOxygen Element

Display device mockups around your content.

<spx-mockup type="iphone-x" src="https://picsum.photos/1000/1000"> </spx-mockup>

Properties

color-galaxy-s8

Type: stringDefault: 'black'CSS variable: --spx-mockup-color-galaxy-s8Choices: 'black', 'blue'

Samsung S8 color.

color-google-pixel

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-google-pixelChoices: 'silver', 'black', 'blue'

Google Pixel color.

color-ipad-pro

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-ipad-proChoices: 'silver', 'gold', 'rosegold', 'spacegray'

iPad Pro color.

color-iphone8

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-iphone8Choices: 'silver', 'gold', 'spacegray'

iPhone 8 color.

color-macbook

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-macbookChoices: 'silver', 'gold', 'rosegold', 'spacegray'

MacBook color.

color-macbook-pro

Type: stringDefault: 'silver'CSS variable: --spx-mockup-color-macbook-proChoices: 'silver', 'spacegray'

MacBook Pro color.

display

Type: stringDefault: 'inline-block'CSS variable: --spx-mockup-display

Component display property.

image-position

Type: stringDefault: '50% 50%'CSS variable: --spx-mockup-image-position

Component image-position property.

src

Type: stringDefault: 'https://picsum.photos/400/1200'

Image src if no inner slot is used.

type

Type: stringDefault: 'iphone-8'Choices: '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.

Events

spxMockupDidLoad

Fires after component has loaded.

Methods

reload

Reload component.