card-mod: Die effektive HACS-Erweiterung für Home Assistant

Transparenz-Hinweis: Einige Links sind Affiliate-Links. Du zahlst keinen Cent mehr, unterstützt aber meine Arbeit – vielen Dank dafür!

card-mod ist ein mächtiges Tool für Home Assistant, mit dem Du Karten (Cards) im Dashboard visuell erweitern kannst. Besonders praktisch wird das, wenn Du neben dem Status eines Geräts auch Zusatzinfos wie die aktuelle Leistungsaufnahme anzeigen möchtest. Standardmäßig bieten die Karten in Home Assistant dafür kaum Möglichkeiten – aber genau hier kommt card-mod ins Spiel.

In diesem Praxistipp zeige ich Dir, wie Du mit Hilfe von card-mod eine zusätzliche Info – zum Beispiel die aktuelle Wattzahl – direkt auf deiner Karte anzeigen kannst. Das Ganze ist kein Hexenwerk, aber Du solltest bereits HACS installiert haben, um die card-mod Erweiterung nutzen zu können.

Offizielle Dokumentation: https://github.com/thomasloven/lovelace-card-mod

Voraussetzungen: Was Du brauchst

Bevor wir loslegen, stelle sicher, dass folgende Punkte erfüllt sind:

• Home Assistant ist installiert und läuft stabil.
• Du hast HACS (Home Assistant Community Store) eingerichtet.
• Über HACS ist card-mod bereits installiert.
• Für dieses Beispiel verwenden wir die Tile-Card. card-mod funktioniert aber auch mit vielen anderen Karten, z. B. Entities, Button, Glance u. v. m.

Falls Du HACS noch nicht installiert hast, findest Du eine detaillierte Anleitung auf der offiziellen HACS-Webseite oder über die Community-Foren.

Die Beispielkonfiguration: So sieht dein Tile mit Zusatzinfo aus

Hinweis: Um card-mod verwenden zu können, musst Du in den Code-Editor wechseln. In der visuellen Editoransicht von Home Assistant wird card-mod nicht unterstützt. Achte darauf, dass Du die YAML-Struktur korrekt einfügst, da es sonst zu Darstellungsfehlern kommen kann.

Nehmen wir an, Du möchtest den Stromverbrauch Deiner Kaffeemaschine direkt im Tile anzeigen. Dann könnte deine Konfiguration so aussehen:

type: tile
entity: switch.kaffeemaschine
name: Kaffeemaschine
show_entity_picture: false
vertical: false
hide_state: false
icon_tap_action:
  action: toggle
features_position: bottom
card_mod:
  style:
    ha-tile-info$: |
      .secondary:after {
        visibility: visible;
        content: " - {{ states('sensor.kaffeemaschine_power') }}W";
      }

Diese Konfiguration bewirkt, dass unter dem Namen der Kaffeemaschine zusätzlich der aktuelle Wattwert angezeigt wird – und das sogar live aktualisiert.

Hier kannst du sehen, wie das bei mir aussieht:

Was passiert hier genau?

• ha-tile-info$ zielt auf den Textbereich des Tiles.
• .secondary:after erzeugt eine Ergänzung direkt nach dem Standardtext (z. B. „Ein“ oder „Aus“).
• content wird dynamisch aus dem Sensorwert befüllt.
• visibility: visible sorgt dafür, dass der Zusatztext auch tatsächlich erscheint, selbst wenn er normalerweise ausgeblendet wäre.

Tipp: Anstelle von .secondary:after kannst Du auch .secondary:before verwenden – dann wird die Zusatzinformation vor dem Gerätestatus angezeigt. sorgt dafür, dass der Zusatztext auch tatsächlich erscheint, selbst wenn er normalerweise ausgeblendet wäre.

Das Ergebnis ist eine saubere, erweiterte Darstellung im bekannten Tile-Look.

Noch mehr Power: Was card-mod sonst noch kann

card-mod beschränkt sich nicht nur auf Tiles. Du kannst nahezu jede Karte in Home Assistant optisch anpassen. Die Möglichkeiten reichen weit über einfache Stiländerungen hinaus und erlauben Dir, nahezu jedes visuelle Detail im Dashboard anzupassen.

Einen vollständigen Überblick über die Möglichkeiten findest Du in der offiziellen Dokumentation:
https://github.com/thomasloven/lovelace-card-mod

Einziger Wermutstropfen: Du musst Dich ein wenig mit CSS und den DOM-Strukturen von Home Assistant auskennen oder bereit sein, Dich damit zu beschäftigen.

Fazit: Kleine Modifikation, große Wirkung

Mit card-mod kannst Du aus einer schlichten Tile-Karte ein mächtiges UI-Element machen. Die Möglichkeit, zusätzliche Informationen wie Stromverbrauch oder Temperatur direkt im Tile darzustellen, hebt Dein Dashboard auf ein neues Level – optisch wie funktional.

Gerade bei Geräten wie Waschmaschinen, Kaffeemaschinen oder Heizlüftern lohnt sich diese Darstellung enorm, da Du so auf einen Blick siehst, was gerade läuft – und wie intensiv.

Wenn Du also bereits HACS nutzt, lohnt sich ein Blick auf card-mod in jedem Fall. Ein kleines Tool mit großer Wirkung – genau das, was ein gutes Smart Home ausmacht.

Ein Blick in unser Setup

Neugierig, wie ein komplettes Smart-Home-System mit Home Assistant aussieht? Dann schau Dir unser Smart Home an. Dort stellen wir die Geräte vor, die wir selbst im Einsatz haben – vom Zigbee-Schalter bis zur PV-Integration. Ideal, wenn Du auf der Suche nach Inspiration bist oder Dein eigenes System weiterentwickeln möchtest.

unser smart home