Global web - web components

Hero Gallery

Custom HTML element

<gw-group-hero-gallery content=""></gw-group-hero-gallery>

Properties | Name | Type | Description | | ------------- | --------- | ----------------------------- | | content | Object | base64 encoded |

content

{
  "title": "",
  "text": "",
  "tags": [
    {
      "title": "",
      "url": ""
    },
  ],
  "colorSwatches": {
    "title": "",
    "size": "small" | "medium" | "large",
    "items": [
      {
        "color": "#911",
        "tooltip": "Red"
      },
    ]
  },
  "imageSwatches": {
    "title": "",
    "size": "small" | "medium" | "large",
    "items": [
        "text": "",
        "image": {
          "url": "",
          "width": 0,
          "height": 0,
          "alt": "",
          "renditions": {}
        }
    ]
  },
  "link": {
    "primary": {
      "text": "",
      "url": "",
      "visible": true
    },
    "secondary": {
      "text": "",
      "url": "",
      "visible": true
    },
    "anchor": {
      "text": "",
      "url": "",
      "visible": true,
      "count": ""
    }
  },
  "media": [
    {
      "type": "image | video",
      "image": {
        "url": "",
        "alt": "",
        "width": 0,
        "height": 0,
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        },
        "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": "",
          "text": "",
          "url": "",
          "position": ""
        }
      },
      "video": {
        "title": "",
        "src": ""
      }
    }
  ],
  "config": {
    "padding": {
      "bottom": true
    },
    "aspectRatio": "1-1" | "4-3" | "16-9",
    "containSingleImage": false
  },

  // Translations
  "imageGallery": "Image gallery",
  "showLess": "Show less",
  "showMore": "Show more",
}

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