Erstellen eigener Button Karte

Dashboard/Cards/Frontend
,
1

Hallo,

ich wollte mir eine eigene Button-Card erstellen.

Aussehen soll sie wie folgt

  • Links oben soll der Name stehen
  • Links unten soll das Logo sein und zur Häflte zu sehen sein.
  • Rechts oben soll ein Lampenbutton sein,
  • Rechts in der Mitter einer für die Heizung
  • Rechts unten für die Lüftung.

Mein Code sieht wie folgt aus

type: custom:button-card
layout: vertical
styles:
  card:
    - height: 250px
    - width: 450px
    - display: flex
    - flex-direction: row
    - justify-content: space-between
    - align-items: center
  name:
    - font-size: 18px
    - padding-left: 10px
  icon:
    - width: 60px
    - height: 60px
    - object-fit: cover
  .sofa-icon:
    - object-position: bottom
    - width: 50px
    - height: 50px
  .light-icon:
    - width: 40px
    - height: 40px
  .heizung-icon:
    - width: 40px
    - height: 40px
  .fan-icon:
    - width: 40px
    - height: 40px

name: Wohnzimmer
show_icon: false
state:
  - value: "on"
    styles:
      name:
        - color: "#FFCC00"  # Gelb für "Licht an"
  - value: "off"
    styles:
      name:
        - color: "#CCCCCC"  # Grau für "Licht aus"

entities:
  - type: custom:button-card
    entity: light.wohnzimmer
    icon: mdi:lamp
    name: Licht
    tap_action:
      action: toggle
    styles:
      icon:
        - color: |
            {% if is_state('light.wohnzimmer', 'on') %}
              yellow
            {% else %}
              gray
            {% endif %}
  - type: custom:button-card
    entity: climate.wohnzimmer
    icon: mdi:radiator
    name: Heizung
    tap_action:
      action: toggle
    styles:
      icon:
        - color: |
            {% if is_state('climate.wohnzimmer', 'on') %}
              orange
            {% else %}
              gray
            {% endif %}
  - type: custom:button-card
    entity: fan.wohnzimmer
    icon: mdi:fan
    name: Lüfter
    tap_action:
      action: toggle
    styles:
      icon:
        - color: yellow
        - animation: |
            {% if is_state('fan.wohnzimmer', 'on') %}
              rotate 2s linear infinite
            {% else %}
              none
            {% endif %}

# Sofa Icon (nur zur Hälfte sichtbar)
  - type: custom:button-card
    entity: cover.sofa
    icon: mdi:sofa
    name: Sofa
    styles:
      icon:
        - object-position: bottom
        - width: 50px
        - height: 50px
        - overflow: hidden
        - object-fit: cover

Leider werden mir die Icons, bzw. Button nicht angezeigt. Es seht nur mittig in der Karte der Name der Karte, mehr nicht.

Vielleicht findet jemand einen Fehler in der Konfiguration