Input Template

[nobr]
  [div=display: none;][font=Titillium Web]@fluticasone[/font][font=Nova Mono]@fluticasone[/font][/div]
  [div=--font: 'Titillium Web', sans-serif;
  --accFont: 'Nova Mono', monospace;
  --cardBG: #ffffff;
  --bdColor: rgba(104,104,104,.65);
  --txtColor: rgba(104,104,104,1);
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  position: relative;
  width: clamp(300px,100%,1200px);
  padding: 10px;
  margin: auto;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: var(--font);
  color: var(--txtColor);]
    [div=
    flex: 3.25 275px;
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 10px;]
      &Character Box \ group \ repeat&[comment]start of copy paste --][/comment][div=--accColor: &Accent Color \ text \ crimson&; /* color of character box */
      --bdFormat: 5px solid var(--accColor);
      --largeIMG: url(&URL of Larger Character IMG \ text \ https://placehold.co/600x300?text=2:1 &); 
      --smallIMG: url(&URL of Small Character IMG \ text \ https://placehold.co/600x300?text=2:1 &);
      flex: 1 275px;
      position: relative;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      gap: 5px;
      background: var(--cardBG);
      box-sizing: border-box;
      border: 1px solid var(--bdColor);
      padding: 8% 5%;]
        [div=
        display: flex;
        flex-flow: row nowrap;
        gap: 5px;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        border-top: var(--bdFormat);
        text-transform: uppercase;
        font-size: .9rem;]
          [div=
          background: var(--accColor);
          clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0% 100%);
          color: var(--cardBG);
          box-sizing: border-box;
          padding: 5px 10px 5px 8px;
          align-self: stretch;
          font-family: var(--accFont);]
            &Number/FA Icon \ text \ 00&
          [/div]
          [div=
          flex: 1;
          padding: 5px 3px;
          box-sizing: border-box;]
            &Name \ text \ name here&
          [/div]
        [/div]
        [div=
        display: block;
        width: 100%;
        padding-top: 50%;
        font-size: 0px;
        background: var(--largeIMG) no-repeat center center/cover;]
          img
        [/div]
        [div=
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        gap: 10px;
        box-sizing: border-box;
        padding: 5px 0px;]
          [div=flex: 2; position: relative; font-size: 0px; background: var(--accColor); isolation: isolate; background: var(--smallIMG) no-repeat center center/cover; filter: saturate(0%);]img[/div]
          [div=
          flex: 3;
          display: flex;
          flex-flow: column nowrap;
          gap: 2px;
          font-size: .65rem;
          line-height: 1;
          text-transform: uppercase;
          font-family: var(--accFont);]
            &Detail \ group \ repeat &[comment]start of copy paste --][/comment][div=display: block;
            border-left: var(--bdFormat);
            padding: 2px 10px;
            box-sizing: border-box;]
              &Detail \ text \ short info&
            [/div][comment][--end of copy paste][/comment]&end&
          [/div]
        [/div]
        [div=
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: justify;
        font-size: .9rem;
        padding-bottom: 2.5rem;]
          &Content Area \ content&
        [/div]
        [div=
        position: absolute;
        bottom: 8%;
        right: calc(10% + 10px);
        font-family: var(--accFont);
        text-align: right;
        text-transform: uppercase;
        font-size: .85rem;]
          art by [url=&URL of Artist \ text&][div=display: inline-block; color: var(--accColor);]&Artist \ text&[/div][/url]
        [/div]
      [/div][comment][-- end of copy paste[/comment]&end&
    [/div]
    [div=
    flex: 1 250px;
    overflow: hidden;
    position: relative;
    min-height: 20rem;]
      [div=
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: calc(100% + 50px);
      padding-right: 50px;
      display: flex;
      flex-flow: column nowrap;
      gap: 10px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: scroll;]
        &NPC Box \ group \ repeat&[comment]start of copy paste --][/comment][div=--accColor: &Accent Color \ text \ indianred&; /* color of character box */
        --bdFormat: 5px solid var(--accColor);
        --iconIMG: url(https://placehold.co/200?text=1:1);
        display: flex;
        flex-flow: row-wrap;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        position: relative;
        background: var(--cardBG);
        box-sizing: border-box;
        border: 1px solid var(--bdColor);
        padding: 5%;]
          [div=flex: 2; font-size: 0px; background: var(--iconIMG) no-repeat center center/cover; height: 125px;]img[/div]
          [div=flex: 5;
          display: flex;
          flex-flow: column nowrap;
          gap: 10px;
          position: relative;]
            [div=
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            border-top: var(--bdFormat);
            text-transform: uppercase;
            font-size: .85rem;]
              [div=
              display: flex;
              flex-flow: row nowrap;
              align-items: center;
              justify-items: center;
              background: var(--accColor);
              clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0% 100%);
              color: var(--cardBG);
              box-sizing: border-box;
              padding: 5px 13px 5px 11px;
              align-self: stretch;
              font-family: var(--accFont);]
                [fa]fas &FA Icon or Number \ text \ fa-file-user&[/fa]
              [/div]
              [div=
              flex: 1;
              padding: 5px 3px 5px 8px;
              box-sizing: border-box;]
                &Name \ text \ name here&
              [/div]
            [/div]
            [div=
            display: block;
            width: 100%;
            box-sizing: border-box;
            text-align: justify;
            font-size: .9rem;
            padding-left: 10px;
            padding-bottom: 2.5rem;]
              &Short Description \ content&
            [/div]
            [div=
            position: absolute;
            bottom: 3%;
            right: calc(5% + 10px);
            font-family: var(--accFont);
            text-align: right;
            text-transform: uppercase;
            font-size: .75rem;]
              art by [url=&URL of Artist \ text&][div=display: inline-block; color: var(--accColor);]&Artist \ text&[/div][/url]
            [/div]
          [/div]
        [/div][comment][-- end of copy paste[/comment]&end&
      [/div]
    [/div]
  [/div]
[/nobr]

Debug Mode

[
  "[nobr]\r\n  [div=display: none;][font=Titillium Web]@fluticasone[/font][font=Nova Mono]@fluticasone[/font][/div]\r\n  [div=--font: 'Titillium Web', sans-serif;\r\n  --accFont: 'Nova Mono', monospace;\r\n  --cardBG: #ffffff;\r\n  --bdColor: rgba(104,104,104,.65);\r\n  --txtColor: rgba(104,104,104,1);\r\n  display: flex;\r\n  flex-flow: row wrap;\r\n  align-items: stretch;\r\n  justify-content: flex-start;\r\n  gap: 10px;\r\n  position: relative;\r\n  width: clamp(300px,100%,1200px);\r\n  padding: 10px;\r\n  margin: auto;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  box-sizing: border-box;\r\n  font-family: var(--font);\r\n  color: var(--txtColor);]\r\n    [div=\r\n    flex: 3.25 275px;\r\n    display: flex;\r\n    flex-flow: row wrap;\r\n    align-items: stretch;\r\n    justify-content: flex-start;\r\n    align-content: flex-start;\r\n    gap: 10px;]\r\n      ",
  {
    "type": "group",
    "description": "Character Box",
    "markerStart": {
      "type": "group",
      "description": "Character Box",
      "original": "&Character Box \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        821,
        852
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[comment]start of copy paste --][/comment][div=--accColor: ",
      {
        "type": "text",
        "description": "Accent Color",
        "marker": {
          "type": "text",
          "description": "Accent Color",
          "defaultValue": "crimson",
          "original": "&Accent Color \\ text \\ crimson&",
          "indices": [
            912,
            942
          ]
        },
        "value": "crimson"
      },
      "; /* color of character box */\r\n      --bdFormat: 5px solid var(--accColor);\r\n      --largeIMG: url(",
      {
        "type": "text",
        "description": "URL of Larger Character IMG",
        "marker": {
          "type": "text",
          "description": "URL of Larger Character IMG",
          "defaultValue": "https://placehold.co/600x300?text=2:1",
          "original": "&URL of Larger Character IMG \\ text \\ https://placehold.co/600x300?text=2:1 &",
          "indices": [
            1043,
            1119
          ]
        },
        "value": "https://placehold.co/600x300?text=2:1"
      },
      "); \r\n      --smallIMG: url(",
      {
        "type": "text",
        "description": "URL of Small Character IMG",
        "marker": {
          "type": "text",
          "description": "URL of Small Character IMG",
          "defaultValue": "https://placehold.co/600x300?text=2:1",
          "original": "&URL of Small Character IMG \\ text \\ https://placehold.co/600x300?text=2:1 &",
          "indices": [
            1147,
            1222
          ]
        },
        "value": "https://placehold.co/600x300?text=2:1"
      },
      ");\r\n      flex: 1 275px;\r\n      position: relative;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      justify-content: flex-start;\r\n      gap: 5px;\r\n      background: var(--cardBG);\r\n      box-sizing: border-box;\r\n      border: 1px solid var(--bdColor);\r\n      padding: 8% 5%;]\r\n        [div=\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        gap: 5px;\r\n        align-items: center;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n        border-top: var(--bdFormat);\r\n        text-transform: uppercase;\r\n        font-size: .9rem;]\r\n          [div=\r\n          background: var(--accColor);\r\n          clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0% 100%);\r\n          color: var(--cardBG);\r\n          box-sizing: border-box;\r\n          padding: 5px 10px 5px 8px;\r\n          align-self: stretch;\r\n          font-family: var(--accFont);]\r\n            ",
      {
        "type": "text",
        "description": "Number/FA Icon",
        "marker": {
          "type": "text",
          "description": "Number/FA Icon",
          "defaultValue": "00",
          "original": "&Number/FA Icon \\ text \\ 00&",
          "indices": [
            2115,
            2142
          ]
        },
        "value": "00"
      },
      "\r\n          [/div]\r\n          [div=\r\n          flex: 1;\r\n          padding: 5px 3px;\r\n          box-sizing: border-box;]\r\n            ",
      {
        "type": "text",
        "description": "Name",
        "marker": {
          "type": "text",
          "description": "Name",
          "defaultValue": "name here",
          "original": "&Name \\ text \\ name here&",
          "indices": [
            2277,
            2301
          ]
        },
        "value": "name here"
      },
      "\r\n          [/div]\r\n        [/div]\r\n        [div=\r\n        display: block;\r\n        width: 100%;\r\n        padding-top: 50%;\r\n        font-size: 0px;\r\n        background: var(--largeIMG) no-repeat center center/cover;]\r\n          img\r\n        [/div]\r\n        [div=\r\n        display: flex;\r\n        flex-flow: row nowrap;\r\n        align-items: stretch;\r\n        gap: 10px;\r\n        box-sizing: border-box;\r\n        padding: 5px 0px;]\r\n          [div=flex: 2; position: relative; font-size: 0px; background: var(--accColor); isolation: isolate; background: var(--smallIMG) no-repeat center center/cover; filter: saturate(0%);]img[/div]\r\n          [div=\r\n          flex: 3;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          gap: 2px;\r\n          font-size: .65rem;\r\n          line-height: 1;\r\n          text-transform: uppercase;\r\n          font-family: var(--accFont);]\r\n            ",
      {
        "type": "group",
        "description": "Detail",
        "markerStart": {
          "type": "group",
          "description": "Detail",
          "original": "&Detail \\ group \\ repeat &",
          "repeat": true,
          "indices": [
            3205,
            3230
          ]
        },
        "repeat": true,
        "originalChildren": [
          "[comment]start of copy paste --][/comment][div=display: block;\r\n            border-left: var(--bdFormat);\r\n            padding: 2px 10px;\r\n            box-sizing: border-box;]\r\n              ",
          {
            "type": "text",
            "description": "Detail",
            "marker": {
              "type": "text",
              "description": "Detail",
              "defaultValue": "short info",
              "original": "&Detail \\ text \\ short info&",
              "indices": [
                3422,
                3449
              ]
            },
            "value": "short info"
          },
          "\r\n            [/div][comment][--end of copy paste][/comment]"
        ],
        "children": [],
        "markerEnd": {
          "type": "end",
          "description": "end",
          "original": "&end&",
          "indices": [
            3510,
            3514
          ]
        }
      },
      "\r\n          [/div]\r\n        [/div]\r\n        [div=\r\n        display: block;\r\n        width: 100%;\r\n        box-sizing: border-box;\r\n        text-align: justify;\r\n        font-size: .9rem;\r\n        padding-bottom: 2.5rem;]\r\n          ",
      {
        "type": "content",
        "description": "Content Area",
        "marker": {
          "type": "content",
          "description": "Content Area",
          "original": "&Content Area \\ content&",
          "indices": [
            3747,
            3770
          ]
        }
      },
      "\r\n        [/div]\r\n        [div=\r\n        position: absolute;\r\n        bottom: 8%;\r\n        right: calc(10% + 10px);\r\n        font-family: var(--accFont);\r\n        text-align: right;\r\n        text-transform: uppercase;\r\n        font-size: .85rem;]\r\n          art by [url=",
      {
        "type": "text",
        "description": "URL of Artist",
        "marker": {
          "type": "text",
          "description": "URL of Artist",
          "defaultValue": "",
          "original": "&URL of Artist \\ text&",
          "indices": [
            4041,
            4062
          ]
        }
      },
      "][div=display: inline-block; color: var(--accColor);]",
      {
        "type": "text",
        "description": "Artist",
        "marker": {
          "type": "text",
          "description": "Artist",
          "defaultValue": "",
          "original": "&Artist \\ text&",
          "indices": [
            4116,
            4130
          ]
        }
      },
      "[/div][/url]\r\n        [/div]\r\n      [/div][comment][-- end of copy paste[/comment]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        4213,
        4217
      ]
    }
  },
  "\r\n    [/div]\r\n    [div=\r\n    flex: 1 250px;\r\n    overflow: hidden;\r\n    position: relative;\r\n    min-height: 20rem;]\r\n      [div=\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      height: 100%;\r\n      width: calc(100% + 50px);\r\n      padding-right: 50px;\r\n      display: flex;\r\n      flex-flow: column nowrap;\r\n      gap: 10px;\r\n      box-sizing: border-box;\r\n      overflow-x: hidden;\r\n      overflow-y: scroll;]\r\n        ",
  {
    "type": "group",
    "description": "NPC Box",
    "markerStart": {
      "type": "group",
      "description": "NPC Box",
      "original": "&NPC Box \\ group \\ repeat&",
      "repeat": true,
      "indices": [
        4660,
        4685
      ]
    },
    "repeat": true,
    "originalChildren": [
      "[comment]start of copy paste --][/comment][div=--accColor: ",
      {
        "type": "text",
        "description": "Accent Color",
        "marker": {
          "type": "text",
          "description": "Accent Color",
          "defaultValue": "indianred",
          "original": "&Accent Color \\ text \\ indianred&",
          "indices": [
            4745,
            4777
          ]
        },
        "value": "indianred"
      },
      "; /* color of character box */\r\n        --bdFormat: 5px solid var(--accColor);\r\n        --iconIMG: url(https://placehold.co/200?text=1:1);\r\n        display: flex;\r\n        flex-flow: row-wrap;\r\n        align-items: flex-start;\r\n        gap: 10px;\r\n        width: 100%;\r\n        position: relative;\r\n        background: var(--cardBG);\r\n        box-sizing: border-box;\r\n        border: 1px solid var(--bdColor);\r\n        padding: 5%;]\r\n          [div=flex: 2; font-size: 0px; background: var(--iconIMG) no-repeat center center/cover; height: 125px;]img[/div]\r\n          [div=flex: 5;\r\n          display: flex;\r\n          flex-flow: column nowrap;\r\n          gap: 10px;\r\n          position: relative;]\r\n            [div=\r\n            display: flex;\r\n            flex-flow: row nowrap;\r\n            align-items: center;\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            border-top: var(--bdFormat);\r\n            text-transform: uppercase;\r\n            font-size: .85rem;]\r\n              [div=\r\n              display: flex;\r\n              flex-flow: row nowrap;\r\n              align-items: center;\r\n              justify-items: center;\r\n              background: var(--accColor);\r\n              clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0% 100%);\r\n              color: var(--cardBG);\r\n              box-sizing: border-box;\r\n              padding: 5px 13px 5px 11px;\r\n              align-self: stretch;\r\n              font-family: var(--accFont);]\r\n                [fa]fas ",
      {
        "type": "text",
        "description": "FA Icon or Number",
        "marker": {
          "type": "text",
          "description": "FA Icon or Number",
          "defaultValue": "fa-file-user",
          "original": "&FA Icon or Number \\ text \\ fa-file-user&",
          "indices": [
            6284,
            6324
          ]
        },
        "value": "fa-file-user"
      },
      "[/fa]\r\n              [/div]\r\n              [div=\r\n              flex: 1;\r\n              padding: 5px 3px 5px 8px;\r\n              box-sizing: border-box;]\r\n                ",
      {
        "type": "text",
        "description": "Name",
        "marker": {
          "type": "text",
          "description": "Name",
          "defaultValue": "name here",
          "original": "&Name \\ text \\ name here&",
          "indices": [
            6496,
            6520
          ]
        },
        "value": "name here"
      },
      "\r\n              [/div]\r\n            [/div]\r\n            [div=\r\n            display: block;\r\n            width: 100%;\r\n            box-sizing: border-box;\r\n            text-align: justify;\r\n            font-size: .9rem;\r\n            padding-left: 10px;\r\n            padding-bottom: 2.5rem;]\r\n              ",
      {
        "type": "content",
        "description": "Short Description",
        "marker": {
          "type": "content",
          "description": "Short Description",
          "original": "&Short Description \\ content&",
          "indices": [
            6826,
            6854
          ]
        }
      },
      "\r\n            [/div]\r\n            [div=\r\n            position: absolute;\r\n            bottom: 3%;\r\n            right: calc(5% + 10px);\r\n            font-family: var(--accFont);\r\n            text-align: right;\r\n            text-transform: uppercase;\r\n            font-size: .75rem;]\r\n              art by [url=",
      {
        "type": "text",
        "description": "URL of Artist",
        "marker": {
          "type": "text",
          "description": "URL of Artist",
          "defaultValue": "",
          "original": "&URL of Artist \\ text&",
          "indices": [
            7164,
            7185
          ]
        }
      },
      "][div=display: inline-block; color: var(--accColor);]",
      {
        "type": "text",
        "description": "Artist",
        "marker": {
          "type": "text",
          "description": "Artist",
          "defaultValue": "",
          "original": "&Artist \\ text&",
          "indices": [
            7239,
            7253
          ]
        }
      },
      "[/div][/url]\r\n            [/div]\r\n          [/div]\r\n        [/div][comment][-- end of copy paste[/comment]"
    ],
    "children": [],
    "markerEnd": {
      "type": "end",
      "description": "end",
      "original": "&end&",
      "indices": [
        7360,
        7364
      ]
    }
  },
  "\r\n      [/div]\r\n    [/div]\r\n  [/div]\r\n[/nobr]"
]

[]

limbo.template 1.0

By glucoseguardian

Character Box

Accent Color

URL of Larger Character IMG

URL of Small Character IMG

Number/FA Icon

Name

Detail

Content Area

URL of Artist

Artist

NPC Box

Accent Color

FA Icon or Number

Name

Short Description

URL of Artist

Artist

Output