@assaabloy/gw-group-text-and-media-two-column-text

Web component - Text And Media Two Column Text

21.5.28

latest

GitHub

npm

Version published: 3 days ago

Maintainers: 14

Weekly downloads: 1,012; increased by92.76%

Weekly downloads

Readme

Source

^{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:

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

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

FAQs

What is @assaabloy/gw-group-text-and-media-two-column-text?

Is @assaabloy/gw-group-text-and-media-two-column-text popular?

Is @assaabloy/gw-group-text-and-media-two-column-text well maintained?

Last updated on 21 Mar 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket