@assaabloy/gw-group-cards-slider

Web component - Cards Slider

Usage no npm install needed!

<script type="module">
  import assaabloyGwGroupCardsSlider from 'https://cdn.skypack.dev/@assaabloy/gw-group-cards-slider';
</script>

README

ASSA ABLOY Global web - web components

Cards Slider

Custom HTML element

<gw-group-cards-slider content="" theme=""></gw-group-cards-slider>

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

content

{
  "url": "",
  "title": "",
  "text": "",
  "cardsTotalCount": 0,
  "primaryCard": {
    "title": "",
    "link": {
      "text": "",
      "url": "",
    },
  },
  "noCardMessage": "",
  "cards": [
    {
      "title": "",
      "text": "",
      "type": "default" | "primary" | "feature" | "product" | "category" | "story"
      "image": {
        "url": "",
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        }
      },
      "mediaType": "video" | "image"
      "video": {
        "title": "",
        "src": ""
      },
      "link": {
        "text": "",
        "url": ""
      }
    },
  ],
  "config": {
    "cardSize": "small" | "large",
    "cardType": "default" | "primary" | "feature" | "product" | "story"
    "cardCountLimit": 0,
    "padding": {
      "top": true,
      "bottom": true
    }
  }
}

theme Two different background options:

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

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