Configuring News Summary Card Designs

ℹ️

Audience: This article is intended for Syntphony admins

To configure the card designs for the News Summary component, navigate to Syntphony Settings > This Tenant > News Summary. Here, you will find two tabs:

Design List: This tab displays a list of custom designs you have created for the News Summary card. You can add new designs here as well. Syntphony provides one default design as a starting point.
Design Selection: In this tab, you can select which of the available designs will be used in the News Summary webpart.

This setup allows you to manage and customize the appearance of News Summary cards easily, ensuring they align with your desired presentation and branding.

Here is an example of an alternative design that you can use if desired.

Modern Design

{
  "type": "Card",
  "style": {
    "borderRadius": "2px",
    "box-shadow": "rgba(0, 0, 0, 0.14) 0px 2px 4px, rgba(0, 0, 0, 0.12) 0px 0px 2px",
    "padding": "10px"
  },
  "horizontalSeparatorHeight": "4px",
  "dataAutomationId": "syntphony-common-news-summary",
  "body": [
    {
      "type": "Container",
      "style": {
        "width": "100%"
      },
      "items": [
        {
          "type": "ColumnSet",
          "style": {
            "marginTop": "10px"
          },
          "columns": [
            {
              "type": "Column",
              "horizontalAlignment": "center",
              "style": {
                "width": "60px",
                "marginRight": "10px"
              },
              "items": [
                {
                  "type": "Image",
                  "url": "{base.urls.siteLogoUrl}",
                  "fallbackImageUrl": "https://spoprod-a.akamaihd.net/files/sp-client-prod_2018-12-28.007/spdefaultbanner_light_a0bc58c25323ac7ccd8b6d2e15b0ee85.jpg",
                  "style": {
                    "width": "60px",
                    "height": "60px",
                    "objectFit": "cover",
                    "borderRadius": "50%"
                  }
                }
              ]
            },
            {
              "type": "Column",
              "style": {
                "width": "90%"
              },
              "items": [
                {
                  "type": "TextBlock",
                  "text": "{base.siteTitle}",
                  "onClick": "@openUrlNewTab({base.urls.siteUrl})",
                  "style": {
                    "fontSize": "18px",
                    "color": "#666666",
                    "lineHeight": "25px",
                    "font-weight": "600"
                  }
                },
                {
                  "type": "TextBlock",
                  "text": "{base.community.description}",
                  "wrap": true,
                  "maxLines": 2,
                  "applyMarkdown": false,
                  "style": {
                    "fontSize": "16px",
                    "color": "#666666",
                    "lineHeight": "22px"
                  }
                }
              ]
            }
          ]
        },
        {
          "type": "Container",
          "horizontalSeparator": false,
          "style": {
            "padding": "10px"
          },
          "items": [
            {
              "type": "Tags",
              "tags": "{base.tags}",
              "style": {
                "fontSize": "14px",
                "lineHeight": "19px",
                "color": "white",
                "align": "center",
                "div div": {
                  "background": "@eval(window.__themeState__.theme.themePrimary)"
                },
                "div div:hover": {
                  "color": "white",
                  "background": "@eval(window.__themeState__.theme.themeDarker)"
                }
              }
            }
          ]
        },
        {
          "type": "Container",
          "items": [
            {
              "type": "NewSocialBar",
              "contentUniqueId": "{base.uniqueId}",
              "socialStats": "{base.socials}",
              "statItems": [
                "Likes",
                "Comments",
                "Views"
              ],
              "highlightedItem": "Bookmark",
              "overflowItems": [
                "Favorite",
                "Share",
                "Feedback",
                "Follow",
                {
                  "key": "CopyLink",
                  "text": {
                    "en-US": "Copy link",
                    "es-ES": "Copiar enlace"
                  },
                  "icon": "Copy",
                  "onClick": "@copyLink()",
                  "propertyName": "copy"
                }
              ],
              "callToSetView": false,
              "urls": "{base.urls}",
              "baseType": "{base.baseType}"
            }
          ]
        }
      ]
    }
  ]
}

News summary Activity Stream