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