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…
Hey @Alia5 there seems to be an issue in the current build where adding a title-card to an expander causes the editor to reload every couple of seconds making it impossible to edit further.
Do you have any suggestions on what could be causing this?
Anyone find a solution for this? just makes having a title card impossible.
Did you read the last couple of answers here ?
You could change the repo see link
@MelleD Do I get that right, you forked the card and did some work on it to solve the issues?
That would be great!
BUT…if so, please open a new topic and write up some short notes. As post #73 it won’t get the attention it should have, and others won’t easily find it.
I’d put a link to the new topic in here, and I’d link it in the feature request:
Yes and a lot more see release notes
Why a new topic? It’s like in the other topics (e.g. Solacast). It’s removed or not maintained and then someone write the forked repo or etc.
I could also create a new topic. I don’t have an opinion on it, but reading the comments sometimes helps 
;). So looks somehow duplicated
Great you picked that project up! 
I can see your point, but I personally are a fan of clean topics. This forum tends to be quite crowded, and with the number of posts and topics, it’s hard to find, what you’re looking for. So my thoughts are, if one (you) has put thoughts, nerves and time in developing something, it should have its own place.
And it is much easier to support, if everything has its own topic - in here, the first question in helping would be “which expander-card” are you using? The one from xx or xx or xx?"
But that’s just me, I like things ordered, my inner “Monk” is doing its job… 
Do as you want to! 
If you open a new topic, please tag me, if possible, so I won’t miss it!
@MelleD how can I remove the shadow from the card?
I have tried so many different card mod trick and I can’t seem to get it to go away
yes, why not let’s see how much confusion there is
