Custom:stack-in-card vs. vertical-stack-in-card

Configuration Frontend
1

Hi all,

I need a horizontal stack without borders. If I use the vertical-stack-in-card, it looks good, but the custom-stack-in-card has borders. What is wrong? How can I remove the border, the line between the two cards in the second example? I also need this in a horizontal alignment.

vertical-stack-in-card:

type: custom:vertical-stack-in-card
title: My Card
cards:
  - type: custom:mushroom-template-card
    primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
    icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
    entity: binary_sensor.cupra_born_car_is_online
    multiline_secondary: false
    layout: vertical
    icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
    fill_container: false

image

custom-stack-in-card:
image

type: custom:stack-in-card
mode: vertical
keep:
  border: false
cards:
  - type: custom:mushroom-template-card
    primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
    icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
    entity: binary_sensor.cupra_born_car_is_online
    multiline_secondary: false
    layout: vertical
    icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
    fill_container: false
  - type: custom:mushroom-template-card
    primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
    icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
    entity: binary_sensor.cupra_born_car_is_online
    multiline_secondary: false
    layout: vertical
    icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
    fill_container: false
2

Use card-mod to remove the boarders.

card_mod:
  style: |
    ha-card {
      border: none !important;
        }    

type: custom:stack-in-card
mode: vertical
keep:
  border: false
cards:
  - type: custom:mushroom-template-card
    primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
    icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
    entity: binary_sensor.cupra_born_car_is_online
    multiline_secondary: false
    layout: vertical
    icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
    fill_container: false
    card_mod:
          style: |
            ha-card {
              border: none !important;
                }
  - type: custom:mushroom-template-card
    primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
    icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
    entity: binary_sensor.cupra_born_car_is_online
    multiline_secondary: false
    layout: vertical
    icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
    fill_container: false
    card_mod:
          style: |
            ha-card {
              border: none !important;
                }
card_mod:
          style: |
            ha-card {
              border: none !important;
                }
3

This is the setup I mention in the other thread with Stack-in-Card and Layout Card. Vertical-stack in Card will work with it as well.

play around with `grid-template-columns:

1 column grid-template-columns: 1fr or grid-template-columns: 100%
2 columns grid-template-columns: 1fr 1fr or grid-template-columns: 50% 50% you can adjust these columns percentages to shrink or enlarge the space.

grid-template-columns: 20% 80% or 80% 20% or any other % combo.

image
image740×192 3.14 KB

grid-template-columns: 1fr 1fr 1fr

image
image896×218 3.79 KB

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        fill_container: false
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }
card_mod:
  style: |
    ha-card {
      border: none !important;
        }
4

Good afternoon,

thank you very much! This helps a lot. I checked out the code, and found out a way to combine the diferent modifications. I am playing around with new options and it seems to be that everything is possible…

But one question: I used the vaiable “entity” instead of the entity name, but in the card-mod section this is not working and I have to use the full entity name (binary_sensor.cupra_born_car_is_online). Is this a mistake on my side, or is it as it is?
Here is my code:

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        fill_container: false
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        card_mod:
          style: |
            ha-card {
              border: none !important;
                }
      - type: custom:mushroom-template-card
        primary: '{{ ''online'' if states(entity) == ''on'' else ''offline'' }}'
        icon: '{{"mdi:wifi" if states(entity)=="on" else "mdi:wifi-off"}}'
        entity: binary_sensor.cupra_born_car_is_online
        multiline_secondary: false
        layout: vertical
        icon_color: '{{ ''green'' if states(entity) == ''on'' else ''red'' }}'
        card_mod:
          style:
            mushroom-shape-icon$: |
              .shape {
                --shape-animation: ping 2s infinite;
                --icon-symbol-size: 20px;
                --icon-size: 40px;
              }
              @keyframes ping {
                0% {
                  box-shadow: 0 0 5px 1px rgba(var(--rgb-green), 0.7);
                }
                
                100% {
                  box-shadow: 0 0 5px 15px transparent;
                }
              }
            .: |
              ha-card {
              border: none !important;
               {% if
                is_state('binary_sensor.cupra_born_car_is_online','on') %} 
                 --card-primary-color:
               {%else%}
                --card-primary-color:#7E7E7E;
               {% endif %}
               
              }
card_mod:
  style: |
    ha-card {
      border: none !important;
        }

…and what I also don’t really understand: Sometimes I can use the visual editor, sometimes it’s not available. I haven’t found out yet when this happens.