@assaabloy/wc-card-list

Card List - Web component for listing different types of cards in sets of 2, 3 or 4. The card list component has a light grey and a white theme.

Usage no npm install needed!

<script type="module">
  import assaabloyWcCardList from 'https://cdn.skypack.dev/@assaabloy/wc-card-list';
</script>

README

ASSA ABLOY Global web - web components

Card List

Custom HTML element

<card-list cardListData="" theme=""></card-list>

Properties | Name | Type | Description | | ------------- | --------- | ----------------------------- | | cardListData | Object | base64 encoded | | theme | String | |

cardListData

"title": "Here goes an short intro to the section",
"preamble": "Where can the journey take you? There are currently 73 open positions around the globe. Dont hesitate to apply for one of out vacancies",
"config": {
  "padding" : {
    "top": true,
    "bottom": true
  },
  "reversed": true,
  "columns": 2 | 3 | 4
  },
  "cards": [
    {
      "image": "https://picsum.photos/900/500",
      "title": "Lorem ipsum",
      "html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.</p>",
      "ctaLabel": "Meet the team",
      "ctaUrl": "/en/com/lorem/ipsum"
    },
  ]

themeColor
Two different color options:

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

Dependencies
@assaabloy/wc-vendor