@assaabloy/gw-group-single-page-content v21.10.24

Global web - web components

Single Page Content

Custom HTML element

<gw-group-single-page-content content=""></single-page-content>

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

Job opening page

{
  "category": "jobOpening",
  "details": {
    "jobReqId": 0,
    "title": "",
    "jobDescription": {
      "header": ""
    },
    "applicationDueDate": "",
    "created": "",
    "applicationUrl": "",
    "jobFunction": {
      "category": "",
      "name": ""
    },
    "locations": [
      {
        "region": "",
        "country": "",
        "state": "",
        "city": "",
        "address": ""
      }
    ],
    "experienceLevel": {
      "value": 0,
      "name": ""
    },
    // Translations
    showMore: "Show more",
    showLess: "Show less",
    applicationDueHeading: "Application due",
    experienceLevelHeading: "Experience level",
    functionHeading: "Function",
    locationHeading: "Location",
    "apply": "",
  }
}

Press release page

{
  "category": "pressRelease",
  "details": {
    "id": "",
    "title": "",
    "isRegulatory": true,
    "publishDate": "",
    "category": "",
    "htmlIntro": "",
    "introOverridden": false,
    "htmlBody": "",
    "contactDetails": "",
    "aboutUs": "",
    "cisionWireUrl": "",
    "image": {
      "downloadUrl": "",
      "urlTo100x100ArResized": "",
      "urlTo200x200ArResized": "",
      "urlTo400x400ArResized": "",
      "urlTo800x800ArResized": "",
      "description": "",
      "keywords": []
    },
    "pdfUrl": "",

    // Translations
    "regulatory": "Regulatory"
    "download": "", // new
  }
}

Article

{
  "category": "article",
  "details": {
    "type": "blog",
    "date": "",
    "readTime": "",
    "preamble": "",
    "media": {
      "type": "image",
      "image": {
        "url": "",
        "alt": "",
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        },
        "tag": {
          "visible": true,
          "title": "",
          "text": "",
          "url": ""
        }
      },
      "video": {
        "title": "",
        "src": ""
      }
    },
    "text": ""
    "author": {
      "name": "",
      "jobTitle": "",
      "description": "",
      "email": "",
      "phone": "",
      "socialMedia": {
        "link": {
          "text": "",
          "url": ""
        },
        "socialLinks": [
          {
            "icon": "linkedin.svg | twitter.svg",
            "url": ""
          },
        ]
      },
      "image": {
        "url": "",
        "alt": "",
        "renditions": {
          "blur-up": "",
          "400": "",
          "800": "",
          "1200": "",
          "1600": "",
          "2500": ""
        },
        "smartCrops": {
          "1-1-S": "",
          "1-1-M": "",
          "1-1-L": "",
          "4-3-S": "",
          "4-3-M": "",
          "4-3-L": "",
          "3-4-S": "",
          "3-4-M": "",
          "3-4-L": "",
          "8-3-S": "",
          "8-3-M": "",
          "8-3-L": "",
          "16-9-S": "",
          "16-9-M": "",
          "16-9-L": "",
          "blur-up": ""
      },
      }
    },
    "info": {
      "eyebrow": {
        "title": ""
      },
      "title": "",
      "text": "",
      "link": {
        "text": "",
        "url": ""
      }
    }
    "aspectRatio": "1-1" | "4-3" | "3-4" | "8-3" | "16-9",
    // Translations
    "readTimeMinRead": "{{readTime}} min read", // new
    "byAuthor": "By {{ author }}", // new
    "connectWithTheAuthor": "Connect with the author",
    "call": "Call" // new
    "emailAddress": "Email" // new

  },
}

Alternative content to pass down to display an error message:

{
  "infoMessage": {
    "title": "",
    "text": ""
  }
}

content.category

This property decides on what component to render within the web component. options:

• "jobOpening"
• "pressRelease"
• "article"

theme Two different theme options:

• "theme-alt-1"
• "theme-alt-2"

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