Global web - web components

Hero half-width

Custom HTML element

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

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

content

{
  "title": "",
  "text": "",
  "eyebrow": {
    "title": "",
    "text": ""
  },
  "tags": [
    {
      "title": "",
      "url": ""
    },
  ],
  "link": {
    "text": "",
    "url": "",
    "type": "primary" | "secondary" | "contrast" | "default",
    "visible": true
  },
  "image": {
    "url": "",
    "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": {
      "title": "",
      "text": "",
      "url": "",
      "position": "topLeft" | "topRight" | "bottomRight" | "bottomLeft",
      "visible": true
    }
  },
  "search": {
    "addSearch": {
      "id": ""
    },
    "targetUrl": "",
    "pathFilter": "",
    "isMarketHiddenInUrl": false,
    "isLanguageHiddenInUrl": false

    "sitewide": "site wide",
    "viewAll": "View all",
    "search": "How can we help you?"
  },
  "guidedSuggestions": {
    "title": "",
    "links": [
      {
        "text": "Read more",
        "url": "/#",
        "visible": true
      }
    ],
  },
  "searchSuggestions": { // NEW
    "title": "Search suggestions:",
    "suggestions": ["Forza", "AIK"]
  },
  "config": {
    "overlap": { "color": "white" | "grey" }
    "padding": {
      "bottom": true
    }
  }
}

theme Two different color options:

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

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