Schaltflächen-Karte gesucht

Dashboard/Cards/Frontend
1

Moin,

ich bin auf der Suche nach diesen Schaltflächen für die Lichter und co., werde aber nicht fündig. Handelt es sich um die costum button card?

image
image2224×1392 228 KB

2

Wo hast du die Ansicht denn her?

3

Von der GitHub Seite der Sidebar-Card.

4

Die Sidebar-Card ist installiert und du hast dich an den Beispielen orientiert?

5

Ja. Jetzt geht es mir um die Schaltflächen. Das hat nichts mit der Sidebar-Card zutun. Ich bin gerade dabei, mit der Custom-Button-Card das nachzubasteln:

Bildschirmfoto 2025-11-27 um 18.56.05
Bildschirmfoto 2025-11-27 um 18.56.05244×232 2.72 KB

Jetzt versuche ich das Icon links oben in die Ecke zu bekommen, aber ohne erfolg:

type: custom:button-card
name: WIKI Licht
icon: mdi:ceiling-light
entity: light.fernseher
color: auto
size: 50%
show_state: true
show_label: true
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 12px
    - width: 105px
    - height: 105px
    - background-color: white
  label:
    - color: gray
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 10px
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-family: Helvetica
    - font-size: 13px
state:
  - value: 'on'
    styles:
      name:
        - color: black
      state:
        - color: gray
  - value: 'off'
    style:
      - opacity: 0.4
    styles:
      icon:
        - color: gray
      name:
        - color: gray
      state:
        - color: gray
  - value: unavailable
    style:
      - opacity: 0.2
      - color: red

Edit:

Habs hinbekommen:

type: custom:button-card
name: Fernseher
icon: mdi:led-strip-variant
entity: light.fernseher
color: auto
size: 50%
show_state: true
show_label: true
tap_action:
  action: toggle
hold_action:
  action: more-info
styles:
  card:
    - border-radius: 12px
    - width: 105px
    - height: 105px
    - background-color: white
  label:
    - color: gray
    - font-size: 11px
    - font-family: Helvetica
    - padding: 0px 10px
    - justify-self: start
  state:
    - font-size: 11px
    - padding: 0px 10px
    - justify-self: start
    - text-transform: capitalize
    - font-weight: bold
    - padding-left: 10px
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content min-content
  name:
    - justify-self: start
    - padding-left: 10px
    - font-weight: bold
    - font-family: Helvetica
    - font-size: 13px
  icon:
    - width: 40px
    - left: 3px
    - top: -10px
state:
  - value: "on"
    styles:
      name:
        - color: black
      state:
        - color: gray
  - value: "off"
    style:
      - opacity: 0.4
    styles:
      icon:
        - color: gray
      name:
        - color: gray
      state:
        - color: gray
  - value: unavailable
    style:
      - opacity: 0.2
      - color: red
grid_options:
  columns: 3
  rows: 2
1 „Gefällt mir“