Customizable Quick Links Designs

Here you’ll find all the designs you can apply to Syntphony customizable quick links. It is as simple as choosing the design that best suits your needs and copying the code we provide. If you dare to go a step further, you can edit the designs we provide or create your own.

Default (Vertical)

Preview

JSON

Default (Vertical)


{
  "type": "Card",
  "onClick": "@openUrl({link})",
  "style": {
    "width": "100%"
  },
  "body": [
    {
      "horizontalSeparator": false,
      "items": [
        {
          "type": "Icon",
          "name": "{icon}",
          "horizontalSeparator": false,
          "style": {
            "color": "lightblue",
            "font-size": "23px",
            "marginRight": "16px"
          }
        },
        {
          "type": "TextBlock",
          "horizontalSeparator": false,
          "onClick": "@openUrl({link})",
          "style": {
            "color": "black",
            "flex": 1,
            "font-weight": "500",
            "fontSize": "15px"
          },
          "text": "{title}"
        },
        {
          "horizontalSeparator": false,
          "name": "ChevronRight",
          "style": {
            "color": "lightblue",
            "font-weight": "900",
            "fontSize": "15px",
            "marginLeft": "auto",
            "marginTop": "3px"
          },
          "type": "Icon"
        }
      ],
      "style": {
        "flexDirection": "row",
        "padding": "10px 0",
        "position": "relative",
        "width": "100%"
      },
      "type": "Container"
    }
  ]
}

Sample data

Default (Vertical)


{
  "title": "Health and security",
  "icon": "Health",
  "link": "https://www.google.com/"
}

Default (Horizontal)

Preview

JSON

Default (Horizontal)


{
  "type": "Card",
  "onClick": "@openUrl({link})",
  "style": {
    "padding": "16px",
    "height": "144px",
    "maxWidth": "350px",
    "background-color": "@eval({color} || 'gray')",
    "borderRadius": "3px"
  },
  "body": [
    {
      "type": "Container",
      "horizontalSeparator": false,
      "items": [
        {
          "type": "TextBlock",
          "text": "{title}",
          "style": {
            "color": "white",
            "fontSize": "20px"
          }
        }
      ]
    },
    {
      "type": "Container",
      "horizontalSeparator": false,
      "style": {
        "marginTop": "auto"
      },
      "items": [
        {
          "type": "ColumnSet",
          "style": {
            "justifyContent": "space-between",
            "alignItems": "center"
          },
          "columns": [
            {
              "type": "Column",
              "horizontalAlignment": "left",
              "style": {
                "flexDirection": "row",
                "alignItems": "center"
              },
              "items": [
                {
                  "type": "TextBlock",
                  "text": {
                    "default": "Access",
                    "en-US": "Access",
                    "es-ES": "Acceder"
                  },
                  "size": "small",
                  "applyMarkdown": false,
                  "style": {
                    "color": "white",
                    "marginRight": "10px"
                  }
                },
                {
                  "type": "Icon",
                  "name": "ChromeBackMirrored",
                  "style": {
                    "font-size": "11px",
                    "color": "white",
                    "marginTop": "4px"
                  }
                }
              ]
            },
            {
              "type": "Column",
              "style": {
                "horizontalAlignment": "right",
                "horizontalSeparator": false
              },
              "items": [
                {
                  "type": "Icon",
                  "horizontalSeparator": false,
                  "name": "{icon}",
                  "visible": "@eval(Boolean({icon}))",
                  "style": {
                    "font-size": "25px",
                    "color": "rgba(255, 255, 255, 0.7)"
                  }
                },
                {
                  "type": "Image",
                  "horizontalSeparator": false,
                  "url": "@eval({image.preview} || {image.base64})",
                  "visible": "@eval(Boolean({image.preview}))",
                  "style": {
                    "font-size": "25px",
                    "height": "25px",
                    "color": "rgba(255, 255, 255, 0.7)"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Sample data

Default (Horizontal)


{
  "title": "Health and security",
  "icon": "Health",
  "link": "https://www.google.com/",
  "color": "#6785C1",
}

Card with image (horizontal)

Preview

JSON

Card with image (horizontal)


{
  "type": "Card",
  "onClick": "@openUrl({link})",
  "style": {
    "padding": "20px",
    "height": "420px",
    "maxWidth": "400px",
    "background": "url('{image.preview}')",
    "backgroundColor": "@eval({color} || 'gray')",
    "background-repeat": "no-repeat",
    "background-size": "cover",
    "background-position": "center center",
    "borderRadius": "3px"
  },
  "body": [
    {
      "type": "Container",
      "horizontalSeparator": false,
      "style": {
        "marginTop": "auto"
      },
      "items": [
        {
          "type": "TextBlock",
          "text": "{title}",
          "wrap": true,
          "maxLines": 3,
          "style": {
            "color": "white",
            "fontSize": "14px",
            "textTransform": "uppercase",
            "fontWeight": "200"
          }
        },
        {
          "type": "TextBlock",
          "text": "{description}",
          "wrap": true,
          "maxLines": 3,
          "style": {
            "color": "white",
            "fontSize": "24px",
            "margin": "10px 0 15px"
          }
        },
        {
          "type": "ColumnSet",
          "style": {
            "justifyContent": "space-between",
            "alignItems": "center"
          },
          "columns": [
            {
              "type": "Column",
              "horizontalAlignment": "left",
              "style": {
                "flexDirection": "row",
                "alignItems": "center"
              },
              "items": [
                {
                  "type": "TextBlock",
                  "text": {
                    "default": "Access",
                    "en-US": "Access",
                    "es-ES": "Acceder"
                  },
                  "applyMarkdown": false,
                  "style": {
                    "color": "white",
                    "marginRight": "10px",
                    "fontSize": "14px",
                    "fontWeight": "300"
                  }
                },
                {
                  "type": "Icon",
                  "name": "ChromeBackMirrored",
                  "style": {
                    "font-size": "11px",
                    "color": "white",
                    "marginTop": "4px"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Sample data

Card with image (horizontal)


{
  "title": "Health and security",
  "description": "We are a leading provider of information technology services.",
  "icon": "",
  "link": "https://www.google.com/",
  "color": "#6785C1",
  "image": {
    "base64": null,
    "name": null,
    "url": "https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
    "preview": "https://images.unsplash.com/photo-1541746972996-4e0b0f43e02a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"
  }
}