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": "[email protected]",
  "phone": "+46727137491",
  "contacts": [
    {
      "name": "Brandon Sanderson",
      "description": "Author",
      "tags": [{
        "title": "Tag",
        "category": "tag"
      }],
      "categories": {
        "title": "Category",
        "category": "category"
      }
      "email": "[email protected]",
      "phone": "+46 733 200 554",
      "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