Multiple cards in one

[Jaguaza]

Is your feature request related to a problem?

No

Describe the solution you'd like

I have a bank card and would like to be able to combine them with chip cards.

Describe alternatives you've considered

I would like to be able to combine several cards.

Additional context

I don't know if this can be done, even if it means modifying the card with a code.

[Jaguaza]

My card looks like this:

And it's meant to work like this:

1- It calls the room I want, as it is a summary, shows its temperature and indicates if there are lights, sockets or both with the badge icon.
2- If you press it, it turns off the lights in that room.
If you leave it pressed, it turns on the desired light.
3- If you press it, it turns off the sockets in that room.
If you leave it pressed, it turns on the desired socket.

And that's how I would like to see it.

My code is this:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: HABITACIONES
    subtitle: ''
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Casa
        secondary: '{{ states(''sensor.temperatura_casa'') }}º'
        icon: mdi:laptop
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces') %}

          {% set stateSockets = states('sensor.contador_enchufes') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: 0
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces') %}

          {% set stateSockets = states('sensor.contador_enchufes') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_casa
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_casa
        alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Recibidor
        secondary: '{{ states(''sensor.temperatura_cocina'') }}º'
        icon: mdi:exit-run
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_recibidor') %}

          {% set stateSockets = states('sensor.contador_enchufes_recibidor') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: recibidor
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_recibidor') %}

          {% set stateSockets = states('sensor.contador_enchufes_recibidor') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
      - type: custom:mushroom-template-card
        primary: Cocina
        secondary: '{{ states(''sensor.temperatura_cocina'') }}º'
        icon: mdi:fridge-outline
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_cocina') %}

          {% set stateSockets = states('sensor.contador_enchufes_cocina') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: cocina
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_cocina') %}

          {% set stateSockets = states('sensor.contador_enchufes_cocina') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_recibidor
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_recibidor
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.techo_recibidor
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_recibidor
            icon_color: blue
            icon: hue:socket-eu
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.mirilla
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_cocina
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_cocina
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.techo_cocina
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_cocina
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_cocina
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.electrodomesticos_cocina
        alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Patio
        secondary: '{{ states(''sensor.temperatura_patio'') }}º'
        icon: mdi:flower-tulip-outline
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_patio') %}

          {% set stateSockets = states('sensor.contador_enchufes_patio') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: patio
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_patio') %}

          {% set stateSockets = states('sensor.contador_enchufes_patio') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
      - type: custom:mushroom-template-card
        primary: Salón
        secondary: '{{ states(''sensor.temperatura_salon'') }}º'
        icon: mdi:sofa
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_salon') %}

          {% set stateSockets = states('sensor.contador_enchufes_salon') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: salon
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_salon') %}

          {% set stateSockets = states('sensor.contador_enchufes_salon') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_patio
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_patio
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.luz_patio
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_patio
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_patio
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.enchufe_patio
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_salon
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_salon
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.lampara_cuadro_salon
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_salon
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_salon
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.regleta1_usb
        alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Pasillo
        secondary: '{{ states(''sensor.temperatura_matrimonio'') }}º'
        icon: mdi:call-split
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_pasillo') %}

          {% set stateSockets = states('sensor.contador_enchufes_pasillo') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: pasillo
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_pasillo') %}

          {% set stateSockets = states('sensor.contador_enchufes_pasillo') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
      - type: custom:mushroom-template-card
        primary: Baño
        secondary: '{{ states(''sensor.temperatura_bano'') }}º'
        icon: mdi:shower
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_aseo') %}

          {% set stateSockets = states('sensor.contador_enchufes_aseo') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: bano
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_aseo') %}

          {% set stateSockets = states('sensor.contador_enchufes_aseo') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_pasillo
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_pasillo
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.lampara_pasillo
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_pasillo
            icon_color: blue
            icon: hue:socket-eu
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_aseo
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_aseo
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.espejo_aseo
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_aseo
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_aseo
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.altavoz_bano
        alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Matrimonio
        secondary: '{{ states(''sensor.temperatura_matrimonio'') }}º'
        icon: mdi:bed-king-outline
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_matrimonio') %}

          {% set stateSockets = states('sensor.contador_enchufes_matrimonio') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: habitacion-matrimonio
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_matrimonio') %}

          {% set stateSockets = states('sensor.contador_enchufes_matrimonio') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
      - type: custom:mushroom-template-card
        primary: Noa
        secondary: '{{ states(''sensor.temperatura_noa'') }}º'
        icon: mdi:bed
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_noa') %}

          {% set stateSockets = states('sensor.contador_enchufes_noa') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: habitacion-noa
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_noa') %}

          {% set stateSockets = states('sensor.contador_enchufes_noa') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_matrimonio
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_matrimonio
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.lampara_matrimonio
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_matrimonio
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_matrimonio
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.enchufes_cabecero
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_noa
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_noa
            hold_action:
              action: call-service
              service: light.turn_on
              data: {}
              target:
                entity_id: light.lampara_noa
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_noa
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_noa
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.enchufes_noa
        alignment: center
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Oficina
        secondary: '{{ states(''sensor.temperatura_oficina'') }}º'
        icon: mdi:laptop
        badge_icon: >-
          {% set stateLights = states('sensor.contador_luces_oficina') %}

          {% set stateSockets = states('sensor.contador_enchufes_oficina') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            mdi:lightbulb
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            mdi:power-plug
          {% endif %}
        tap_action:
          action: navigate
          navigation_path: oficina
        multiline_secondary: true
        icon_color: >-
          {% set stateLights = states('sensor.contador_luces_oficina') %}

          {% set stateSockets = states('sensor.contador_enchufes_oficina') %}

          {% if is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float >= 1 and
          is_number(stateSockets) and stateSockets | float < 1 %}
            blue
          {% elif is_number(stateLights) and stateLights | float < 1 and
          is_number(stateSockets) and stateSockets | float >= 1 %}
            blue
          {% endif %}
        badge_color: blue
        fill_container: true
        layout: horizontal
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces_oficina
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_oficina
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.lampara_oficina
        alignment: center
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes_oficina
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_oficina
            hold_action:
              action: call-service
              service: switch.turn_on
              data: {}
              target:
                entity_id: switch.enchufes_oficina
        alignment: center

If anyone knows how to do it I would appreciate it.

[piitaya]

Hello 🙂 You can use vertical-stack-in-card for this 🙂

[Jaguaza]

@piitaya Thanks for everything. I hope to clarify myself to adapt the code, I'm bad with it.

[Jaguaza]

Hello 🙂 You can use vertical-stack-in-card for this 🙂

I am not able to obtain a visually beautiful result.

And on pc it looks one way and on iOS another.

The text is cut off, etc etc.

In iOS

In Web

The text is cut off:

[Jaguaza]

@piitaya Ok it looks like I'm getting something more graphically pleasing.

Could you put the cards chips more centred, so that it's not so high up?

code:

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: HABITACIONES
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Casa
            secondary: '{{ states(''sensor.temperatura_casa'') }}º'
            icon: mdi:home-assistant
            badge_icon: >-
              {% set stateLights = states('sensor.contador_luces') %}

              {% set stateSockets = states('sensor.contador_enchufes') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                mdi:lightbulb
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power-plug
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: 0
            multiline_secondary: true
            icon_color: >-
              {% set stateLights = states('sensor.contador_luces') %}

              {% set stateSockets = states('sensor.contador_enchufes') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% endif %}
            badge_color: blue
            fill_container: true
            layout: horizontal
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_luces
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_luces_casa
                alignment: center
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_enchufes
                    icon_color: blue
                    icon: hue:socket-eu
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_enchufes_casa
                alignment: center
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Recibidor
            secondary: '{{ states(''sensor.temperatura_cocina'') }}º'
            icon: mdi:exit-run
            badge_icon: >-
              {% set stateLights = states('sensor.contador_luces_recibidor') %}

              {% set stateSockets = states('sensor.contador_enchufes_recibidor')
              %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                mdi:lightbulb
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power-plug
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: recibidor
            multiline_secondary: true
            icon_color: >-
              {% set stateLights = states('sensor.contador_luces_recibidor') %}

              {% set stateSockets = states('sensor.contador_enchufes_recibidor')
              %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% endif %}
            badge_color: blue
            fill_container: true
            layout: horizontal
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_luces_recibidor
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_luces_recibidor
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.techo_recibidor
                alignment: center
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_enchufes_recibidor
                    icon_color: blue
                    icon: hue:socket-eu
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.mirilla
                alignment: center
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Cocina
            secondary: '{{ states(''sensor.temperatura_cocina'') }}º'
            icon: mdi:fridge-outline
            badge_icon: >-
              {% set stateLights = states('sensor.contador_luces_cocina') %}

              {% set stateSockets = states('sensor.contador_enchufes_cocina') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                mdi:lightbulb
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power-plug
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: cocina
            multiline_secondary: true
            icon_color: >-
              {% set stateLights = states('sensor.contador_luces_cocina') %}

              {% set stateSockets = states('sensor.contador_enchufes_cocina') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% endif %}
            badge_color: blue
            fill_container: true
            layout: horizontal
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_luces_cocina
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_luces_cocina
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.techo_cocina
                alignment: center
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_enchufes_cocina
                    icon_color: blue
                    icon: hue:socket-eu
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_enchufes_cocina
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.electrodomesticos_cocina
                alignment: center
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Patio
            secondary: '{{ states(''sensor.temperatura_patio'') }}º'
            icon: mdi:flower-tulip-outline
            badge_icon: >-
              {% set stateLights = states('sensor.contador_luces_patio') %}

              {% set stateSockets = states('sensor.contador_enchufes_patio') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                mdi:lightbulb
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power-plug
              {% endif %}
            tap_action:
              action: navigate
              navigation_path: patio
            multiline_secondary: true
            icon_color: >-
              {% set stateLights = states('sensor.contador_luces_patio') %}

              {% set stateSockets = states('sensor.contador_enchufes_patio') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% endif %}
            badge_color: blue
            fill_container: true
            layout: horizontal
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_luces_patio
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_luces_patio
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.luz_patio
                alignment: center
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_enchufes_patio
                    icon_color: blue
                    icon: hue:socket-eu
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_enchufes_patio
                    hold_action:
                      action: call-service
                      service: switch.turn_on
                      data: {}
                      target:
                        entity_id: switch.enchufe_patio
                alignment: center

Gracias!!!!.

[Jaguaza]

No one would know how to centre the icons on the right more vertically. :-(

[antonio1475]

Looking at your 3rd screenshot in the 1st post, I would think this is what you want:

I've stripped down the code to one card and the minimal info to make it work, so you'd have to rebuild with all your entities and tap_actions:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Casa
        secondary: '{{ states(''sensor.home_temperature'') }}º'
        icon: mdi:home-assistant
        badge_color: blue
        fill_container: true
        layout: horizontal
      - type: vertical-stack
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: switch.usb_habitacion
                icon_color: orange
                icon: mdi:lightbulb
                card_mod:
                  style: |
                    ha-card {box-shadow: none!important;}
            alignment: end
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: >-
                  automation.controller_ikea_e1524_e1810_tradfri_wireless_5_button_remote
                icon_color: blue
                icon: mdi:power-socket
                card_mod:
                  style: |
                    ha-card {box-shadow: none!important;}
            alignment: end

Note that it's a bit of work, using card_mod because vertical-stack-in-card doesn't remove the shadow-box from Mushroom Chips, and you're still getting cards that share 50% space each, so on mobile/narrow screens/columns this might look bad:

I'd look into https://github.com/thomasloven/lovelace-layout-card to have something like 80-20% distribution inside the vertical-stack-in-card

[antonio1475]

Or this dirty trick might work. Distribute the 200% among those 2. I've done 170% & 30% but do some testing for you:

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Lorem ipsum dolor sit amet, consectetur adipisci
        secondary: '{{ states(''sensor.home_temperature'') }}º'
        icon: mdi:home-assistant
        badge_color: blue
        fill_container: true
        layout: horizontal
        card_mod:
          style: |
            ha-card {width:170%!important;}
      - type: vertical-stack
        card_mod:
          style: |
            ha-card {width:30%!important;float: right;}
        cards:
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: switch.usb_habitacion
                icon_color: orange
                icon: mdi:lightbulb
                card_mod:
                  style: |
                    ha-card {box-shadow: none!important}
            alignment: end
          - type: custom:mushroom-chips-card
            chips:
              - type: entity
                entity: >-
                  automation.controller_ikea_e1524_e1810_tradfri_wireless_5_button_remote
                icon_color: blue
                icon: mdi:power-socket
                card_mod:
                  style: |
                    ha-card {box-shadow: none!important;}
            alignment: end

[Jaguaza]

@antonio1475 Thank you, I'll get on with it and see what I can do. Thank you very much. I'll let you know

[Jaguaza]

@antonio1475 nothing is visible even the frame of the chips card and testing the press and hold is very complicated on mobile phones.

type: vertical-stack
cards:
  - type: custom:mushroom-title-card
    title: HABITACIONES
  - type: custom:vertical-stack-in-card
    cards:
      - type: horizontal-stack
        cards:
          - type: custom:mushroom-template-card
            primary: Casa
            secondary: '{{ states(''sensor.temperatura_casa'') }}º'
            icon: mdi:home-assistant
            badge_icon: >-
              {% set stateLights = states('sensor.contador_luces') %}

              {% set stateSockets = states('sensor.contador_enchufes') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                mdi:power
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                mdi:lightbulb
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
              mdi:power-plug {% endif %}
            tap_action:
              action: navigate
              navigation_path: 0
            multiline_secondary: true
            icon_color: >-
              {% set stateLights = states('sensor.contador_luces') %}

              {% set stateSockets = states('sensor.contador_enchufes') %}

              {% if is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float >= 1 and
              is_number(stateSockets) and stateSockets | float < 1 %}
                blue
              {% elif is_number(stateLights) and stateLights | float < 1 and
              is_number(stateSockets) and stateSockets | float >= 1 %}
                blue
              {% endif %}
            badge_color: blue
            fill_container: true
            layout: horizontal
            card_mod: null
            style: |
              ha-card {width:170%!important;}
          - type: vertical-stack
            card_mod:
              style: |
                ha-card {width:30%!important;float: right;}
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_luces
                    icon_color: orange
                    icon: mdi:lightbulb
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_luces_casa
                    card_mod:
                      style: |
                        ha-card {box-shadow: none!important}
                alignment: end
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.contador_enchufes
                    icon_color: blue
                    icon: hue:socket-eu
                    tap_action:
                      action: call-service
                      service: script.turn_on
                      data: {}
                      target:
                        entity_id: script.apagar_enchufes_casa
                    card_mod:
                      style: |
                        ha-card {box-shadow: none!important;}
                alignment: end

However, it is not possible to force the chips to look like this:

This would work for me.

Thanks for your help. Thank you!

[antonio1475]

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Lorem ipsum
    secondary: '{{ states(''sensor.home_temperature'') }}º'
    icon: mdi:home-assistant
    badge_color: blue
    fill_container: true
    layout: horizontal
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: switch.usb_habitacion
            icon_color: orange
            icon: mdi:lightbulb
          - type: template
            icon: mdi:switch
            content: '1'
            style: |
              ha-card {margin-left:10px}
        alignment: end
        style: |
          ha-card {top:40%;right:10%}

[Jaguaza]

@antonio1475 The truth is that I don't know what's wrong but it doesn't respond to me like it does to you.

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Casa
    secondary: '{{ states(''sensor.temperatura_casa'') }}º'
    icon: mdi:home-assistant
    badge_icon: >-
      {% set stateLights = states('sensor.contador_luces') %}

      {% set stateSockets = states('sensor.contador_enchufes') %}

      {% if is_number(stateLights) and stateLights | float >= 1 and
      is_number(stateSockets) and stateSockets | float >= 1 %}
        mdi:power
      {% elif is_number(stateLights) and stateLights | float >= 1 and
      is_number(stateSockets) and stateSockets | float < 1 %}
        mdi:lightbulb
      {% elif is_number(stateLights) and stateLights | float < 1 and
      is_number(stateSockets) and stateSockets | float >= 1 %}
        mdi:power-plug
      {% endif %}
    tap_action:
      action: navigate
      navigation_path: 0
    multiline_secondary: true
    icon_color: >-
      {% set stateLights = states('sensor.contador_luces') %}

      {% set stateSockets = states('sensor.contador_enchufes') %}

      {% if is_number(stateLights) and stateLights | float >= 1 and
      is_number(stateSockets) and stateSockets | float >= 1 %}
        blue
      {% elif is_number(stateLights) and stateLights | float >= 1 and
      is_number(stateSockets) and stateSockets | float < 1 %}
        blue
      {% elif is_number(stateLights) and stateLights | float < 1 and
      is_number(stateSockets) and stateSockets | float >= 1 %}
        blue
      {% endif %}
    badge_color: blue
    fill_container: true
    layout: horizontal
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces
            icon_color: orange
            icon: mdi:lightbulb
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_luces_casa
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_enchufes
            icon_color: blue
            icon: hue:socket-eu
            tap_action:
              action: call-service
              service: script.turn_on
              data: {}
              target:
                entity_id: script.apagar_enchufes_casa
            content: '1'
            style: |
              ha-card {margin-left:10px}
        alignment: end
        style: |
          ha-card {top:40%;right:10%}

[antonio1475]

You're trying to use your original code and put in my changes. Check again :)

For example, on my last comment I'm using one chip card with the 2 entities inside, to maker one row. You're still using two chip cards, therefore two rows

[Jaguaza]

Estás tratando de usar tu código original y poner mis cambios. Revisar otra vez :)

Por ejemplo, en mi último comentario estoy usando una tarjeta con chip con las 2 entidades adentro, para hacer una fila. Todavía estás usando dos tarjetas con chip, por lo tanto, dos filas

A OK....

[Jaguaza]

@antonio1475 Nothing :-(

type: custom:vertical-stack-in-card
horizontal: true
cards:
  - type: custom:mushroom-template-card
    primary: Casa
    secondary: '{{ states(''sensor.temperatura_casa'') }}º'
    icon: mdi:home-assistant
    badge_color: blue
    fill_container: true
    layout: horizontal
  - type: vertical-stack
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: sensor.contador_luces
            icon_color: orange
            icon: mdi:lightbulb
          - type: entity
            entity: sensor.contador_enchufes
            icon_color: blue
            icon: hue:socket-eu
            style: |
              ha-card {margin-left:10px}
        alignment: end
        style: |
          ha-card {top:40%;right:10%}

[antonio1475]

I don't know what to tell you. It works here and the margin-left:10px is definitely working for you, so I assume you have card_mod installed, right?

Other than changing the last line to ha-card {margin-top:15px;margin-right:20px}, you'll have to spend some time with Chrome Inspect Element and try/learn some CSS... 🤷‍♂️ Sorry

[Jaguaza]

no se que decirte Funciona aquí y margin-left:10px definitivamente funciona para usted, así que asumo que tiene card_mod instalado, ¿verdad?

Aparte de cambiar la última línea a ha-card {margin-top:15px;margin-right:20px}, tendrás que pasar algún tiempo con Chrome Inspect Element y probar/aprender algo de CSS...🤷‍♂️Lo siento

Ok, card-mod wasn't installed, now it is and I'm going to try it.

[Jaguaza]

Well, not so bad, right?

Thank you Antonio for your help and for helping me until the last moment. Thanks to you I have it.

Thank you very much.