Mockup

Available as: Web ComponentShortcodeOxygen Element

Display device mockups around your content.

<spx-mockup type="iphone-x" size-min="0.2" size-max="0.5" src="{{ url.examples }}/4.svg"> </spx-mockup>

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.