Überschrift einfügen in einer vertical Stack Card

Dashboard/Cards/Frontend
1

Hallo,

ist es irgendwie möglich, eine Überschrift einzufügen? Ich würde gerne anfangen oben mit “Türen”, dann weiter unten mit “Fenster” und unten mit “Dachfenster”. Darunter dann jeweils die buttons.

Meine bisherige config sieht so aus:

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.haustur
        name: Haustür
        styles:
          card:
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:panel-door-open
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:panel-door-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.terrassentur
        name: Terrassentür
        styles:
          card:
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:panel-door-open
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:panel-door-close
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_schlafzimmer_unten_contact
        name: Schlafzimmer unten
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_wohnzimmer_unten_rechts_teilstuck_links_contact
        name: Wohnzimmer unten rechts
        styles:
          card:
            - font-size: 12px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_wohnzimmer_unten_rechts_teilstuck_rechts_contact
        name: Schlafzimmer unten rechts
        styles:
          card:
            - font-size: 12px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_gastezimmer_links_contact
        name: Gästezimmer links
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_gastezimmer_mitte_contact
        name: Gästezimmer mitte
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_gastezimmer_rechts_contact
        name: Gästezimmer rechts
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_unten_flur_links_contact
        name: Flur links
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_unten_flur_mitte_contact
        name: Flur mitte
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.fenster_erker_unten_flur_rechts_contact
        name: Flur rechts
        styles:
          card:
            - font-size: 13px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:lift-in-window-open2
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:lift-out-window-close
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.dachfenster_dach
        name: Dachboden
        styles:
          card:
            - font-size: 11px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:tilt-window-opened
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:tilt-window-closed
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.dachfenster_timo
        name: Timo
        styles:
          card:
            - font-size: 11px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:tilt-window-opened
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:tilt-window-closed
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.dachfenster_wohnzimmer_links
        name: Wohnzimmer links
        styles:
          card:
            - font-size: 10px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:tilt-window-opened
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:tilt-window-closed
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.dachfenster_wohnzimmer_rechts
        name: Wohnzimmer rechts
        styles:
          card:
            - font-size: 9px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:tilt-window-opened
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:tilt-window-closed
      - type: custom:button-card
        color_type: icon
        entity: binary_sensor.dachfenster_schlafzimmer
        name: Schlafzimmer
        styles:
          card:
            - font-size: 11px
            - height: 80px
        state:
          - value: 'on'
            color: red
            icon: phu:tilt-window-opened
            styles:
              card:
                - animation: blink 2s ease infinite
          - operator: default
            icon: phu:tilt-window-closed

Bildschirmfoto_2-12-2023_13144_homeassistant.local
Bildschirmfoto_2-12-2023_13144_homeassistant.local737×708 70.1 KB

2

Hast du es mal mit

title: Fenster

versucht?

2 „Gefällt mir“
3

Das geht so

type: vertical-stack
title: test
1 „Gefällt mir“
4

Eine Markdown Karte würde sich anbieten.

1 „Gefällt mir“
5

Danke Euch, hat geklappt. Kann ich auch irgendwie Sachen einstellen wie “mittig, Farbe oder Schriftgröße”?

Nachtrag:
@karllust
Und wie kann ich hier (Markdown) Sachen einstellen wie Schriftgröße, Farbe etc.?

:crayon:by HarryP: Zusammenführung Doppelpost

7

The Markdown card allows you to write any text. You can style it bold, italicized, ~strikethrough~ etc. You can do images, links, and more.

For more information see the Markdown Cheatsheet.

1 „Gefällt mir“
8

Is it possible to change the color?

9

<font color=blue>Blau</font> Normal

10

und wie und wo füge ich das ein?

type: horizontal-stack
title: Ventilöffnungen
Color: white
cards:
  - type: gauge
    entity: sensor.fussbodenheizung_erdgeschoss_wohnzimmer_i_unten_level
    needle: true
    min: 0
    max: 100
    name: Wohnzimmer I
    severity:
      green: 20
      yellow: 20
      red: 60
  - type: gauge
    needle: true
    min: 0
    max: 100
    entity: sensor.fussbodenheizung_erdgeschoss_wohnzimmer_ii_unten_level
    name: Wohnzimmer II
    severity:
      green: 20
      yellow: 20
      red: 60
  - type: gauge
    needle: true
    min: 0
    max: 100
    entity: sensor.fussbodenheizung_erdgeschoss_esszimmer_erker_level
    name: Esszimmer Erker
    severity:
      green: 20
      yellow: 20
      red: 60
  - type: gauge
    needle: true
    min: 0
    max: 100
    name: Esszimmer Küche
    entity: sensor.fussbodenheizung_erdgeschoss_esszimmer_kuche_level
    severity:
      green: 20
      yellow: 20
      red: 60
11

Hatte gedacht, du nutzt mittlerweile die Markdown Karte, weil der Post als Lösung markiert ist.

12

Es gibt auch ne extra Karte dafür
https://github.com/iantrich/text-divider-row

Farbe und Text größe muss man allerdings über das Theme einstellen

13

Ja aber mit Karten isst man immer so extrem schlecht mit der Platzierung gebunden. Ich finde da bekommt man es meist nicht so wie gewünscht hin, vor allem wenn man noch neu in der Sache ist. Mit einer Überschrift ist es für mich einfacher.