Coach note

Notes show what a person wrote to someone: a coach's feedback to an athlete ("Super Woche, Lea! Achte bei den Kicks auf die Hüfte."), a comment on a registration. The tinted surface marks it as a human message, distinct from system text.

The meta line shows author and date ("Sandra · 01.10."). Pass date as ISO (YYYY-MM-DD): it is rendered in a <time datetime> and formatted Swiss style ("01.10.2026"); pass dateLabel for relative wording you computed ("gestern").

The text is plain paragraphs, never HTML. Notes about minors are visible only to the athlete, guardians and assigned coaches (UX guide §12.4).

Examples

Coach note to an athlete

render({
  "author": "Sandra",
  "date": "2026-10-01",
  "dateLabel": "01.10.",
  "text": [
    "Super Woche, Lea! Achte bei den Kicks auf die Hüfte."
  ]
})

<div class="note"><p class="note__meta">Sandra · <time datetime="2026-10-01">01.10.</time></p><p>Super Woche, Lea! Achte bei den Kicks auf die Hüfte.</p></div>

Comment with full date

render({
  "author": "Marco Huber",
  "date": "2026-09-28",
  "text": [
    "Mutter hat angerufen: Luca kann erst ab November ins Training.",
    "Bitte Rechnung anteilig ab 1.11. erstellen."
  ]
})

<div class="note"><p class="note__meta">Marco Huber · <time datetime="2026-09-28">28.09.2026</time></p><p>Mutter hat angerufen: Luca kann erst ab November ins Training.</p><p>Bitte Rechnung anteilig ab 1.11. erstellen.</p></div>

Data contract

What render(data) accepts — validated against this JSON Schema in development and tests. Unknown fields are rejected. The same schema is in components.json.

{
  "type": "object",
  "additionalProperties": false,
  "required": [
    "author",
    "text"
  ],
  "properties": {
    "author": {
      "type": "string",
      "minLength": 1,
      "description": "Who wrote it, as the reader knows them (\"Sandra\", \"Sandra Keller\")."
    },
    "date": {
      "type": "string",
      "pattern": "^\\d{4}-\\d{2}-\\d{2}$",
      "description": "Date written (ISO `YYYY-MM-DD`); rendered as `<time datetime>`."
    },
    "dateLabel": {
      "type": "string",
      "description": "Display text for the date (\"01.10.\", \"gestern\"); default is `date` as \"DD.MM.YYYY\"."
    },
    "text": {
      "type": "array",
      "minItems": 1,
      "description": "Message paragraphs (plain text).",
      "items": {
        "type": "string",
        "minLength": 1,
        "description": "One paragraph."
      }
    }
  }
}

Markup & states

Root: div.note — usable without render() by writing the markup directly.

Parts

Accessibility

• Author and date come first, so the message is announced with its sender.
• The date is a <time> element with an ISO datetime.
• The tint is decorative; the meta line identifies it as a note.

Guidance

Related: Card · Proposal card