@assaabloy/wc-hero-half-width

Web component - Hero Half Width

Usage no npm install needed!

<script type="module">
  import assaabloyWcHeroHalfWidth from 'https://cdn.skypack.dev/@assaabloy/wc-hero-half-width';
</script>

README

ASSA ABLOY Global web - web components

Hero Half Width

Custom HTML element

<gw-group-hero-half-width theme="" heroData=""></gw-group-hero-half-width>

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

heroData

{
  "title": "Lorem ipsum dolor sit amet",
  "html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>",
  "cta": {
    "label": "Read more",
    "url": "/#",
    "type": "primary",
    "visible": true
  },
  "image": {
    "url": "https://res.cloudinary.com/motherload/image/upload/v1607073456/Assa/photo-1584463623578-37726932ba2d_1_nsuyme.jpg",
    "label": {
      "visible": true,
      "title": "Title",
      "text": "Label text",
      "url": "/#",
      "position": "bottomRight"
    }
  },
  "imageOverflow": {
    "backgroundColor": "white" | "grey"
  }
}

theme
Two different color options:

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

Dependencies
@assaabloy/wc-vendor