Hello @Alia5 Thanks for your card, I think it’s a great idea. I would like to open an issue. But you seem to be against it. So I’ll try to inform you here.
As soon as you insert a title card, the display starts to flash. See GIF.
The last entry in the tile always disappears when updating. So I can’t set it at all, unless I’m very fast or insert an existing one.
Tested with windows 10 (Chrome and Firefox) each in the current version and with the latest HA.
@spencermamer Thank you for the fork! Not sure if you’ve seen this thread. Any chance you could share what’s changed with your fork? Thanks again!
Hi!
I really love the expander card :)! I was wondering, is there a way to customize the card itself? For some parts of my view the card itself is too large (in a horizontal way), and I haven’t found out how to make the card smaller.
I would like to have the ‘Laadpaal’ card, which is an expander card, in the same style as I did for the ‘Klimaat’ card. I have two questions:
Thanks!
type: custom:expander-card
title-card:
type: custom:button-card
entity: sensor.public_charger_1
icon: none
show_name: false
show_state: false
tap_action:
action: toggle
styles:
card:
- background: none
- box-shadow: none
- border: none
- height: 20px
- width: 370px
- position: relative
extra_styles: |
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) {
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
}
custom_fields:
name_label: >
<div style="position: absolute; left: 10px; top: 5px; font-size: 18px;
font-weight: normal; font-family: Arial; color:
var(--button-card-text-color);">
Laadpaal
</div>
state_label: |
[[[
const stateValue = entity.state.split(' / ')[0];
let textColor;
if (stateValue === '0') {
textColor = 'rgb(223,37,32)';
} else {
textColor = 'rgb(98,200,85)';
}
return `<div style="position: absolute; left: 295px; top: 5px; font-size: 16px; font-weight: bold; font-family: Arial; color: ${textColor};">
${entity.state}
</div>`;
]]]
cards:
- type: custom:button-card
entity: sensor.public_chargers_2
icon: none
show_name: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- border: none
- height: 65px
- width: 370px
- position: relative
extra_styles: |
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) {
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
}
custom_fields:
name_label: >
<div style="position: absolute; left: 3px; top: 20px; font-size: 18px;
font-weight: normal; font-family: Arial; color:
var(--button-card-text-color);">
Laadpaal
</div>
state_label: |
[[[
const stateValue = entity.state.split(' / ')[0];
let textColor;
if (stateValue === '0') {
textColor = 'rgb(223,37,32)';
} else {
textColor = 'rgb(98,200,85)';
}
return `<div style="position: absolute; left: 288px; top: 20px; font-size: 16px; font-weight: bold; font-family: Arial; color: ${textColor};">
${entity.state}
</div>`;
]]]
- type: custom:button-card
entity: sensor.public_chargers_3
icon: none
show_name: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- border: none
- height: 65px
- width: 370px
- position: relative
extra_styles: |
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) {
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
}
custom_fields:
name_label: >
<div style="position: absolute; left: 3px; top: 20px; font-size: 18px;
font-weight: normal; font-family: Arial; color:
var(--button-card-text-color);">
Laadpaal
</div>
state_label: |
[[[
const stateValue = entity.state.split(' / ')[0];
let textColor;
if (stateValue === '0') {
textColor = 'rgb(223,37,32)';
} else {
textColor = 'rgb(98,200,85)';
}
return `<div style="position: absolute; left: 288px; top: 20px; font-size: 16px; font-weight: bold; font-family: Arial; color: ${textColor};">
${entity.state}
</div>`;
]]]
- type: custom:button-card
entity: sensor.public_chargers_4
icon: none
show_name: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- border: none
- height: 65px
- width: 370px
- position: relative
extra_styles: |
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) {
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
}
custom_fields:
name_label: >
<div style="position: absolute; left: 3px; top: 20px; font-size: 18px;
font-weight: normal; font-family: Arial; color:
var(--button-card-text-color);">
Laadpaal
</div>
state_label: |
[[[
const stateValue = entity.state.split(' / ')[0];
let textColor;
if (stateValue === '0') {
textColor = 'rgb(223,37,32)';
} else {
textColor = 'rgb(98,200,85)';
}
return `<div style="position: absolute; left: 288px; top: 20px; font-size: 16px; font-weight: bold; font-family: Arial; color: ${textColor};">
${entity.state}
</div>`;
]]]
- type: custom:button-card
entity: sensor.public_chargers_5
icon: none
show_name: false
show_state: false
styles:
card:
- background: none
- box-shadow: none
- border: none
- height: 65px
- width: 370px
- position: relative
extra_styles: |
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
@media (prefers-color-scheme: dark) {
:root {
--custom-light-background: rgba(0, 0, 0, 0);
--custom-dark-background: rgba(0, 0, 0, 0);
}
}
custom_fields:
name_label: >
<div style="position: absolute; left: 3px; top: 20px; font-size: 18px;
font-weight: normal; font-family: Arial; color:
var(--button-card-text-color);">
Laadpaal
</div>
state_label: |
[[[
const stateValue = entity.state.split(' / ')[0];
let textColor;
if (stateValue === '0') {
textColor = 'rgb(223,37,32)';
} else {
textColor = 'rgb(98,200,85)';
}
return `<div style="position: absolute; left: 288px; top: 20px; font-size: 16px; font-weight: bold; font-family: Arial; color: ${textColor};">
${entity.state}
</div>`;
]]]
One of the most useful cards. I love it!!!
Thanks!!
Really great work! I love it!
But unfortunatly I have a minor issue. I use a vertical stack for some cover controls. In this stack I use the Expander Card to control a cover group and also control the individual covers. Unfortunatly the width of the regular (not expandeble cover cards) is not the same as the Expander Card. I tried this for the Mushroom-Cover-Card as well as the native Tile-Card. Is there a way to fix this?
It’s the same thing for me.
Did you solve it?
Bit of a different take on collapsible cards. Made for timer and different fan modes card
This worked perfect, thank you. I couldn’t for the life of me get the Chevron arrow color changed with card-mod, but editing JS file was a breeze
Would you have to know, what I was edit to REMOVE the color when I put the mouse over the chevron icon. I don’t like how a box pops up, even though its almost transparent. I’d like there to be no visible shape at all at all times.
Thank you for the help 
Same here…
