Action tile · Club Hub UI

Home screens answer "what needs me now?" (UX guide §4.2). The action tile is the single most important next step: the training that is starting (Trainer: "Präsenz"), today's session (Athlete: "Start"). Use at most one per screen; everything else is a list or cards below.

The whole tile is one link. Anatomy: eyebrow (when/what, "Jetzt · 17:30–18:30"), a large verb-like title with an icon, a meta line (context, "Kinder 7–10 · Leitung"), and optionally a progress bar with visible text ("1 von 3 diese Woche · +20 Punkte").

The tile uses the club accent fill, so it is the most prominent element on the page; don't combine it with an accent card on the same screen.

Examples

Trainer: attendance now

Jetzt · 17:30–18:30Präsenz Kinder 7–10 · Leitung

Data

render({
  "href": "#praesenz",
  "eyebrow": "Jetzt · 17:30–18:30",
  "title": "Präsenz",
  "meta": "Kinder 7–10 · Leitung"
})

Markup

<a class="action-tile" href="#praesenz"><span class="action-tile__eyebrow">Jetzt · 17:30–18:30</span><span class="action-tile__title">Präsenz <svg class="icon" data-size="lg" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#chevron-right"/></svg></span><span class="action-tile__meta">Kinder 7–10 · Leitung</span></a>

Athlete: start training with progress

TrainingStart Wettkampfvorbereitung Herbst1 von 3 diese Woche · +20 Punkte

Data

render({
  "href": "#training",
  "eyebrow": "Training",
  "title": "Start",
  "icon": "play",
  "meta": "Wettkampfvorbereitung Herbst",
  "progress": {
    "value": 1,
    "max": 3,
    "text": "1 von 3 diese Woche · +20 Punkte"
  }
})

Markup

<a class="action-tile" href="#training"><span class="action-tile__eyebrow">Training</span><span class="action-tile__title">Start <svg class="icon" data-size="lg" aria-hidden="true"><use href="../../packages/ui/icons/icons.svg#play"/></svg></span><span class="action-tile__meta">Wettkampfvorbereitung Herbst</span><progress class="progress" max="3" value="1" aria-hidden="true"></progress><span>1 von 3 diese Woche · +20 Punkte</span></a>

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
`href`	`string`	required	—	Where the action happens (link target).
`eyebrow`	`string`	optional	—	Small line above the title: when/what ("Jetzt · 17:30–18:30", "Training").
`title`	`string`	required	—	Short, large action word ("Präsenz", "Start"). min 1 chars
`icon`	`string`	optional	`"chevron-right"`	Icon id after the title ("play", "chevron-right").
`meta`	`string`	optional	—	Context line ("Kinder 7–10 · Leitung", "Wettkampfvorbereitung Herbst").
`progress`	`object`	optional	—	Optional progress bar with visible text.
`progress.value`	`number`	required	—	Current value (≤ `max`). ≥ 0
`progress.max`	`number`	required	—	Goal value. ≥ 1
`progress.text`	`string`	required	—	Visible progress text ("1 von 3 diese Woche · +20 Punkte"). min 1 chars

JSON Schema

{
  "type": "object",
  "additionalProperties": false,
  "required": [
    "href",
    "title"
  ],
  "properties": {
    "href": {
      "type": "string",
      "description": "Where the action happens (link target)."
    },
    "eyebrow": {
      "type": "string",
      "description": "Small line above the title: when/what (\"Jetzt · 17:30–18:30\", \"Training\")."
    },
    "title": {
      "type": "string",
      "minLength": 1,
      "description": "Short, large action word (\"Präsenz\", \"Start\")."
    },
    "icon": {
      "type": "string",
      "default": "chevron-right",
      "description": "Icon id after the title (\"play\", \"chevron-right\")."
    },
    "meta": {
      "type": "string",
      "description": "Context line (\"Kinder 7–10 · Leitung\", \"Wettkampfvorbereitung Herbst\")."
    },
    "progress": {
      "type": "object",
      "additionalProperties": false,
      "required": [
        "value",
        "max",
        "text"
      ],
      "description": "Optional progress bar with visible text.",
      "properties": {
        "value": {
          "type": "number",
          "minimum": 0,
          "description": "Current value (≤ `max`)."
        },
        "max": {
          "type": "number",
          "minimum": 1,
          "description": "Goal value."
        },
        "text": {
          "type": "string",
          "minLength": 1,
          "description": "Visible progress text (\"1 von 3 diese Woche · +20 Punkte\")."
        }
      }
    }
  }
}

Markup & states

Root: a.action-tile — usable without render() by writing the markup directly.

Parts

Part	Description
`.action-tile__eyebrow`	Small line above the title.
`.action-tile__title`	Display-size title with trailing icon.
`.action-tile__meta`	Context line.
`.progress`	Progress bar on the accent fill (decorative; the text next to it is read).

States

State	Description
`:hover / :active`	Accent hover colour (never shrinks, design guide §9).
`:focus-visible`	Global focus ring.

Accessibility

One link; its accessible name is the text in reading order ("Jetzt · 17:30–18:30 Präsenz Kinder 7–10 · Leitung") — keep the parts short.
The progress bar is aria-hidden; its visible text carries the value.
White text on the accent fill is a verified pair (--color-on-accent).

Guidance

DoPick the action from the role's schedule (overdue → now → today).

DoUse a verb or the task name as the title.

Don'tDon't place more than one action tile on a screen.

Don'tDon't put buttons inside the tile.

Related: Card · Progress bar · Streak strip