Skip to content

Profile

Description

Display the svg shape in profile view

Attributes

  • tile: profile
  • styles:
  • classes:
  • lines: Provide a lines of text to be display in svg shape and also allow template string. [Array of elements]
  • size: Size of svg block shape
  • clipPath: Svg block shape path
  • id: Provide a user id
  • variant: profile

Example

{
  "tile": "profile",
  "lines": [
    "{user.name}",
    "since {user.createdAt|date:MMM YYYY}"
  ],
  "size": "180",
  "clipPath": "path('M 39.4116 17.0596 C 63.1045 -6.0573 93.555 0 119.07 17.01 C 170.1207 51.4324 209.4715 142.8968 160.1775 157.3425 C 43.7208 196.4064 17.01 178.605 7.0875 160.1775 C -5.7759 117.4811 2.834 52.7479 39.4116 17.0596 Z')",
  "styles": {
    "root": {
      "marginTop": "140px",
      "zIndex": "10"
    },
    "image": {
      "marginLeft": "15px"
    },
    "profile": {
      "height": "170px",
      "width": "150px",
      "position": "absolute",
      "left": "150px",
      "marginTop": "50px",
      "padding": "35px 15px 0px 25px",
      "backgroundColor": "#062532",
      "color": "#E9ECBE",
      "fontFamily": "Noir Pro",
      "overflow": "hidden",
      "textOverflow": "ellipsis",
      "zIndex": "10",
      "clipPath": "path('M 117 19 C 153 64 150 95 122 118 C 92 133 68 130 39 116 C -6.4 96 -4.8 56.8 21.6 34.4 C 55.2 4 89 -13 117 19 Z')"
    },
    "line1": {
      "fontSize": "1.2rem"
    },
    "line2": {
      "fontSize": ".8rem"
    }
  },
  "classes": {}
}