I do read the docs on cards, of course. Does not mean I understand everything (especially when it then comes to templating/CSS/Javascript), but I try to read before I ask.
But the HA information on Panel View (which is not a card) is pretty much empty. So not sure what information I should have found there.
It even lists picture-elements as a card that works well. So IMHO it should be a view that works properly.
Yes i agree in regards to the “options” for the views, doesn’t say much for “Panel-view” beside it’s 1 Card “stretched” to full screen-size, i did saw another place(can’t find it now) where there was slightly more info in regards to the other View-Options, how they handle Columns (if vertical/horizontal views) and even how Masonry handles Columns … Unfortunately the “Docs/Guides” for the core-integrations/features/cards etc. seems like a mess, most likely because no one have had/taken the time to get a more proper structure/index with relevant, easy to find urls 
And when it comes to Grid, Vertical, Horizontal Stack (Views) , And using Grid/vertical/horizontal-stack Cards in first mentioned Views, i guess that’s up to the “playing around” approach to explore, depending on Device etc. that people prefers/use … Card-Mod(some features) will of-cause also follow/ be affected by the same(screen-size, resolution, browser etc.) beside above, and the few “limitations” stated in the Card-mod docs, and others non-documented “solutions” and Mix people trying to accomplice.
In regards to your first “code” i suggested you trying with “entities” card, for your custom:slider-entity-row, the “tmp borders” so you could see what i.e moving “something” in 25%, or adding slider-entity-row as a Card … it might look “OK” in 1 View(i.e Masonry) as it’s more responsive, in Grid/vertical-horizontal stack is another story, same goes for Panel View … Hui-element also have some “limitations”
So IF you have decided you want to use Panel-View, i suggest you use that, and don’t change your mind forth and back … IT wont look the same if you switch view-mode for very obvious reasons, and when posting in, or creating a topic, try to keep focus on 1 thing at a time.
Try to change slider-entity-row , to be what it is, an entity, then apply card-mod to the Entities-Card …
and if you follow the guide-line for “picture-elements” , where that you have placed the “hui-element” in, where you placed “card_type” grid, and eventually slider-entity-row(as a card) , i suggested (tmp borders) just to visualize, for easier editing and better overview, until you get your Panel-View as desired ( i.e you have 2 “elements” in picture-element, before the “hui-element”, which is not visible in your “example” pic, first “custom:button-card” you have a width 1000%, not that i think it matters for the slider-entity-row, but again, borders give you another level of overview, when playing around
Hello, yes, I have not had the chance to try as entities card yet but it is part of my weekend todo.
I am actually not going back on forth but I am creating multiple dashboards with different information. Many of course use similar approaches. So it is possible, that one “card” will be used for multiple dashboards. And if the dashboard has only one card, then I would like to have the option to switch it to Panel View.
Reasoning:
I have picture-elements cards for each area of my home. These are all in one dashboard and show the main lights plus climate control.
The picture itself is also a link to an area specific dashboard. There I want the same picture elements card but with more information/more entities, and since in that dashboard the “card” is alone, I would like it to always be as large as the screen permits => Panel View.
From there it goes to more details and other classical, picture-less views etc etc
So, if everything worked as one would expect, the basic code of a card should work in every view and on every device in the same way. Proportional scaling. Imagine you switched a windows program from window mode to fullscreen and it broke all menus and all layout inside the program 
Your overall idea of you Views and linking sounds great, thou if you want a Panel-View, make a Panel-view, and see if you can fit that in other “Views” just saying, and your “expectations” sounds a-bit way of reality, and nothing to compare with a windows-program in full-screen vs window-mode, i suggest above make a Panel-View, link to that, save alot time, and and don’t think so much of what’s not possible, because most are, with the right approach, cards/views etc. but not just like magic, and 1 click
Do you have any idea how to make an animation of switching two icons so that they display alternately and make a heating animation ?
Not quit sure what you mean, but there are few ways to “alter” Icons depending on state
… that i have not triedpaper-button-row example 2x4 entities, grey are off here ( using: state_icons: ‘off’ VS ‘on’ )
Unfortunately, not possible by standard CSS animation:
card_mod:
style:
ha-state-icon $: |
ha-svg-icon {
animation-name: iconchange;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes iconchange {
0% {
color: red;
--card-mod-icon: mdi:car !important;
}
49% {
color: red;
--card-mod-icon: mdi:car !important;
}
50% {
color: cyan;
--card-mod-icon: mdi:account !important;
}
100% {
color: cyan;
--card-mod-icon: mdi:account !important;
}
}
or:
card_mod:
style:
ha-state-icon $ ha-svg-icon $: |
path {
animation-name: iconchange;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes iconchange {
0% {
color: red;
d: path("M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z") !important;
}
49% {
color: red;
d: path("M7.95,3L6.53,5.19L7.95,7.4H7.94L5.95,10.5L4.22,9.6L5.64,7.39L4.22,5.19L6.22,2.09L7.95,3M13.95,2.89L12.53,5.1L13.95,7.3L13.94,7.31L11.95,10.4L10.22,9.5L11.64,7.3L10.22,5.1L12.22,2L13.95,2.89M20,2.89L18.56,5.1L20,7.3V7.31L18,10.4L16.25,9.5L17.67,7.3L16.25,5.1L18.25,2L20,2.89M2,22V14A2,2 0 0,1 4,12H20A2,2 0 0,1 22,14V22H20V20H4V22H2M6,14A1,1 0 0,0 5,15V17A1,1 0 0,0 6,18A1,1 0 0,0 7,17V15A1,1 0 0,0 6,14M10,14A1,1 0 0,0 9,15V17A1,1 0 0,0 10,18A1,1 0 0,0 11,17V15A1,1 0 0,0 10,14M14,14A1,1 0 0,0 13,15V17A1,1 0 0,0 14,18A1,1 0 0,0 15,17V15A1,1 0 0,0 14,14M18,14A1,1 0 0,0 17,15V17A1,1 0 0,0 18,18A1,1 0 0,0 19,17V15A1,1 0 0,0 18,14Z") !important;
}
50% {
color: cyan;
d: path("M20,12H4A2,2 0 0,0 2,14V22H4V20H20V22H22V14A2,2 0 0,0 20,12M7,17A1,1 0 0,1 6,18A1,1 0 0,1 5,17V15A1,1 0 0,1 6,14A1,1 0 0,1 7,15V17M11,17A1,1 0 0,1 10,18A1,1 0 0,1 9,17V15A1,1 0 0,1 10,14A1,1 0 0,1 11,15V17M15,17A1,1 0 0,1 14,18A1,1 0 0,1 13,17V15A1,1 0 0,1 14,14A1,1 0 0,1 15,15V17M19,17A1,1 0 0,1 18,18A1,1 0 0,1 17,17V15A1,1 0 0,1 18,14A1,1 0 0,1 19,15V17Z") !important;
}
100% {
color: cyan;
d: path("M20,12H4A2,2 0 0,0 2,14V22H4V20H20V22H22V14A2,2 0 0,0 20,12M7,17A1,1 0 0,1 6,18A1,1 0 0,1 5,17V15A1,1 0 0,1 6,14A1,1 0 0,1 7,15V17M11,17A1,1 0 0,1 10,18A1,1 0 0,1 9,17V15A1,1 0 0,1 10,14A1,1 0 0,1 11,15V17M15,17A1,1 0 0,1 14,18A1,1 0 0,1 13,17V15A1,1 0 0,1 14,14A1,1 0 0,1 15,15V17M19,17A1,1 0 0,1 18,18A1,1 0 0,1 17,17V15A1,1 0 0,1 18,14A1,1 0 0,1 19,15V17Z") !important;
}
}
Color is changing, the icon is not.
Hello @Ildar_Gabdullin
I am trying to set a background image for a horizontal stack but, of course, the background is being re-sized to match the card size.
Is it possible to have the background image define the card size? I would like the card to be the size of the image and of course keep the aspect ratio intact.
EDIT:
I have managed to at least get the aspect ratio right. Unfortunately it is now a small picture as it does not resize the card to match the image. It should ideally behave like the picture-elements card which stretches the card to match the image while keep the aspect ratio. If the card grows, the picture then grows (whilst keeping aspect ratio intact) with the card.
style: |
ha-card {
background-image: url('/local/images/living_room_16_9.jpg');
--ha-card-background: rgba(50,50,50,0);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
So only blinking one icon left ;(((… Thank you for response.
Something like this works, you only need to style the custom fields and maybe add some state filters. Just overlay them
type: custom:button-card
custom_fields:
off:
card:
icon: mdi:radiator-disabled
type: custom:button-card
on:
card:
icon: mdi:radiator
type: custom:button-card
styles:
icon:
- animation: blink 2s ease infinite
I also have a template in my collection. there you can flash the entire map (incl. text).
aspect_ratio: 3/1
color_type: card
entity: light.kuechensockel
layout: vertical
name: Csengő
show_last_changed: true
state:
- color: red
icon: mdi:bell
name: Csengettek!
styles:
card:
- animation: blink 2s ease infinite
value: 'on'
- color: '#d4d4d4'
icon: mdi:bell
operator: default
styles:
grid:
- grid-template-areas: '"n i" "s i" "l i"'
- grid-template-columns: 1fr 30%
icon:
- width: 70%
label:
- color: gray
- font-size: 10px
- justify-self: start
- padding-left: 10px
- padding-top: 10px
name:
- justify-self: start
- padding-top: 5px
- font-weight: bold
- padding-left: 10px
type: custom:button-card
Does anybody know how to change the font (size etc.) of the state of a button card? I found it for an entities card but not a button card.
that should actually also works with “styles”.
if you show me your code, then i could try it out exactly.
here I have another one from my repertoire:
type: custom:button-card
entity: light.sockel_kuche
custom_fields:
ring: |
[[[ if (entity.state == 'on' && entity.attributes.brightness) {
const brightness = Math.round(entity.attributes.brightness/2.55);
const radius = 20.5; const circumference = radius * 2 * Math.PI;
return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="${radius}"
stroke="var(--button-card-light-color)" stroke-width="2" fill="none"
style="transform: rotate(-90deg); transform-origin: 50% 50%;
stroke-dasharray: ${circumference};
stroke-dashoffset: ${circumference - brightness / 100 * circumference};" />
<text x="50%" y="54%" fill="var(--button-card-light-color)" font-size="16" font-weight= "bold"
text-anchor="middle" alignment-baseline="middle">
${brightness}<tspan font-size="10">%</tspan></text></svg>`;}
]]]
aspect_ratio: 1/1
color-type: icon
color: auto
styles:
card:
- border: none
- border-radius: 5px
- '--mdc-ripple-color': lightyellow
- '--mdc-ripple-press-opacity': 0.5
name:
- font-size: 1.8rem
- font-weight: 700
state:
- font-size: 17px
label:
- font-size: 16px
custom_fields:
ring:
- position: absolute
- right: 5%
- top: 10%
- width: 30%
tap_action:
action: toggle
haptic: success
hold_action:
action: more-info
haptic: selection
show_last_changed: false
show_state: false
state:
- value: 'on'
styles:
card:
- '-webkit-box-shadow': 0 0 0.95rem 0.2rem var(--button-card-light-color)
- box-shadow: 0 0 0.95rem 0.2rem var(--button-card-light-color)
- transition: 2s ease
icon:
- filter: drop-shadow(0 0 0.75rem var(--button-card-light-color))
- transition: 2s ease
- position: relative
- left: '-1.5rem'
name:
- color: var(--button-card-light-color)
id: glow
show_label: true
label: |
[[[
if (entity.state == 'on' && entity.attributes.brightness)
return 'Helligkeit: ' + (Math.round(entity.attributes.brightness / 2.55)) + '%';
]]]
``Right now I am trying:
- type: button
show_name: false
show_icon: false
tap_action:
action: none
hold_action:
action: none
entity: sensor.eq_3_battery_living_room
show_state: true
card_mod:
style:
host:
$: |
host {
--ha-chip-text-color: red;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
text-transform: lowercase;
}
The ‘host’ was only a test of mine which is obviously not working.
I was using the normal button-card instead of custom:button-card because I was able to convert to lowercase in the button card and did not figure it out for the custom:button-card right away 
card_mod:
style:
host:
$: |
host {
--ha-chip-text-color: red;
}
.: |
ha-card {
background-color: transparent;
box-shadow: none;
text-transform: lowercase;
}
span.state {
font-size: 20px;
}span.state, I would have never thought of this. Thank you!
Sorry to ask this question, but where can I find this kind of information? I looked at the mozilla css guides and googled but are these HA specific? Or are they per-card specific?
So where should I check for this kind of information?
for the custom-button-card you can also use the lowercase-command .
type: custom:button-card
show_name: false
show_icon: false
tap_action:
action: none
hold_action:
action: none
entity: sensor.eq_3_battery_living_room
show_state: true
styles:
card:
- text-transform: lowercase
I’ve been looking for ages too =)
I’ve also looked at many posts on how others do it.
What is of great help to me is the developer environment.
That’s a great idea. I will try that!
Sorry, I just remembered that it was not the lowercase I could not find, it was the alignment that went weird when I chose custom:button-card instead of button.
All button/button-cards and the slider a placed in a horizontal stack.
custom:button-card:
button:
EDIT: Thanks to the developer tools idea I now see that this is because the button-card is vertically aligned at the top and not the center
This has to be some kind of ‘vertical-align: center’. But it does not work for style: card
I think it is coming from here
/* Vertical No Icon No Label */
#container.vertical.no-icon.no-label {
grid-template-areas: 'n' 's';
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
But I have no idea how to fix this yet. Probably somehow change the grid to only 1 area.
EDIT 2:
I would have thought it is one of these, but no changes to anything move anything 
grid:
- grid-column-start: 1
- grid-column-end: 1
- grid-row-start: 1
- grid-row-end: 1
- grid-template-areas: 's'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
- align-self: center
- place-self: center
I wonder how most of the last button-card, etc. discussions are related to the topic of this thread: card-mod?