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

[Casem0d]

Hello Ildar_Gabdullin, I am absolute newbie with home assistant I don’t even know how to write a comment here in general. 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

[Ildar_Gabdullin]

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?

[mase]

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

[Casem0d]

Thank you mase, it works :)!

[RonM (Ron Meijsen)]

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

Thanks
Ron

[sparkydave (🇦🇺 Dave)]

How to help us help you - or How to ask a good question

Before we begin… This forum is not a helpdesk The people here don’t work for Home Assistant, that’s an open source project. We are volunteering our free time to help others. Not all topics may get an answer, never mind one that helps you solve your problem. [image] This also isn’t a general home automation forum, this is a forum for Home Assistant and things related to it. Any question about Home Assistant, and about using things with Home Assistant, is welcome here. We can’t help you with e…

[RonM (Ron Meijsen)]

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

[sparkydave (🇦🇺 Dave)]

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

[casper.mostert]

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.

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

[Ildar_Gabdullin]

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

[casper.mostert]

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.

[Flicker20]

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:

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?

[Vintage89]

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?

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;
      }

[Mar1us]

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?

[NathanCu (Nathan Curtis)]

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

[aidanmc1998]

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

[aidanmc1998]

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.

[Nick4 (Nick)]

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:

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

[Ildar_Gabdullin]

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.

[Nick4 (Nick)]

Hi, thank you for you for that tip: it’s a good one!
This is what I get: