!ASSA ABLOY
^{Global web - web components}

Wizard

Custom HTML element
``html

`

Properties
| Name | Type | Description |
| ------------- | --------- | ----------------------------- |
| content | Object | base64 encoded |
| theme | String | |

content
`js
{
"title": "",
"text": "",
"next": "",
"previous": "",
"reset": "",
"start": "",
"decisionTree": {
"id": "",
"title": "",
"text": "",
"options": [
{
"id": "",
"title": "",
"text": "",
"card": {
"title": "",
"text": "",

"image": {
"width": 0,
"height": 0,
"alt": "",
"url": "https://picsum.photos/900/500",
"renditions": {
"blur-up": "https://dummyimage.com/40x20/",
"400": "https://dummyimage.com/400x200/",
"800": "https://dummyimage.com/800x400/",
"1200": "https://dummyimage.com/1200x600/",
"1600": "https://dummyimage.com/1600x800/",
"2500": "https://dummyimage.com/2500x1250/"
},
"smartCrops": {
"1-1-S": "",
"1-1-M": "",
"1-1-L": "",
"4-3-S": "",
"4-3-M": "",
"4-3-L": "",
"3-4-S": "",
"3-4-M": "",
"3-4-L": "",
"8-3-S": "",
"8-3-M": "",
"8-3-L": "",
"16-9-S": "",
"16-9-M": "",
"16-9-L": "",
"blur-up": ""
},
}
},
"options": [...]
}
]
},
"config": {
"padding": {
"top": true,
"bottom": true
},
"aspectRatio": {
"cards": "1-1" | "4-3" | "3-4" | "8-3" | "16-9",
"endFrame": "1-1" | "4-3" | "3-4" | "8-3" | "16-9"
}
},

}

``

theme
Background options:

* "theme-alt-1" (complementary 1)
* "theme-alt-2" (complementary 2)
* "theme-alt-3" (complementary 3)
* "theme-alt-4" (complementary 4)