Input Template

[div=display: block;
text-wrap: nowrap;
box-sizing: border-box;
padding: 5rem clamp(1rem,5%,150px);
margin: auto;
max-width: 800px;
font-size: 0;
line-height: 0;]
   [div=display: none;]
      [font=Balthazar]@fluticasone[/font]
      [font=EB Garamond]@fluticasone[/font]
   [/div]
   [div=display: flex;
   --displayFont: 'Balthazar', serif;
   --bodyFont: 'EB Garamond', serif;
   flex-flow: column nowrap;]
      [div=flex: 0 auto; font-family: var(--displayFont);font-size: 3rem; line-height: .65; letter-spacing: .1em;text-transform: uppercase; text-wrap: wrap;]
         &Name \ text&
      [/div]
      [div=flex: 0 auto; font-family: var(--bodyFont);font-size: .9rem;line-height: 1.1;letter-spacing: .3em;text-transform: uppercase; margin: -1rem 0px 1rem 0px; text-wrap: wrap;]
         &Pronouns \ text& | &Age \ number&
      [/div]
      [div=flex: 0 auto;font-family: var(--bodyFont);font-size: 1.1rem;line-height: 1.1;text-wrap: wrap;text-align: justify;]&Character Summary \ content&[/div]
   [/div]
[/div]

Debug Mode

[
  "[div=display: block;\r\ntext-wrap: nowrap;\r\nbox-sizing: border-box;\r\npadding: 5rem clamp(1rem,5%,150px);\r\nmargin: auto;\r\nmax-width: 800px;\r\nfont-size: 0;\r\nline-height: 0;]\r\n   [div=display: none;]\r\n      [font=Balthazar]@fluticasone[/font]\r\n      [font=EB Garamond]@fluticasone[/font]\r\n   [/div]\r\n   [div=display: flex;\r\n   --displayFont: 'Balthazar', serif;\r\n   --bodyFont: 'EB Garamond', serif;\r\n   flex-flow: column nowrap;]\r\n      [div=flex: 0 auto; font-family: var(--displayFont);font-size: 3rem; line-height: .65; letter-spacing: .1em;text-transform: uppercase; text-wrap: wrap;]\r\n         ",
  {
    "type": "text",
    "description": "Name",
    "marker": {
      "type": "text",
      "description": "Name",
      "defaultValue": "",
      "original": "&Name \\ text&",
      "indices": [
        595,
        607
      ]
    }
  },
  "\r\n      [/div]\r\n      [div=flex: 0 auto; font-family: var(--bodyFont);font-size: .9rem;line-height: 1.1;letter-spacing: .3em;text-transform: uppercase; margin: -1rem 0px 1rem 0px; text-wrap: wrap;]\r\n         ",
  {
    "type": "text",
    "description": "Pronouns",
    "marker": {
      "type": "text",
      "description": "Pronouns",
      "defaultValue": "",
      "original": "&Pronouns \\ text&",
      "indices": [
        816,
        832
      ]
    }
  },
  " | ",
  {
    "type": "number",
    "description": "Age",
    "marker": {
      "type": "number",
      "description": "Age",
      "defaultValue": null,
      "min": null,
      "max": null,
      "original": "&Age \\ number&",
      "indices": [
        836,
        849
      ]
    }
  },
  "\r\n      [/div]\r\n      [div=flex: 0 auto;font-family: var(--bodyFont);font-size: 1.1rem;line-height: 1.1;text-wrap: wrap;text-align: justify;]",
  {
    "type": "content",
    "description": "Character Summary",
    "marker": {
      "type": "content",
      "description": "Character Summary",
      "original": "&Character Summary \\ content&",
      "indices": [
        991,
        1019
      ]
    }
  },
  "[/div]\r\n   [/div]\r\n[/div]"
]

[]

bouvardiaapp.template

By idolsenshi

Name

Pronouns

Age

Character Summary

Output