@assaabloy/gw-group-text-and-media-two-column-text
v21.8.31
Published
Web component - Text And Media Two Column Text
Downloads
1,558
Maintainers
Keywords
Readme
Global web - web components
Text And Media Two Column Text
Custom HTML element
<gw-group-text-and-media-two-column-text content="" theme=""></gw-group-text-and-media-two-column-text>
Properties | Name | Type | Description | | ------------- | --------- | ----------------------------- | | content | String | base64 encoded object | | theme | String | |
content
{
"title": "Here goes an short intro to the section",
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>",
"text2": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
"media": {
"type": "video" | "image" | "dynamicMediaVideo",
"image": {
"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": ""
},
"tag": {
"visible": true,
"title": "Title",
"text": "Label text",
"url": "/#",
"position": "bottomRight"
}
},
"video": {
"title": "Youtube video title",
"src": "https://www.youtube-nocookie.com/embed/BHrmpX-dEnw"
},
"dynamicMediaVideo": {
"serverurl": "",
"videoserverurl": "",
"contentUrl": "",
"asset": "",
"poster": {
"width": 1600,
"height": 900,
"url": "",
"alt": "",
"renditions": {},
"smartCrops": {}
}
}
"visible": true
},
"link": {
"text": "Read more",
"url": "/#",
"type": "primary",
"visible": true
},
"config": {
"aspectRatio": "8-3" | "16-9",
"padding": {
"top": true,
"bottom": true
}
}
}
theme Two different color options:
Dependencies
@assaabloy/gw-group-vendor
@assaabloy/brand-styles