Input Template

[nobr]
  [div=display: none;]
    [font=Kosugi]font call[/font]
    [font=Blinker]font call[/font]
    [font=Abril Fatface]font call[/font]
  [/div]
  [div=&Main Details \ group&
  --accent: &Accent Color \ text \crimson&;
  --bgIMG: url(&Background IMG URL \ text \ https://placehold.co/850x500 &);
  --patIMG: url(https://i.imgur.com/4vO9MnX.png);
  --displayFont: 'Kosugi', sans-serif;
  --contrastFont: 'Abril Fatface', serif;
  --txtFont: 'Blinker', sans-serif;
  display: flex;
  position: relative;
  flex-flow: column nowrap;
  width: clamp(250px, calc(100% - 1rem), 875px);
  background: var(--bgColor);
  padding-bottom: 5rem;
  margin: 1rem auto;
  box-sizing: border-box;
  overflow: hidden;
  --padde: clamp(2rem, 10%, 10rem);
  --bgColor: rgba(0,0,0,1);
  --txtColor: rgba(255,255,255,1);]
    [div=
    position: relative;
    flex: 0 auto;
    position: relative;
    width: 100%;
    filter: saturate(0%);
    background-color: var(--bgColor);
    background-image: var(--patIMG), linear-gradient(0deg, var(--bgColor) 25%, rgba(0,0,0,.4) 100%), var(--bgIMG);
    background-repeat: repeat, no-repeat, no-repeat;
    background-position: top left, top left, center center;
    background-size: auto, cover, cover;
    background-blend-mode: soft-light, normal, normal;
    padding-top: 40%;]
      [div=
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top: 50%;
      color: var(--bgcolor);
      font-size: clamp(3rem, 15vh, 250px);
      font-family: var(--contrastFont);
      mix-blend-mode: soft-light;]
        &Large Text \ text \ role&
      [/div]
      [div=
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%;
      box-sizing: border-box;
      padding: 0px var(--padde);
      color: var(--txtColor);
      font-family: var(--displayFont);
      font-size: 3rem;
      text-transform: uppercase;]
        &Name \ text \ name&&end&
      [/div]
    [/div]
    [div=
    flex: 0 auto;
    box-sizing: border-box;
    width: 100%;
    padding: 2px var(--padde);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    text-transform: uppercase;
    color: var(--txtColor);
    font-family: var(--displayFont);
    font-size: .9rem;
    letter-spacing: .04rem;
    line-height: 1.2;]
      &Detail \ group \ repeat&[div=flex: 0 auto; padding: 2px .75rem; background: var(--accent);]&Detail \ text \ info&[/div]&end&
    [/div]
    [div=
    position: relative;
    flex: 0 auto;
    padding: 3rem var(--padde);
    padding-right: calc(var(--padde) + 3rem);
    font-family: var(--txtFont);
    color: var(--txtColor);
    text-align: justify;]
      [div=display: block; margin-bottom: .65rem;]
        &Content Area \ content&
    [/div]
    [div=
    position: absolute;
    bottom: 0px;
    height: 50%;
    width: 3rem;
    background: var(--accent);
    right: 5%;
    font-size: 0px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding: 5% 0px;
    gap: 5px;]
      &Tag \ group \ repeat&[div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;]&Username (No @) \ text \ fluticasone&[/div]&end&
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;]\r\n    [font=Kosugi]font call[/font]\r\n    [font=Blinker]font call[/font]\r\n    [font=Abril Fatface]font call[/font]\r\n  [/div]\r\n  [div=",
  {
    "type": "group",
    "description": "Main Details",
    "markerStart": {
      "type": "group",
      "description": "Main Details",
      "original": "&Main Details \\ group&",
      "repeat": false,
      "indices": [
        162,
        183
      ]
    },
    "repeat": false,
    "originalChildren": [
      "\r\n  --accent: ",
      {
        "type": "text",
        "description": "Accent Color",
        "marker": {
          "type": "text",
          "description": "Accent Color",
          "defaultValue": "crimson",
          "original": "&Accent Color \\ text \\crimson&",
          "indices": [
            198,
            227
          ]
        },
        "value": "crimson"
      },
      ";\r\n  --bgIMG: url(",
      {
        "type": "text",
        "description": "Background IMG URL",
        "marker": {
          "type": "text",
          "description": "Background IMG URL",
          "defaultValue": "https://placehold.co/850x500",
          "original": "&Background IMG URL \\ text \\ https://placehold.co/850x500 &",
          "indices": [
            246,
            304
          ]
        },
        "value": "https://placehold.co/850x500"
      },
      ");\r\n  --patIMG: url(https://i.imgur.com/4vO9MnX.png);\r\n  --displayFont: 'Kosugi', sans-serif;\r\n  --contrastFont: 'Abril Fatface', serif;\r\n  --txtFont: 'Blinker', sans-serif;\r\n  display: flex;\r\n  position: relative;\r\n  flex-flow: column nowrap;\r\n  width: clamp(250px, calc(100% - 1rem), 875px);\r\n  background: var(--bgColor);\r\n  padding-bottom: 5rem;\r\n  margin: 1rem auto;\r\n  box-sizing: border-box;\r\n  overflow: hidden;\r\n  --padde: clamp(2rem, 10%, 10rem);\r\n  --bgColor: rgba(0,0,0,1);\r\n  --txtColor: rgba(255,255,255,1);]\r\n    [div=\r\n    position: relative;\r\n    flex: 0 auto;\r\n    position: relative;\r\n    width: 100%;\r\n    filter: saturate(0%);\r\n    background-color: var(--bgColor);\r\n    background-image: var(--patIMG), linear-gradient(0deg, var(--bgColor) 25%, rgba(0,0,0,.4) 100%), var(--bgIMG);\r\n    background-repeat: repeat, no-repeat, no-repeat;\r\n    background-position: top left, top left, center center;\r\n    background-size: auto, cover, cover;\r\n    background-blend-mode: soft-light, normal, normal;\r\n    padding-top: 40%;]\r\n      [div=\r\n      position: absolute;\r\n      transform: translate(-50%,-50%);\r\n      left: 50%;\r\n      top: 50%;\r\n      color: var(--bgcolor);\r\n      font-size: clamp(3rem, 15vh, 250px);\r\n      font-family: var(--contrastFont);\r\n      mix-blend-mode: soft-light;]\r\n        ",
      {
        "type": "text",
        "description": "Large Text",
        "marker": {
          "type": "text",
          "description": "Large Text",
          "defaultValue": "role",
          "original": "&Large Text \\ text \\ role&",
          "indices": [
            1620,
            1645
          ]
        },
        "value": "role"
      },
      "\r\n      [/div]\r\n      [div=\r\n      position: absolute;\r\n      bottom: 0px;\r\n      left: 0px;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      padding: 0px var(--padde);\r\n      color: var(--txtColor);\r\n      font-family: var(--displayFont);\r\n      font-size: 3rem;\r\n      text-transform: uppercase;]\r\n        ",
      {
        "type": "text",
        "description": "Name",
        "marker": {
          "type": "text",
          "description": "Name",
          "defaultValue": "name",
          "original": "&Name \\ text \\ name&",
          "indices": [
            1963,
            1982
          ]
        },
        "value": "name"
      },
      ""
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        1983,
        1987
      ]
    }
  },
  "\r\n      [/div]\r\n    [/div]\r\n    [div=\r\n    flex: 0 auto;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    padding: 2px var(--padde);\r\n    display: flex;\r\n    flex-flow: row wrap;\r\n    justify-content: flex-start;\r\n    align-items: flex-start;\r\n    gap: 5px;\r\n    text-transform: uppercase;\r\n    color: var(--txtColor);\r\n    font-family: var(--displayFont);\r\n    font-size: .9rem;\r\n    letter-spacing: .04rem;\r\n    line-height: 1.2;]\r\n      ",
  {
    "type": "group",
    "description": "Detail",
    "markerStart": {
      "type": "group",
      "description": "Detail",
      "original": "&Detail \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        2431,
        2455
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[div=flex: 0 auto; padding: 2px .75rem; background: var(--accent);]",
      {
        "type": "text",
        "description": "Detail",
        "marker": {
          "type": "text",
          "description": "Detail",
          "defaultValue": "info",
          "original": "&Detail \\ text \\ info&",
          "indices": [
            2523,
            2544
          ]
        },
        "value": "info"
      },
      "[/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        2551,
        2555
      ]
    }
  },
  "\r\n    [/div]\r\n    [div=\r\n    position: relative;\r\n    flex: 0 auto;\r\n    padding: 3rem var(--padde);\r\n    padding-right: calc(var(--padde) + 3rem);\r\n    font-family: var(--txtFont);\r\n    color: var(--txtColor);\r\n    text-align: justify;]\r\n      [div=display: block; margin-bottom: .65rem;]\r\n        ",
  {
    "type": "content",
    "description": "Content Area",
    "marker": {
      "type": "content",
      "description": "Content Area",
      "original": "&Content Area \\ content&",
      "indices": [
        2855,
        2878
      ]
    }
  },
  "\r\n    [/div]\r\n    [div=\r\n    position: absolute;\r\n    bottom: 0px;\r\n    height: 50%;\r\n    width: 3rem;\r\n    background: var(--accent);\r\n    right: 5%;\r\n    font-size: 0px;\r\n    display: flex;\r\n    flex-flow: column nowrap;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    box-sizing: border-box;\r\n    padding: 5% 0px;\r\n    gap: 5px;]\r\n      ",
  {
    "type": "group",
    "description": "Tag",
    "markerStart": {
      "type": "group",
      "description": "Tag",
      "original": "&Tag \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        3234,
        3255
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[div=flex: 0 auto; filter: saturate(0); mix-blend-mode: multiply;]",
      {
        "type": "text",
        "description": "Username (No @)",
        "marker": {
          "type": "text",
          "description": "Username (No @)",
          "defaultValue": "fluticasone",
          "original": "&Username (No @) \\ text \\ fluticasone&",
          "indices": [
            3322,
            3359
          ]
        },
        "value": "fluticasone"
      },
      "[/div]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        3366,
        3370
      ]
    }
  },
  "\r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

wad♡b.template 1.0

By glucoseguardian

Main Details

Accent Color

Background IMG URL

Large Text

Name

Detail

Content Area

Tag

Username (No @)

Output