Data displaystable.kv
Key-value list
Pairs of label and value for the attributes of one thing (a registration, a member, an event).
Use in detail views and cards to show the facts of one object: "Geburtsdatum 14.03.2017 (9 Jahre)", "Gewünschte Gruppe Kinder 7–10". Two columns on wider screens, stacked (label above value) below 480 px.
Values are plain text or numbers, already formatted for display (dates "14.03.2017", amounts "CHF 195.–"). Long values wrap. For a missing value write what it means ("Nicht angegeben", "Keine Fotos") instead of leaving it blank.
Show only what the task needs (UX guide §12.4): attendance and lists don't show birthdates, phone numbers or addresses; detail views show them only to roles that need them.
Examples
Registration details
- Geburtsdatum
- 14.03.2017 (9 Jahre)
- Erziehungsberechtigt
- Martina Gerber · [email protected]
- Gewünschte Gruppe
- Kinder 7–10
- Mitgliedschaft
- Familie (Schwester Nina ist Mitglied)
- Fotos
- Einverstanden
Data
render({
"items": [
{
"term": "Geburtsdatum",
"value": "14.03.2017 (9 Jahre)"
},
{
"term": "Erziehungsberechtigt",
"value": "Martina Gerber · [email protected]"
},
{
"term": "Gewünschte Gruppe",
"value": "Kinder 7–10"
},
{
"term": "Mitgliedschaft",
"value": "Familie (Schwester Nina ist Mitglied)"
},
{
"term": "Fotos",
"value": "Einverstanden"
}
]
})Markup
<dl class="kv"><dt>Geburtsdatum</dt><dd>14.03.2017 (9 Jahre)</dd><dt>Erziehungsberechtigt</dt><dd>Martina Gerber · [email protected]</dd><dt>Gewünschte Gruppe</dt><dd>Kinder 7–10</dd><dt>Mitgliedschaft</dt><dd>Familie (Schwester Nina ist Mitglied)</dd><dt>Fotos</dt><dd>Einverstanden</dd></dl>Event facts
- Datum
- Sa, 14.11.2026, 10:00–15:00
- Ort
- Dojang Breitenrain, Bern
- Anmeldungen
- 38
Data
render({
"items": [
{
"term": "Datum",
"value": "Sa, 14.11.2026, 10:00–15:00"
},
{
"term": "Ort",
"value": "Dojang Breitenrain, Bern"
},
{
"term": "Anmeldungen",
"value": 38
}
]
})Markup
<dl class="kv"><dt>Datum</dt><dd>Sa, 14.11.2026, 10:00–15:00</dd><dt>Ort</dt><dd>Dojang Breitenrain, Bern</dd><dt>Anmeldungen</dt><dd>38</dd></dl>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.
| Field | Type | Required | Default | Description |
|---|---|---|---|---|
items | array of objects | required | — | Pairs in display order (most important first). min 1 items |
items[].term | string | required | — | Label ("Geburtsdatum"). min 1 chars |
items[].value | string | number | required | — | Display value, already formatted ("14.03.2017 (9 Jahre)"). Numbers are shown as given. |
JSON Schema
{
"type": "object",
"additionalProperties": false,
"required": [
"items"
],
"properties": {
"items": {
"type": "array",
"minItems": 1,
"description": "Pairs in display order (most important first).",
"items": {
"type": "object",
"additionalProperties": false,
"required": [
"term",
"value"
],
"properties": {
"term": {
"type": "string",
"minLength": 1,
"description": "Label (\"Geburtsdatum\")."
},
"value": {
"type": [
"string",
"number"
],
"description": "Display value, already formatted (\"14.03.2017 (9 Jahre)\"). Numbers are shown as given."
}
}
}
}
}
}Markup & states
Root: dl.kv — usable without render() by writing the markup directly.
Parts
| Part | Description |
|---|---|
dt | Key (--text-sm, muted). Stacked above its value on phones; first column (~1/3) from 768 px. |
dd | Value (wraps anywhere for long e-mails). |
Accessibility
- Native description list (
dl/dt/dd), so each value is announced with its label. - Stacked layout on narrow screens keeps labels and values together without horizontal scrolling.