@assaabloy/gw-group-contacts

^{Global web - web components}

Contacts

Custom HTML element

<gw-group-contacts content="" theme=""></gw-group-contacts>

Properties

Name	Type	Description
content	Object	base64 encoded
theme	String

content

{
  "url": "",
  "title": "Heading",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra mollis sed laoreet vel vitae aliquam lorem. Diam nec amet, velit, fermentum. Sed massa sagittis malesuada sagittis eu.  Are you trying to buy a specific product or just have general sales questions?",
  "email": "[e-mail]",
  "phone": "[phone]",
  "contacts": [
    {
      "name": "Brandon Sanderson",
      "description": "Author",
      "tags": [{
        "title": "Tag",
        "category": "tag"
      }],
      "categories": {
        "title": "Category",
        "category": "category"
      }
      "email": "[e-mail]",
      "phone": "[phone]",
      "contactForm": "#",
      "locations": [
        {
          "country": "Sweden",
          "district": "Skåne",
          "city": "Malmö",
          "postalCode": "100 44",
          "geolocation": {
            "latitude": "59.334591",
            "longitude": "18.063240"
          }
        },
        {
          "country": "Sweden",
          "district": "Skåne",
          "city": "Malmö",
          "postalCode": "100 44",
          "geolocation": {
            "latitude": "59.334591",
            "longitude": "18.063240"
          }
        },
        {
          "country": "Sweden",
          "district": "Skåne",
          "city": "Malmö",
          "postalCode": "100 44",
          "geolocation": {
            "latitude": "59.334591",
            "longitude": "18.063240"
          }
        }
      ],
      "image": {
        "alt": "alt",
        "url": "https://dummyimage.com/40x40/0cf",
        "width": 2500,
        "height": 1250,
        "renditions": {
          "blur-up": "https://dummyimage.com/40x40/",
          "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/"
        },
        "smartCrops": {
          "1-1-S": "https://via.placeholder.com/300?text=1-1-Small",
          "1-1-M": "https://via.placeholder.com/800?text=1-1-Medium",
          "1-1-L": "https://via.placeholder.com/1200?text=1-1-Large",
          "4-3-S": "https://via.placeholder.com/400x300?text=4-3-Small",
          "4-3-M": "https://via.placeholder.com/800x600?text=4-3-Medium",
          "4-3-L": "https://via.placeholder.com/1600x1200?text=4-3-Large",
          "3-4-S": "https://via.placeholder.com/300x400?text=3-4-Small",
          "3-4-M": "https://via.placeholder.com/600x800?text=3-4-Medium",
          "3-4-L": "https://via.placeholder.com/1200x1600?text=3-4-Large",
          "8-3-S": "https://via.placeholder.com/400x150?text=8-3-Small",
          "8-3-M": "https://via.placeholder.com/800x300?text=8-3-Medium",
          "8-3-L": "https://via.placeholder.com/1600x600?text=8-3-Large",
          "16-9-S": "https://via.placeholder.com/320x180?text=16-9-Small",
          "16-9-M": "https://via.placeholder.com/640x360?text=16-9-Medium",
          "16-9-L": "https://via.placeholder.com/1280x720?text=16-9-Large",
          "1-1-blur-up": "https://via.placeholder.com/40?text=1-1-BLUR-UP",
          "4-3-blur-up": "https://via.placeholder.com/40x30?text=4-3-BLUR-UP",
          "3-4-blur-up": "https://via.placeholder.com/30x40?text=3-4-BLUR-UP",
          "8-3-blur-up": "https://via.placeholder.com/40x15?text=8-3-BLUR-UP",
          "16-9-blur-up": "https://via.placeholder.com/320x180?text=16-9-BLUR-UP"
        }
      }
    }
  ],
  "emailAddress": "E-mail",
  "config": {
    "padding": {
      "top": true,
      "bottom": true
    },
    "layout": "table" | "cards"
    "variant": "enhanced" | "basic"
  }
  // Translations
  "contactForm": "Contact form",
  "location": "Location",
  "phoneNumber": "Phone number",
  "role": "Role",
  "categories": "Categories",
  "contact": "Contact",
  "emailAddress": "Email",
  "xPerPage": "{{count}} per page",
  "pageXofY": "Page {{current}} of {{max}}",
}

theme Two different background options:

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

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