Stack-In-Card: Drop-in replacement for vertical-stack-in-card

I had the same problem… Adding this to the affected theme solved the issue, thanks!

Hello Ildar_Gabdullin, I am absolute newbie with home assistant I don’t even know how to write a comment here in general. :smiley: Sorry I’m comenting you now directly but maybe you can help me out. i’m struggling with stack in card right now. I would actually like to display the visualization like in the lower picture. Do you maybe have a solution?

views:
  - theme: Mushroom
    title: Jalousie
    icon: mdi:window-shutter
    badges: []
    cards:
      - type: custom:shutter-card
        entities:
          - entity: cover.shellyswitch_kueche_links
            name: Küche links
            buttons_position: right
            title_position: top
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.helligkeitsautomatik_kuche_links
            icon_height: 30px
            theme: Mushroom
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.weihnachtsautomatik_kuche_links
            icon_height: 30px
            theme: Mushroom
      - type: custom:shutter-card
        entities:
          - entity: cover.shellyswitch_kueche_rechts
            name: Küche rechts
            buttons_position: right
            title_position: top
      - type: horizontal-stack
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.schliesse_jalousie_bei_sonnenuntergang
            icon_height: 30px
            theme: Mushroom
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: input_boolean.weihnachtsautomatik
            icon_height: 30px
            theme: Mushroom

The picture you posted contains 2 parts:

1.on the top:
shutter-card
conventional horizontal-stack (button, button)
…automatically moved to the next column:
shutter-card
conventional horizontal-stack (button, button)

2.stack-in-card (vertical mode):
— shutter-card
— stack-in-card (horizontal mode) (button, button)
— shutter-card
— stack-in-card (horizontal mode) (button, button)

Do you need to create the 2nd part?
Then will you be able to combine cards into a stack by yourself using my description?

maybe i didn´t get your point, but just put the cards in a vertical stack i guess.

this should work:
feel free to send me a DM if you got any questions (in german if you like)

views:
  - theme: Mushroom
    title: Jalousie
    icon: mdi:window-shutter
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: custom:shutter-card
            entities:
              - entity: cover.shellyswitch_kueche_links
                name: Küche links
                buttons_position: right
                title_position: top
          - type: horizontal-stack
            cards:
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: input_boolean.helligkeitsautomatik_kuche_links
                icon_height: 30px
                theme: Mushroom
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: input_boolean.weihnachtsautomatik_kuche_links
                icon_height: 30px
                theme: Mushroom
          - type: custom:shutter-card
            entities:
              - entity: cover.shellyswitch_kueche_rechts
                name: Küche rechts
                buttons_position: right
                title_position: top
          - type: horizontal-stack
            cards:
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: input_boolean.schliesse_jalousie_bei_sonnenuntergang
                icon_height: 30px
                theme: Mushroom
              - show_name: false
                show_icon: true
                type: button
                tap_action:
                  action: toggle
                entity: input_boolean.weihnachtsautomatik
                icon_height: 30px
                theme: Mushroom
1 Like

Thank you mase, it works :)!

1 Like

Hi I want to use a custom:button-card within the stack-in-card

But it only shows the title, when I use a regular button card it shows the button

Also the code also works whan I use vertical-stack instead of stack-in-card

This is my code

type: custom:stack-in-card
mode: vertical
title: Test
cards:

  • type: custom:button-card
    entity: input_boolean.input_boolean_fan
    name: ’ ’
    styles:
    card:
    - height: 60px
    state:
    • value: ‘on’
      color: lightgreen
      styles:
      icon:
      - animation: |
      [[[

           if (states['sensor.afzuiging_temperatuur'].state == '10') return "rotating 3s linear infinite"; 
           if (states['sensor.afzuiging_temperatuur'].state == '50') return "rotating 1s linear infinite"; 
           if (states['sensor.afzuiging_temperatuur'].state == '100') return "rotating 0.5s linear infinite"; 
      
          ]]]
      
    tap_action:
    action: none
    double_tap_action:
    action: more-info
    entity: sensor.afzuiging_temperatuur
  • type: horizontal-stack
    cards:
    • type: custom:button-card
      color_type: black-card
      color: lightgreen
      icon: mdi:fan-speed-1
      styles:
      card:
      - height: 40px
      tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
      entity_id: climate.afzuiging
      temperature: 10
    • type: custom:button-card
      color_type: black-card
      color: lightgreen
      icon: mdi:fan-speed-2
      styles:
      card:
      - height: 40px
      tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
      entity_id: climate.afzuiging
      temperature: 50
    • type: custom:button-card
      color_type: black-card
      color: lightgreen
      icon: mdi:fan-speed-3
      styles:
      card:
      - height: 40px
      tap_action:
      action: call-service
      service: climate.set_temperature
      service_data:
      entity_id: climate.afzuiging
      temperature: 100

what am I doing wrong

This is how it looks with vertical-stack
image

Thanks
Ron

hi Dave,
Is your message about my question? I am not asking for a helpdesk service. My question was that custom:button-card not seems to work with stack-in-card, i just tried to be complete by giving the code.

if it should work just tell me and I will try to find out why it does not work further.

Ron

The issue is that you didn’t format your code properly. Follow the link I posted to find out how to do it.

1 Like

Hi,

My first time posting on the forum, so please excuse me if I do something wrong.
I looked at every single post I could find and tried all sorts of combinations before posting on the forum.

I’ve stacked 5 custom buttons in a horizontal row by using the stack-in-card and the custom button card. Everything is working as expected and showing correctly.

The next step is to try and reduce the Title font size to 18px by using card-mod.
I’ve used card-mod on entity cards without any issues and I was able to reduce the font-size on these cards by using the card-header property.

As soon as I introcuce card-mod to my custom stack in card the custom buttons dissappear.
Image of the working code.
image

type: custom:stack-in-card
title: Underfloor Heating
mode: horizontal
keep:
  margin: true
  border_radius: true
cards:
  - type: custom:button-card
    color_type: card
    entity: switch.uh_ensuite
    name: Ensuite
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_hoofslaapkamer
    name: Main Bedroom
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_spaarkamer
    name: Spare Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_tv_kamer
    name: TV Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset
  - type: custom:button-card
    color_type: card
    entity: switch.uh_zac_kamer
    name: Zac Room
    show_icon: false
    state:
      - value: 'on'
        color: orange
      - operator: default
    styles:
      card:
        - height: 80px
        - font-size: 14px
        - color: 212121
      name:
        - white-space: unset

Picture of custom mod-card with properties not working. Now this is probably due to my lack of knowledge, but according to me this should work. I’ve tried so many different options and can’t get this to work. If someone can please point me in the right direction.
(Tried to paste a screenshot but not allowed as a newbie.)

type: custom:mod-card
style:
  stack-in-card$: |
    .card-header {
      font-size: 18px;
    }  
card:
  type: custom:stack-in-card
  title: Underfloor Heating
  mode: horizontal
  keep:
    margin: true
    border_radius: true
  cards:
    - type: custom:button-card
      color_type: card
      entity: switch.uh_ensuite
      name: Ensuite
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_hoofslaapkamer
      name: Main Bedroom
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_spaarkamer
      name: Spare Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_tv_kamer
      name: TV Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset
    - type: custom:button-card
      color_type: card
      entity: switch.uh_zac_kamer
      name: Zac Room
      show_icon: false
      state:
        - value: 'on'
          color: orange
        - operator: default
      styles:
        card:
          - height: 80px
          - font-size: 14px
          - color: 212121
        name:
          - white-space: unset

card-mod thread → 1st post → link at the bottom → styles for stack-in-card

Thanks for the quick reply,

I worked through that thread and found the code I’m currently using. It is not working with stack-in-card.
If I change the stack in card to something else the card-mod code does work, so I don’t think it is a card-mod issue.

I’m having some issues getting my stack-in-card to not be a 50/50 split.
I have a mushroom template card and a mushroom chips card horizontally stacked - how can I do it so the card itself is more like an 80/20 split?

I want it to look like this:
image

But it looks like this when the screen size is smaller:

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:mushroom-template-card
    primary: Office
    secondary: |-
      {% if is_state('light.office_2', 'on') %}
       On
      {% elif is_state('light.office_2', 'off') %}
       Off
      {% endif %}
    icon: mdi:desktop-tower-monitor
    entity: light.office
    tap_action:
      action: navigate
      navigation_path: office
    hold_action:
      action: toggle
    icon_color: |-
      {% if is_state('light.office_2', 'on') %}
       orange
      {% endif %}
  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: binary_sensor.office_cupboard_door_sensor_contact
        secondary: >-

          {% if is_state('binary_sensor.office_cupboard_door_sensor_contact',
          'off') %} Door Closed

          {% elif is_state('binary_sensor.office_cupboard_door_sensor_contact',
          'on') %} Door Open

          {% endif %}
        icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''grey'' }}'
        icon: '{{ ''mdi:door-open'' if is_state(entity, ''on'') else ''mdi:door-closed'' }}'
        tap_action:
          action: none
        hold_action:
          action: none
        style: |
          ha-card {
            --chip-border-width: 0px;
    alignment: end
card_mod:
  style: |
    ha-card { 
      background-color: {{ '#fedb68' if is_state('light.office_2', 'on')}};

      --primary-text-color: {{ '#000000' if is_state('light.office_2', 'on')}};
      border-width: 0px;
      margin: 0px;
      }

Any ideas please?

I’m trying to remove the border radius on the top of the “Lys” card. Outside of Stack in card it works, but not inside?

Skjermbilde 2023-10-13 kl. 13.56.59

Skjermbilde 2023-10-13 kl. 13.59.24

type: custom:stack-in-card
background: false
cards:
  - type: custom:button-card
    name: Lys
    style: |
      ha-card { 
        background: var(--background-color-2) !important;
        border-top-left-radius: 0px !important;
        border-top-right-radius: 0px !important;
      }

I´m trying to get a sensor Date in the Title of the card but it doesn´t work

Example:
{{ states('sensor.wohnzimmer_raumthermostat_temperature') | round(1)}}

Any idea?

Considering stack in card is a direct drop in replacement for vertical stack and vertical stack does not support templates, I don’t think stack in card will either…

You’ll need to wrap it in another card to add template support like custom:card-tenplater

1 Like

Does anyone know how to remove the 4px margin from around the stack in card? currently I am using a combination of stack in card & layout card to nest mushroom cards & custom buttons which is working perfectly, however when I then bring them into my normal cards the margin is causing them to not align. I have tried using card mod on the stack in card which doesn’t work (not unexpected). Any advice is appreciated.

Screenshot:

Stack-in card code:

cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 4fr 1fr
    cards:
      - type: custom:mushroom-light-card
        entity: light.aidans_lamp
        fill_container: true
        show_brightness_control: true
        show_color_control: false
        show_color_temp_control: false
        use_light_color: true
        collapsible_controls: false
        card_mod:
          style: |
            ha-card {
            background-color: {{ 'var(--ha-card-secondary-background)' if
            is_state('light.aidans_lamp', 'on') }};
            }
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,237,222,0.2)
                  icon:
                    - color: rgba(255,237,222,1)
                  card:
                    - margin-top: 15px
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    color_temp_kelvin: 5500
                hold_action:
                  action: none
                double_tap_action:
                  action: none
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,177,109,0.2)
                  icon:
                    - color: rgba(255,177,109,1)
                  card:
                    - margin-top: 15px
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    color_temp_kelvin: 3000
          - type: horizontal-stack
            cards:
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(0,224,255,0.2)
                  icon:
                    - color: rgba(0,224,255,1)
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    rgb_color:
                      - 0
                      - 224
                      - 255
              - type: custom:button-card
                template:
                  - light_chip
                entity: light.aidans_lamp
                icon: mdi:lightbulb
                styles:
                  img_cell:
                    - background-color: rgba(255,12,218,0.2)
                  icon:
                    - color: rgba(255,12,218,1)
                tap_action:
                  action: call-service
                  service: light.turn_on
                  target:
                    entity_id: light.aidans_lamp
                  data:
                    rgb_color:
                      - 255
                      - 12
                      - 218

I guess I have solved this for the time being, instead of having the other cards be separate to the layout card, I have just included them in the same layout card which has fixed the alignment issue.

Hi everyone, wishing you and everyone close to you a happy, healthy 2024!

I would like to have the temps/humidity from the rooms in 1 card so I’m trying to achieve this with this card.
This is what I have so far for a few rooms:
image

The problem is the border (horizontal line) between the name of the room and the data.
I would like to have this gone but tried all sorts of things that I’ve found but cannot get it removed.

type: custom:stack-in-card
mode: vertical
cards:
  - type: markdown
    content: <font color=#5794f2 size="5">Bathroom</font>
  - type: custom:button-card
    tap_action:
      action: none
    aspect_ratio: 2/1
    styles:
      card:
        - padding: 2%
        - font-size: 20px
        - text-shadow: 0px 0px 5px black
      grid:
        - grid-template-areas: '"temp temp" "hum hum"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr
      img_cell:
        - justify-content: start
        - align-items: start
        - margin: none
    custom_fields:
      temp: |
        [[[
          return `<ha-icon
            icon="mdi:thermometer"
            style="width: 20px; height: 28px; color: deepskyblue;">
            </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_temperature'].state}°c</span>`
        ]]]
      hum: |
        [[[
          return `<ha-icon
            icon="mdi:water-percent"
            style="width: 20px; height: 28px; color: deepskyblue;">
            </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bathroom_multi_humidity'].state}%</span>`
        ]]]

Thanks a lot for helping me out!

ps: I’m also open for suggestions that might be better than what I’ve come up with

1 Like

Suggest to start testing with a simpler case:

type: custom:stack-in-card
mode: vertical
cards:
  - type: markdown
    content: xxx
  - type: custom:button-card
    entity: sun.sun

and then increase your button step-by-step.
Actually, this is a common rule.