Depending on what you have, you can use templates for that as well. Templates from button-card (thatās what this is basically about) can be inherited from other templates. So what you need in the end, is a template like my_chips that inherit from the default chips.
Like this:
first_page_chips ā inherits from my_chips ā inherits from chips. 
hello @clemalex
i have trouble to get the same cool alarm panel like your picture. Check mine below.
Did copy your code and changed some few lines, can you see what i have missed?
- title: Alarm
icon: 'mdi:security'
path: alarm
cards:
- cards:
- cards:
- template: edge
type: 'custom:button-card'
- template: chips_return
type: 'custom:button-card'
- template: chips_power_consumption_price
type: 'custom:button-card'
- template: edge
type: 'custom:button-card'
type: horizontal-stack
- type: vertical-stack
cards:
- card:
entity: alarm_control_panel.alarm
states:
- arm_home
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-green-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "Larma av";
color: var(--google-green-500);
position: absolute;
font-variant: small-caps;
}
#alarmCode{
display: none;
}
#keypad{
display: none !important;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Aktivera";
margin: 0 0 0 50%;
}
title: Alarme
type: alarm-panel
conditions:
- entity: alarm_control_panel.alarm
state: disarmed
type: conditional
- card:
entity: alarm_control_panel.alarm
states:
- armed_home
title: Alarm
type: alarm-panel
style:
.: |
ha-card > ha-label-badge{
--alarm-state-color: var(--google-red-500) !important;
}
ha-card{
padding-top: 16px;
padding-bottom: 12px !important;
border-radius: 21px;
}
ha-card > h1{
padding-top: 0;
color: transparent;
}
ha-card > h1::before{
content: "ActivƩe";
color: var(--google-red-500);
position: absolute;
font-variant: small-caps;
}
'#armActions':
mwc-button:
$: |
#button > span.slot-container{
color: transparent;
position: absolute;
}
#button{
width: 150px;
border-radius: 21px;
}
#button > span.slot-container::before{
color: var(--mdc-theme-primary, #6200ee);
content: "Larma av";
margin: 0 0 0 50%;
}
'#keypad':
mwc-button:
$: |
#button{
border-radius: 12px
}
conditions:
- entity: alarm_control_panel.alarm
state_not: disarmed
type: conditional
type: vertical-stack
Found out the error but not sure how i could fix it no other way than remove -500 from color part.
var(--google-green-500)
Oh! 
ofcourse, add it to theme template
Can someone explain how-to setup Scene part. Not sure how-to create this sensors
sensor.presence
sensor.absent
sensor.travail
The colors have changed. Yes it is necessary to correct then
I cannot find the rest of the code for the media-player button. Can you share?
Found all now but how to setup card correct, mine does not look like your picture
- entity: media_player.kok
name: Sonos
template:
- icon_info_bg
- media_buttons
type: 'custom:button-card'
Why would you say that? That template seems fine?
Iām interested in that, too. I always use the option without curly brackets and it works as desired. What is the advantage of Paddyās solutions?
Itās not because of the brackets, itās the logic behind. 
With this version, there are three if-statements, and the last one overwrites the previous two.
if (entity.state == 'hjemme') return 'š ';
This one checks, if the state is āhjemmeā. If it is, the icon will be set.
The next line does the same, but independent from the first.
The third line is another if-statement, that answers the question, is the state āferieā, if not, show the burnng icon. It is run totally indepent of the statements before. So every state, that is not āferieā shows the burning icon, no matter the two statements before.
To sum it up, the first two if-statements are totally ignored, the only one that is shown in the end is the third one, and that checks only, if the state is āferieā. Nothing else.
I hope this is understandably explained, if not, please ask again.
EDIT: This is exactly, why I use the curly brackets. Short hand code writing is easy, but it hides the logic a little bit. With the brackets it is easy to see, that the three statements donāt belong together and therefor donāt work together.
Maybe Iām blind, but isnāt this the same logic? (from my covers template)
label: |
[[[
if (entity.attributes.current_position == 100) return 'vollstƤndig geƶffnet';
if (entity.attributes.current_position == 0) return 'vollstƤndig geschlossen';
if (entity.attributes.current_position <= 20) return 'geschlossen';
else return entity.attributes.current_position + '% geƶffnet';
]]]
It always works as defined.
Youāre totally right, my bad, Iām sorry! 
The āreturnā leaves the actual function and therefor the next statements arenāt run. insert-the-head-banging-smilie-here Sorry for the confusion, seems Iām not awake enoughā¦ Iāll go and repair my car now, before I post other nonsenseā¦ Sorry, really!
Iāll make a note at the code above.
Not referring to the brackets.
Not sure why you think it does what you state here, but itās not the fact.
Upon each state change the template
is evaluated.
The template will be fine as is. For reference you can see the many templates I show in my examples for custom-ui
Btw: the āelseā is not even required 
a simple āreturnā suffices in the last line
Everythingās fine! I just wondered if there was a better way 
Totally right. I use it only for clarity purposes and so that my dumb head still knows later what I wanted to express with it. 
As I said in the post above, my bad, Iām sorry for the confusion!
- type: 'custom:button-card'
variables:
entity: media_player.living_room
template: media_buttons
This actually works here
Need some help to making the header generic.
I have made a my_chips template and added this to my frontpage yaml:
- cards:
- template: my_chips
type: 'custom:button-card'
type: horizontal-stack
Then I have made this and added it to the button_card_template.yaml:
my_chips:
- template: edge
type: 'custom:button-card'
- template: chips_temperature
type: 'custom:button-card'
- template: chips
type: 'custom:button-card'
tap_action:
action: navigate
navigation_path: '/lovelace-yaml2/lys/'
label: |
[[[
var antall = states['sensor.lights_on_counter'].state;
return 'š”' + antall ;
]]]
- template: chips
label: "š"
type: 'custom:button-card'
tap_action:
action: navigate
navigation_path: '/lovelace-yaml2/handleliste/'
- template: chips
label: "š§¹"
type: 'custom:button-card'
tap_action:
action: navigate
navigation_path: '/lovelace-yaml2/vaskeoversikt/'
- template: edge
type: 'custom:button-card'
the result:
just a white line. What im a missing?
- cards:
- template: my_chips
type: 'custom:button-card'
type: horizontal-stack
You are defining a button card and passing a list of cards to it.
So I think this wont work no matter what ā¦
Thatās also why youāre seeing one big white card
But I dont actually know how to fix it 
Try and follow the configuration options from button-card: here
Ps: Nice background 
yeah was afraid of that, maybe I can use the !include function.
Thanks, I have stole it from someone else in this topic:)
What do you mean whit inheritance?