Yeah, I figured. Iāve solved it by splitting the original glance card in 2, and by adding 2 separate markdown cards below them with 0 padding-top.
![chrome_GofYRDQZvb](https://community-assets.home-assistant.io/original/4X/b/8/d/b8d7da517b3146893741ff682ec9fc988fd752d0.png)
Thank you anyways!
Hereās the updated YAML for this card:
type: custom:mod-card
card_mod:
style: |
ha-card {
background: var( --ha-card-background, var(--card-background-color, white) );
-webkit-backdrop-filter: blur(20px) saturate(150%);
backdrop-filter: blur(20px) saturate(150%);
}
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: vertical-stack
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
cards:
- type: glance
show_name: false
show_state: true
card_mod:
style: |
div.entity {
margin-bottom: 0px;
}
div.entities {
padding: 8px 8px 8px 8px;
}
div.entities.no-header {
padding-top: 8px;
padding-bottom: 0;
}
ha-card {
background: none;
box-shadow: none;
}
entities:
- entity: person.carlo
image: /local/carlo.png
style: |
state-badge {
width: 75px;
height: 75px;
margin: 4px;
background-color:
{% if states('person.carlo') == "not_home" %}
rgba(205, 92, 92, 0.4)
{% elif states('person.carlo') == "home" %}
rgba(47, 189, 79, 0.4)
{% elif states('person.carlo') == "redacted_position" %}
rgba(255, 228, 181, 0.4)
{% elif states('person.carlo') == "redacted_position" %}
rgba(240, 128, 128, 0.4)
{% elif states('person.carlo') == "redacted_position" %}
rgba(0, 255, 255, 0.4)
{% elif states('person.carlo') == "redacted_position" %}
rgba(218, 165, 32, 0.4)
{% else %}
rgba(105, 105, 105, 0.4)
{% endif %};
}
- type: custom:hui-markdown-card
style: |
ha-markdown {
padding: 0 0 16px 0 !important;
}
ha-card {
background: none;
box-shadow: none;
}
content: >-
<center><font color={% if
states('sensor.iphone_di_carlo_battery_state') == 'Charging' %}
"chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
"'mdi:cellphone-charging'" }}></ha-icon> {{
states('sensor.iphone_di_carlo_battery_level') }}%</center>
- type: custom:mod-card
card:
type: vertical-stack
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
}
cards:
- type: glance
show_name: false
show_state: true
card_mod:
style: |
div.entity {
margin-bottom: 0px;
}
div.entities {
padding: 8px 8px 8px 8px;
}
div.entities.no-header {
padding-top: 8px;
padding-bottom: 0;
}
ha-card {
background: none;
box-shadow: none;
}
entities:
- entity: person.martina
image: /local/marty.png
style: |
state-badge {
width: 75px;
height: 75px;
margin: 4px;
background-color:
{% if states('person.martina') == "not_home" %}
rgba(205, 92, 92, 0.4)
{% elif states('person.martina') == "home" %}
rgba(47, 189, 79, 0.4)
{% elif states('person.martina') == "redacted_position" %}
rgba(255, 228, 181, 0.4)
{% elif states('person.martina') == "redacted_position" %}
rgba(240, 128, 128, 0.4)
{% elif states('person.martina') == "redacted_position" %}
rgba(0, 255, 255, 0.4)
{% elif states('person.martina') == "redacted_position" %}
rgba(218, 165, 32, 0.4)
{% else %}
rgba(105, 105, 105, 0.4)
{% endif %};
}
- type: custom:hui-markdown-card
style: |
ha-markdown {
padding: 0 0 16px 0 !important;
}
ha-card {
background: none;
box-shadow: none;
}
content: >-
<center><font color={% if
states('sensor.iphone_di_martina_battery_state') == 'Charging' %}
"chartreuse" {% else %} "white" {% endif %}><ha-icon icon={{
"'mdi:cellphone-charging'" }}></ha-icon> {{
states('sensor.iphone_di_martina_battery_level') }}%</center>