Input Template

[nobr]
  [div=display: none;]
    &Font Call \ group&[font=&Title Font \ text \ DM Serif Display&]@fluticasone[/font]
    [font=&Body Font \ text \Inter&]@fluticasone[/font]&end&
  [/div]
  [div=&Variable-Set Up \ group&--accFont: '&Title Font \ text \ DM Serif Display&', serif;
  --bodyFont: '&Body Font \ text \ Inter&', sans-serif;
  --accColor: &Accent Color \ text \ #798cdd&;
  --txtColor: &Text Color \ text \ #484848&;
  --bgColor: &Background Color \ text \ rgba(238,238,238,.6)&;
  --borderColor: &Text Color \ text \#e6e6e6&;
  --charaIMG: url(&Image URL \ text \ https://i.imgur.com/i8eiNFx.jpeg&end&);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 1rem auto; 
  container-type: inline-size;
  width: clamp(200px,calc(100% - 2rem),600px);
  padding-left: clamp(2rem,24%,150px);
  font-size: initial;]
    [div=display: block;
    height: clamp(150px,60cqw,60cqw);]

[/div]
    [div=z-index: 1; /* color blob */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 82%;
    height: 100%;
    display: block;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M395 118.9c59.2 34.4 100.1 123.6 77.7 188.9-22.9 65.2-108.5 106.1-182.2 122.5-73.6 16-135.3 7.2-169.7-22.8-34.4-30.1-42-81.3-66.9-142.1-25.2-61.3-67.6-132.1-49.6-157 18-25.2 96.5-4.4 174.9-4 78.5.4 156.2-20 215.8 14.5z' style='fill:%23000'/%3E%3C/svg%3E%0A");
    background-color: var(--accColor);
    mask-size: contain;
    mask-repeat: no-repeat;
    pointer-events: none;]

[/div]
    &Main Content \ group&[div=z-index: 5; /* name area */
    display: block;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    padding-left: clamp(2rem,24%,150px);
    top: clamp(150px,60cqw,60cqw);
    left: 0px;
    text-align: center;
    font-size: 6rem;
    font-family: var(--accFont);
    letter-spacing: -.05em;
    filter: drop-shadow(3px 3px 0px var(--accColor));
    line-height: .8;
    transform: translateY(-50%);
    pointer-events: none;]
      &Character Name \ text \ name here&
    [/div]
    [div=z-index: 3; /* image blob */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 82%;
    height: 100%;
    display: block;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M227.8 317.6c-29.1 24.9-45.2 46.8-68.6 56.1-23.6 9.3-54.2 6.5-77.8-8.6C57.7 350 41 323 34.3 292.9c-6.8-30.2-3.8-63.3 11.4-94.2 15-31 42.2-59.6 79.7-74.2 37.4-14.6 84.9-15 122.5 6.3 37.8 21 65.2 63.4 58.1 98.9-7.1 35.2-49.2 63.2-78.2 87.9z' style='fill:%23000'/%3E%3C/svg%3E%0A");
    mask-size: contain;
    mask-repeat: no-repeat;
    pointer-events: none;]
      [div=position: relative;
      display: block;
      width: 70%;
      top: 11%;
      aspect-ratio: 278/266;
      background: var(--charaIMG) center center/cover no-repeat;]

[/div]
    [/div]
    [div=z-index: 4; /* squiggle */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 82%;
    height: 100%;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M395.9 85c37.9 41.4 73.5 82 65.7 114.8-8.1 32.5-59.1 57.6-97.3 109.8-37.9 52.1-63 131.8-114.4 158.4-51.8 27.1-130.3 1.2-168.9-51-38.7-52.5-37.1-131-17.4-189.7 19.7-58.8 57.6-97.8 96.2-139.2 38.7-41.7 77.7-85 117.5-85.8 39.8-.7 80.4 41 118.6 82.7z' style='fill:transparent;stroke:%23e6e6e6;paint-order:stroke fill markers;stroke-linejoin:round;stroke-width:1px'/%3E%3C/svg%3E%0A");
    background-color: var(--borderColor);
    mask-size: contain;
    mask-repeat: no-repeat;
    pointer-events: none;]
      
    [/div]
    [div=z-index: 2; /* blurb area */
    display: block;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--borderColor);
    background: var(--bgColor);
    overflow: hidden;
    padding: clamp(1rem,10%,55px);
    border-radius: 5px;
    position: relative;]
      [div=display: block;
      width: calc(100% + 125px);
      padding-right: 125px;
      box-sizing: border-box;
      height: 20rem;
      font-family: var(--bodyFont);
      color: var(--txtColor);
      overflow-x: hidden;
      overflow-y: scroll;
      font-size: .95rem;
      text-align: justify;
      scrollbar-gutter: stable both-edges;]
        [div=display: block; height: 1rem;] [/div]
        [div=display: block; margin-bottom: .5em;]
          &Character Blurb \ content&
        [/div]
      [/div]
    [/div]&end&
    &Basic Information \ group&[div=display: flex; /* basic info */
    gap: .75rem .5rem;
    margin-bottom: 2rem;
    padding: .75rem 2rem;
    box-sizing: border-box;
    width: 100%;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: flex-end;
    font-family: var(--accFont);
    font-size: .85rem;
    text-transform: uppercase;]
      &Information Line \ group \ repeat&[div=flex: 0 auto;]&Info (Click duplicate for more) \ text \ pronouns, age, etc.&[/div]&end&
    [/div]&end&
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    ",
  {
    "type": "group",
    "description": "Font Call",
    "markerStart": {
      "type": "group",
      "description": "Font Call",
      "original": "&Font Call \\ group&",
      "repeat": false,
      "indices": [
        36,
        54
      ]
    },
    "repeat": false,
    "originalChildren": [
      "[font=",
      {
        "type": "text",
        "description": "Title Font",
        "marker": {
          "type": "text",
          "description": "Title Font",
          "defaultValue": "DM Serif Display",
          "original": "&Title Font \\ text \\ DM Serif Display&",
          "indices": [
            61,
            98
          ]
        },
        "value": "DM Serif Display"
      },
      "]@fluticasone[/font]\r\n    [font=",
      {
        "type": "text",
        "description": "Body Font",
        "marker": {
          "type": "text",
          "description": "Body Font",
          "defaultValue": "Inter",
          "original": "&Body Font \\ text \\Inter&",
          "indices": [
            131,
            155
          ]
        },
        "value": "Inter"
      },
      "]@fluticasone[/font]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        176,
        180
      ]
    }
  },
  "\r\n  [/div]\r\n  [div=",
  {
    "type": "group",
    "description": "Variable-Set Up",
    "markerStart": {
      "type": "group",
      "description": "Variable-Set Up",
      "original": "&Variable-Set Up \\ group&",
      "repeat": false,
      "indices": [
        200,
        224
      ]
    },
    "repeat": false,
    "originalChildren": [
      "--accFont: '",
      {
        "type": "text",
        "description": "Title Font",
        "marker": {
          "type": "text",
          "description": "Title Font",
          "defaultValue": "DM Serif Display",
          "original": "&Title Font \\ text \\ DM Serif Display&",
          "indices": [
            237,
            274
          ]
        },
        "value": "DM Serif Display"
      },
      "', serif;\r\n  --bodyFont: '",
      {
        "type": "text",
        "description": "Body Font",
        "marker": {
          "type": "text",
          "description": "Body Font",
          "defaultValue": "Inter",
          "original": "&Body Font \\ text \\ Inter&",
          "indices": [
            301,
            326
          ]
        },
        "value": "Inter"
      },
      "', sans-serif;\r\n  --accColor: ",
      {
        "type": "text",
        "description": "Accent Color",
        "marker": {
          "type": "text",
          "description": "Accent Color",
          "defaultValue": "#798cdd",
          "original": "&Accent Color \\ text \\ #798cdd&",
          "indices": [
            357,
            387
          ]
        },
        "value": "#798cdd"
      },
      ";\r\n  --txtColor: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "#484848",
          "original": "&Text Color \\ text \\ #484848&",
          "indices": [
            405,
            433
          ]
        },
        "value": "#484848"
      },
      ";\r\n  --bgColor: ",
      {
        "type": "text",
        "description": "Background Color",
        "marker": {
          "type": "text",
          "description": "Background Color",
          "defaultValue": "rgba(238,238,238,.6)",
          "original": "&Background Color \\ text \\ rgba(238,238,238,.6)&",
          "indices": [
            450,
            497
          ]
        },
        "value": "rgba(238,238,238,.6)"
      },
      ";\r\n  --borderColor: ",
      {
        "type": "text",
        "description": "Text Color",
        "marker": {
          "type": "text",
          "description": "Text Color",
          "defaultValue": "#e6e6e6",
          "original": "&Text Color \\ text \\#e6e6e6&",
          "indices": [
            518,
            545
          ]
        },
        "value": "#e6e6e6"
      },
      ";\r\n  --charaIMG: url(",
      {
        "type": "text",
        "description": "Image URL",
        "marker": {
          "type": "text",
          "description": "Image URL",
          "defaultValue": "https://i.imgur.com/i8eiNFx.jpeg",
          "original": "&Image URL \\ text \\ https://i.imgur.com/i8eiNFx.jpeg&",
          "indices": [
            567,
            619
          ]
        },
        "value": "https://i.imgur.com/i8eiNFx.jpeg"
      },
      "end&);\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\r\n  margin: 1rem auto; \r\n  container-type: inline-size;\r\n  width: clamp(200px,calc(100% - 2rem),600px);\r\n  padding-left: clamp(2rem,24%,150px);\r\n  font-size: initial;]\r\n    [div=display: block;\r\n    height: clamp(150px,60cqw,60cqw);]\r\n\r\n    [/div]\r\n    [div=z-index: 1; /* color blob */\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    width: 82%;\r\n    height: 100%;\r\n    display: block;\r\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M395 118.9c59.2 34.4 100.1 123.6 77.7 188.9-22.9 65.2-108.5 106.1-182.2 122.5-73.6 16-135.3 7.2-169.7-22.8-34.4-30.1-42-81.3-66.9-142.1-25.2-61.3-67.6-132.1-49.6-157 18-25.2 96.5-4.4 174.9-4 78.5.4 156.2-20 215.8 14.5z' style='fill:%23000'/%3E%3C/svg%3E%0A\");\r\n    background-color: var(--accColor);\r\n    mask-size: contain;\r\n    mask-repeat: no-repeat;\r\n    pointer-events: none;]\r\n\r\n    [/div]\r\n    ",
      {
        "type": "group",
        "description": "Main Content",
        "markerStart": {
          "type": "group",
          "description": "Main Content",
          "original": "&Main Content \\ group&",
          "repeat": false,
          "indices": [
            1633,
            1654
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=z-index: 5; /* name area */\r\n    display: block;\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    position: absolute;\r\n    padding-left: clamp(2rem,24%,150px);\r\n    top: clamp(150px,60cqw,60cqw);\r\n    left: 0px;\r\n    text-align: center;\r\n    font-size: 6rem;\r\n    font-family: var(--accFont);\r\n    letter-spacing: -.05em;\r\n    filter: drop-shadow(3px 3px 0px var(--accColor));\r\n    line-height: .8;\r\n    transform: translateY(-50%);\r\n    pointer-events: none;]\r\n      ",
          {
            "type": "text",
            "description": "Character Name",
            "marker": {
              "type": "text",
              "description": "Character Name",
              "defaultValue": "name here",
              "original": "&Character Name \\ text \\ name here&",
              "indices": [
                2131,
                2165
              ]
            },
            "value": "name here"
          },
          "\r\n    [/div]\r\n    [div=z-index: 3; /* image blob */\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    width: 82%;\r\n    height: 100%;\r\n    display: block;\r\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M227.8 317.6c-29.1 24.9-45.2 46.8-68.6 56.1-23.6 9.3-54.2 6.5-77.8-8.6C57.7 350 41 323 34.3 292.9c-6.8-30.2-3.8-63.3 11.4-94.2 15-31 42.2-59.6 79.7-74.2 37.4-14.6 84.9-15 122.5 6.3 37.8 21 65.2 63.4 58.1 98.9-7.1 35.2-49.2 63.2-78.2 87.9z' style='fill:%23000'/%3E%3C/svg%3E%0A\");\r\n    mask-size: contain;\r\n    mask-repeat: no-repeat;\r\n    pointer-events: none;]\r\n      [div=position: relative;\r\n      display: block;\r\n      width: 70%;\r\n      top: 11%;\r\n      aspect-ratio: 278/266;\r\n      background: var(--charaIMG) center center/cover no-repeat;]\r\n\r\n      [/div]\r\n    [/div]\r\n    [div=z-index: 4; /* squiggle */\r\n    position: absolute;\r\n    top: 0px;\r\n    left: 0px;\r\n    width: 82%;\r\n    height: 100%;\r\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='479' height='481' version='1.2'%3E%3Cpath d='M395.9 85c37.9 41.4 73.5 82 65.7 114.8-8.1 32.5-59.1 57.6-97.3 109.8-37.9 52.1-63 131.8-114.4 158.4-51.8 27.1-130.3 1.2-168.9-51-38.7-52.5-37.1-131-17.4-189.7 19.7-58.8 57.6-97.8 96.2-139.2 38.7-41.7 77.7-85 117.5-85.8 39.8-.7 80.4 41 118.6 82.7z' style='fill:transparent;stroke:%23e6e6e6;paint-order:stroke fill markers;stroke-linejoin:round;stroke-width:1px'/%3E%3C/svg%3E%0A\");\r\n    background-color: var(--borderColor);\r\n    mask-size: contain;\r\n    mask-repeat: no-repeat;\r\n    pointer-events: none;]\r\n      \r\n    [/div]\r\n    [div=z-index: 2; /* blurb area */\r\n    display: block;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    border: 1px solid var(--borderColor);\r\n    background: var(--bgColor);\r\n    overflow: hidden;\r\n    padding: clamp(1rem,10%,55px);\r\n    border-radius: 5px;\r\n    position: relative;]\r\n      [div=display: block;\r\n      width: calc(100% + 125px);\r\n      padding-right: 125px;\r\n      box-sizing: border-box;\r\n      height: 20rem;\r\n      font-family: var(--bodyFont);\r\n      color: var(--txtColor);\r\n      overflow-x: hidden;\r\n      overflow-y: scroll;\r\n      font-size: .95rem;\r\n      text-align: justify;\r\n      scrollbar-gutter: stable both-edges;]\r\n        [div=display: block; height: 1rem;] [/div]\r\n        [div=display: block; margin-bottom: .5em;]\r\n          ",
          {
            "type": "content",
            "description": "Character Blurb",
            "marker": {
              "type": "content",
              "description": "Character Blurb",
              "original": "&Character Blurb \\ content&",
              "indices": [
                4607,
                4633
              ]
            }
          },
          "\r\n        [/div]\r\n      [/div]\r\n    [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            4676,
            4680
          ]
        }
      },
      "\r\n    ",
      {
        "type": "group",
        "description": "Basic Information",
        "markerStart": {
          "type": "group",
          "description": "Basic Information",
          "original": "&Basic Information \\ group&",
          "repeat": false,
          "indices": [
            4687,
            4713
          ]
        },
        "repeat": false,
        "originalChildren": [
          "[div=display: flex; /* basic info */\r\n    gap: .75rem .5rem;\r\n    margin-bottom: 2rem;\r\n    padding: .75rem 2rem;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    flex-flow: row wrap;\r\n    align-items: flex-end;\r\n    justify-content: flex-end;\r\n    font-family: var(--accFont);\r\n    font-size: .85rem;\r\n    text-transform: uppercase;]\r\n      ",
          {
            "type": "group",
            "description": "Information Line",
            "markerStart": {
              "type": "group",
              "description": "Information Line",
              "original": "&Information Line \\ group \\ repeat&",
              "repeat": true,
              "indices": [
                5059,
                5093
              ]
            },
            "repeat": true,
            "originalChildren": [
              "[div=flex: 0 auto;]",
              {
                "type": "text",
                "description": "Info (Click duplicate for more)",
                "marker": {
                  "type": "text",
                  "description": "Info (Click duplicate for more)",
                  "defaultValue": "pronouns, age, etc.",
                  "original": "&Info (Click duplicate for more) \\ text \\ pronouns, age, etc.&",
                  "indices": [
                    5113,
                    5174
                  ]
                },
                "value": "pronouns, age, etc."
              },
              "[/div]"
            ],
            "children": [],
            "markerEnd": {
              "type": "end",
              "description": "end",
              "original": "&end&",
              "indices": [
                5181,
                5185
              ]
            }
          },
          "\r\n    [/div]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            5198,
            5202
          ]
        }
      },
      "\r\n  [/div]\r\n[/nobr]"
    ],
    "children": []
  }
]

[
  {
    "type": "MissingEnd",
    "marker": {
      "type": "group",
      "description": "Variable-Set Up",
      "original": "&Variable-Set Up \\ group&",
      "repeat": false,
      "indices": [
        200,
        224
      ]
    }
  }
]

nerveimpulse.template 1.0

By glucoseguardian

Font Call

Title Font

Body Font

Variable-Set Up

Title Font

Body Font

Accent Color

Text Color

Background Color

Text Color

Image URL

Main Content

Character Name

Character Blurb

Basic Information

Information Line

Info (Click duplicate for more)

Output