Custom badge card mit card-mod

Hallo zusammen,

ich habe mal wieder eine Idee für mein Dashboard, aber verzweifle regelrecht :slight_smile:
Ich nutze eine custom Badge Card mit Card-mod mit folgendem Code:

type: custom:badge-card
badges:
  - entity: input_boolean.comander
    tap_action:
      action: none
    card_mod:
      style: |
        :host { {% if is_state('input_boolean.comander', 'on') %}
            --label-badge-red: green;
            --label-badge-text-color: green;
            color: green;
            {% else %}
            --label-badge-red: red;
            --label-badge-text-color: red;
            color: red
          {% endif %}
            --ha-label-badge-size: 75px;
          }        
view_layout:
  position: main

zusätzlich nutze ich eine digitale Uhr
grafik

Da ich den Platz links und rechts nicht “leer” lassen wollte, habe ich überlegt dort zwei Badges zu platzieren. Mit einer Rasterkarte habe ich es nicht hinbekommen.
Hat da jemand eine Idee`oder gar eine Lösung?

Desweiteren stehe ich beim Style vor einigen Problemchen:

  • Durch das vergrößern steht der Text nicht mehr mittig und ist viel zu klein
  • und ich würde das Design grundsätzlich auf GRund des Themes gern hier hin entwickeln:
    grafik

Es sind viele Fragen auf einmal, aber ich hoffe ihr könnt mir trotzdem folgen :slight_smile:
Danke im Voraus.

FALLS es noch jemanden interessiert, hier meine Lösung.

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:button-card
    color_type: card
    entity: input_boolean.comander
    name: Chef
    show_state: false
    tap_action:
      action: none
    styles:
      card:
        - background-color: transparent
        - width: 120px
      name:
        - color: |
            [[[
              if (entity.state == 'on') return 'green';
              else return 'red';
            ]]]
      icon:
        - color: |
            [[[
              if (entity.state == 'on') return 'green';
              else return 'red';
            ]]]   
  - type: custom:digital-clock
    dateFormat:
      weekday: long
      day: 2-digit
      month: short
    timeFormat:
      hour: 2-digit
      minute: 2-digit
    card_mod:
      style: |
        ha-card {
        --ha-card-background: transparent;
        color: white;
        }    
  - type: custom:button-card
    color_type: card
    entity: input_boolean.comanderin
    name: Chefin
    show_state: false
    tap_action:
      action: none
    styles:
      card:
        - background-color: transparent
        - width: 120px
      name:
        - color: |
            [[[
              if (entity.state == 'on') return 'green';
              else return 'red';
            ]]]
      icon:
        - color: |
            [[[
              if (entity.state == 'on') return 'green';
              else return 'red';
            ]]]  

sieht nun final so aus:
grafik
Bin zufrieden und vorallem stolz wie Sau :smiley:

PS: hab noch eben unnütze Teile entfernt.