^{Global web - web components}

Cards Grid

Custom HTML element

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

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

content

{
  "url": "",
  "title": "",
  "text": "",
  "primaryCard": {
    "title": "",
    "link": {
      "text": "",
      "url": ""
    },
    "visible": true
  },
  "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": {
    "cardType": "default" | "primary" | "feature" | "product" | "story"
    "reversedLayout": false,
    "cardSize": "small",
    "pagination": {
      "active": true,
      "perPage": 8
    },
    "filtering": {
      "active": true,
      "tagCategories": [
        {
          "displayLabel": "Topic",
          "category": "topic",
          "tags": ["topic1", "topic2"]
        },
      ]
    },
    "padding": {
      "top": true,
      "bottom": true
    },

    // Translations
  "loading": "Loading...",
  "showMore": "Show More",
  "result": "result",
  "results": "results",
  "nothingMoreToShow": "Nothing more to show",
  "showingXofY": "Showing {{current}} of {{max}}",
  "newestFirst": "Newest first",
  "oldestFirst": "Oldest first",
  "alphabeticallyAZ": "A-Z",
  "alphabeticallyZA": "Z-A",
  "sortBy": "Sort by"
  },
}

Expected API call response

{
  "filtering": {
    "active": true | false
    "tagCategories": [
      {
        "displayLabel": "Topic",
        "category": "topic",
        "tags": ["topic1", "topic2"]
      }
    ]
  },
  "items": [
    {
      "id": "",
      "eyebrow": {
        "title": "",
        "text": ""
      },
      "title": "",
      "type": "",
      "created": "",
      "tags": [
        {
          "category": "topic",
          "tag": "topic1"
        }
      ],
      "link": {
        "text": ""
        "url": ""
      },
      "image": {}
      }
    }
  ]
}

theme Two different background options:

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

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