Global web - web components

Large Card

Custom HTML element

<large-card largeCardData="" theme=""></large-card>

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

largeCardData

{
  "config": {
    "reversed": true | false,
    "imageOverflow": {
      "position": "top",
      "backgroundColor": "white"
    }
  },
  "title": "The difference is in the refinement of the door",
  "quote": {
    "active": true | false,
    "name": "Philippe Samyn",
    "role": "Architect & engineer",
    "company": "Samyn and Partners",
    "location": "Belgium"
  },
  "html": "<p>The fire station in Charleroi houses 38 fire trucks which enter a exit at high (for livesafing) speeds. So the doors are a crucial component of the design. In facet, Samyn identifies the doors as \\\"the key item of concept\\\" of the final building<p>",
  "cta": {
    "label": "Read more",
    "url": "/#",
    "type": " '' | primary | secondary | contrast", /* leave empty to use complementary color (blue/red/brown/green) */
    "visible": true | false
  },
  "image": {
    "url": "https://res.cloudinary.com/motherload/image/upload/v1601907744/Assa/placeholder_nxipf4.jpg",
    "label": {
      "visible": true | false,
      "title": "Title",
      "text": "Label text",
      "url": "/#",
      "position": "topRight | topLeft | bottomRight | bottomLeft"
    }
  }
}

theme
If themeColor is left empty it will default to "theme-alt-1" Four different color options:

Dependencies
@assaabloy/wc-vendor