Thank you so very very very much… 
It worked perfectly…
1 Like
Happy to help, I learned a bunch while assisting! 
1 Like
GOD bless you… 
You can do something like this and add if statements for the percentage stages.
type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.bed_curtains_battery'')}} %'
entity: sensor.basement_sensor_humidity
icon: mdi:thermometer
icon_color: blue
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
width: 300px;
height: 80px;
border: double 4px transparent;
border-radius: 80px;
background-image: linear-gradient(hsl(204, 50%, 25%), hsl(204, 50%, 25%)), radial-gradient(circle at top right, hsl(135, 100%, 50%),hsl(135, 20%, 0%));
background-origin: border-box;
background-clip: padding-box, border-box;
}
For 3/4 background-image: linear-gradient(hsl(204, 50%, 25%), hsl(204, 50%, 25%)), radial-gradient(circle at top right, hsl(135, 100%, 50%),hsl(135, 100%, 50%),hsl(135, 20%, 0%));
1 Like
Try it:
Code
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P1
entity: person.p1
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.p1
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P2
entity: person.p2
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.p2
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P3
entity: person.p3
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style: |
ha-card {
/* Filing container */
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
Советую использовать обновленную версию Stack In Card (есть в HACS), там вертикальная и горизонтальная раскладка в одном 
Thanks, but to no avail. 
I recreated it with Stack In Card
Code
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background: none;
}
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: P1
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.p
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: P2
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.p
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
/* Filing container */
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: start;
}
cards:
- type: custom:mushroom-person-card
name: P3
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
1 Like
Look really clean , I’d liked. Is it possible to add a Phone Battery % and State next in a second row? Like this:
I tried, but no luck (not enough experience with coding
)Also, I use a geocoding location instead of second Home, not Home Info
TY
1 Like
Okay thanks, I will try with this stack… And one more question, it’s possible to hide state on entity card? Leave icon only.
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P3
entity: person.p3
icon_type: entity-picture
primary_info: name
secondary_info: state
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.laptop
use_entity_picture: false
icon: mdi:laptop
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.laptop','on') %}
--card-mod-icon-color: yellow;
{% elif is_state('binary_sensor.laptop','off') %}
--card-mod-icon-color: black;
{% endif %}
border: none
}
alignment: center
Add content_info: none
- type: entity
entity: binary_sensor.laptop
content_info: none
1 Like
Oh, I tried, but… I see my mistake already, I wasn’t careful when adding and that’s why I asked the question. Thanks homie
1 Like
Every element, which starts with " - ", is a block. You can create blocks with visual editor and add this blocks to other with code. This way you can see what code the editor creates and get used to it faster.
Code
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background: none;
}
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: P1
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.p
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.2201117pg_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: P2
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.p
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: P3
entity: person.p
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.06cd9514_9bbf209d_browser_dark_mode
use_entity_picture: false
icon: mdi:laptop
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.laptop','on') %}
--card-mod-icon-color: yellow;
{% elif is_state('binary_sensor.laptop','off') %}
--card-mod-icon-color: black;
{% endif %}
border: none
}
alignment: center
1 Like
Thank you for your help. This is what I was not add when I did my code ( simple but …)
Here is my card, which I did with your assistant:
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background: none;
}
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
1 Like
I also add some animation for state-Home-Not Home
type: custom:stack-in-card
mode: horizontal
card_mod:
style: |
ha-card {
background: none;
}
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-person-card
name: Yevgeniy
entity: person.yevgeniy
icon_type: entity-picture
primary_info: state
secondary_info: false
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_geocoded_location
icon: mdi:google-maps
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_level
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.sm_s918u_battery_state
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
1 Like
Thanks. Just yesterday I was thinking about something similar, I used your code.
2 Likes
Hello, since the last update I have the problem that icons are no longer displayed.
Do you know anything about this?
Can you post your code?
After last update! It´s OK
Thanks dear
3.4.1 fixed a few issues!!
Same problem here but 3.4.1 does not fix it for me.