Message parts

<mf2-t> can render rich messages with slots, including placeholders and markup spans.

Have you forgotten your password? If you need more help, click here for more information.

Raw parts ($tp)

[
  {
    "type": "text",
    "value": "Have you "
  },
  {
    "type": "markup",
    "kind": "open",
    "name": "bold"
  },
  {
    "type": "text",
    "value": "forgotten"
  },
  {
    "type": "markup",
    "kind": "close",
    "name": "bold"
  },
  {
    "type": "text",
    "value": " your password? "
  },
  {
    "type": "markup",
    "kind": "standalone",
    "name": "resetButton"
  },
  {
    "type": "text",
    "value": " If you need more help, click "
  },
  {
    "type": "markup",
    "kind": "open",
    "name": "helpLink"
  },
  {
    "type": "text",
    "value": "here"
  },
  {
    "type": "markup",
    "kind": "close",
    "name": "helpLink"
  },
  {
    "type": "text",
    "value": " for more information."
  }
]

Example shape:

{
  "help_and_support": "Have you {#bold}forgotten{/bold} your password? {#resetButton/} If you need more help, click {#helpLink}here{/helpLink} for more information."
}

<mf2-t keypath="help_and_support" :args="{ name: 'Ada' }">
  <template #resetButton>
    <button>Reset password</button>
  </template>
  <template #helpLink="{ value }">
    <a href="#help">{{ value }}</a>
  </template>
</mf2-t>