^{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": {
      "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/"
      }
      "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"
    },
    "visible": true
  },
  "link": {
    "text": "Read more",
    "url": "/#",
    "type": "primary",
    "visible": true
  },
  "config": {
    "reversed": true,
    "padding": {
      "top": true,
      "bottom": true
    }
  }
}

theme Two different color options:

• "theme-alt-1" (white)
• "theme-alt-2" (grey)

Dependencies @assaabloy/gw-group-vendor @assaabloy/brand-styles