Global web - web components

Hero full-width

Custom HTML element

<gw-group-hero-full-width-image content=""></gw-group-hero-full-width-image>

Properties

| Name | Type | Description | | ------------- | --------- | ----------------------------- | | content | String | base64 encoded object |

content

{
  "title": "Unlock your potential at ASSA ABLOY",
  "text": "<b>Lorem ipsum</b><i> dolor sit amet</i>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex",
  "link": {
    "text": "Read more",
    "url": "/#",
    "type": "primary" | "secondary" | "contrast" | "default"
    "visible": true
  },
  "mediaType": "image" | "dynamicMediaVideo",
  "dynamicMediaVideo": {
    "serverurl": "",
    "videoserverurl": "",
    "contentUrl": "",
    "asset": ""
  },
  "image": {
    "desktop": {
      "url": "https://gw-assets.assaabloy.com/is/image/assaabloylocal/000107506:8-3-L",
      "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": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:1-1-S",
        "1-1-M": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:1-1-M",
        "1-1-L": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:1-1-L",
        "3-4-S": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:3-4-S",
        "3-4-M": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:3-4-M",
        "3-4-L": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:3-4-L",
        "4-3-S": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:4-3-S",
        "4-3-M": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:4-3-M",
        "4-3-L": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:4-3-L",
        "8-3-S": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:8-3-S",
        "8-3-M": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:8-3-M",
        "8-3-L": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:8-3-L",
        "16-9-S": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:16-9-S",
        "16-9-M": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:16-9-M",
        "16-9-L": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:16-9-L",
        "blur-up": "https://s7g10.scene7.com/is/image/assaabloydev/test-documentation:blur-up"
      }
    },
    "mobile": {
      "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/"
      }
    }
  },
  "buttonList": [
    {
      "text": "",
      "url": "",
      "target": ""
    },
  ],
  "config": {
    "variant": "buttonList" | "default",
    "height": "small" | "medium" | "large",
    "position": "top" | "center" | "bottom",
    "textAlignment": "top" | "bottom",
    "textColor": "main" | "alternative",
    "textBackground": "solid" | "textShadow" | "none"
  },
}

theme Two different background options:

• "theme-alt-1" (main)
• "theme-alt-2" (alternative)

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