@assaabloy/gw-group-hero-full-width-image

Web component - Hero Full Width Image

Usage no npm install needed!

<script type="module">
  import assaabloyGwGroupHeroFullWidthImage from 'https://cdn.skypack.dev/@assaabloy/gw-group-hero-full-width-image';
</script>

README

ASSA ABLOY Global web - web components

Hero full-width

Custom HTML element

<gw-group-hero-full-width-image content=""></gw-group-hero-full-width-image>

Properties

Name Type Description
content String base64 encoded object

content

{
  "title": "Unlock your potential at ASSA ABLOY",
  "text": "<b>Lorem ipsum</b><i> dolor sit amet</i>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex",
  "link": {
    "text": "Read more",
    "url": "/#",
    "type": "primary" | "secondary" | "contrast" | "default"
    "visible": true
  },
  "image": {
    "desktop": {
      "url": "https://picsum.photos/900/500"
      "renditions": {
        "blur-up": "https://dummyimage.com/40x20/",
        "400": "https://dummyimage.com/400x200/",
        "800": "https://dummyimage.com/800x400/",
        "1200": "https://dummyimage.com/1200x600/",
        "1600": "https://dummyimage.com/1600x800/",
        "2500": "https://dummyimage.com/2500x1250/"
      }
    },
    "mobile": {
      "url": "https://picsum.photos/900/500"
      "renditions": {
        "blur-up": "https://dummyimage.com/40x20/",
        "400": "https://dummyimage.com/400x200/",
        "800": "https://dummyimage.com/800x400/",
        "1200": "https://dummyimage.com/1200x600/",
        "1600": "https://dummyimage.com/1600x800/",
        "2500": "https://dummyimage.com/2500x1250/"
      }
    }
  },
  "config": {
    "height": "small" | "medium" | "large",
    "position": "top" | "center" | "bottom",
  }
}

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