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)
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"
}
]
}Default (Vertical)
{
"title": "Health and security",
"icon": "Health",
"link": "https://www.google.com/"
}Default (Horizontal)
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)"
}
}
]
}
]
}
]
}
]
}Default (Horizontal)
{
"title": "Health and security",
"icon": "Health",
"link": "https://www.google.com/",
"color": "#6785C1",
}Card with image (horizontal)
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"
}
}
]
}
]
}
]
}
]
}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"
}
}