@tom_l
Pour clore cet apartƩ :
Jāai toujours traduit les informations importantes 
pas les politesses. 
To close this digression:
I have always translated important information, not courtesies
La modƩration est rude ici 
Moderation is harsh here
No worries, I would pay attention the next times.
@clemalex While I appreciate your effort to translate everything, I agree with the moderator. This is an english forum. @tben wrote his initial post in perfect english, so I donāt see what it adds to write your posts bi-lingual. If I start translating my posts in Dutch and someone else in Spanish etc., it becomes a mess.
But letās not be distracted from the content of this thread which is about a beautiful design. Thank you for the vacuum buttons @clemalex, I was trying to create something like this!
Hi clem, 
Itās nice to see people using the cards for their own use !
Everyone has his own taste but about the color I prefer to use gray when the device is closed or off. I find it less distracting and it allows to draw the eye on other more important elements.
Still on the subject of colors, I used one color per type of device
I find that it allows to have a coherence in the whole interface.
Nice work 
Thank you for these explanations, I will apply them!
It is this kind of remark that I was expecting when I said that you could make them even more beautifulā¦
Feel free to explain it in your github 
The Github is in progress
With stack-in card, I combined two cards :
Itās late, I would post the code later (cleanup to do)
@tben You will notice that I still have progress to make on the colorsā¦ 
Very cool ! 
I love the element that allows you to visualize the suction power ! It gives me ideas 
Thatās the goal 
And always depending on the work of 7ahangās work
button_card_templates:
card_line_4_actions:
variables:
item1_icon: mdi:numeric-1-circle
item2_icon: mdi:numeric-2-circle
item3_icon: mdi:numeric-3-circle
item4_icon: mdi:numeric-4-circle
name: Default name
styles:
card:
- border-radius: 20px
- box-shadow: none
- padding: 12px
- background: transparent
grid:
- grid-template-areas: '"item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item2:
card:
template: list_items_line_4_actions
type: custom:button-card
custom_fields:
item1:
card:
icon: '[[[ return variables.item1_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entitĆ© Ć observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "GENTLE"){
return 'white';
}else{
return 'transparent';
}
]]]
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Gentle
type: custom:button-card
template:
- widget_icon_line_4_actions
item2:
card:
icon: '[[[ return variables.item2_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entitĆ© Ć observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "SILENT"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(0.75)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Silent
type: custom:button-card
template:
- widget_icon_line_4_actions
item3:
card:
icon: '[[[ return variables.item3_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entitĆ© Ć observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "STANDARD"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(1)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Standard
type: custom:button-card
template:
- widget_icon_line_4_actions
item4:
card:
icon: '[[[ return variables.item4_icon ]]]'
styles:
card:
- background-color: |
[[[
//Remplacer_ici l'entitĆ© Ć observer pour l'affichage de l'item mis en avant
if (states["sensor.aspiro_fan"].state.toUpperCase() == "TURBO"){
return 'white';
}else{
return 'transparent';
}
]]]
icon:
- transform: scale(1.4)
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.vacuum_aspiro_speed_set
option: Turbo
type: custom:button-card
template:
- widget_icon_line_4_actions
list_items_line_4_actions:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 21px
- pointer-events: none
- background-color: rgba(var(--couleur-gris),0.2
- justify-items: center
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
- justify-items: center
img_cell:
- justify-items: center
widget_icon_line_4_actions:
show_icon: true
show_name: false
size: 20px
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 50%
- place-self: center
- height: 42px
- width: 42px
- pointer-events: auto
grid:
- grid-template-areas: '"i"'
icon:
- color: rgba(var(--couleur-theme),0.9)
I forgot to variable the size of the iconā¦
After years of looking for a cool dashboard for mobile views, I think Iāve found what I was looking for !
Merci !
Will try to put this all together with my configuration. Love it 
While implenting it, just a first thought, the āchipā for weather condition on home page is āiconā + āinside tempā + āoutside tempā wich looks weird. Looks like at home today is rainy with 21.4Ā° outside and 15.4 inside 
I personnaly switched the temperatures.
All set up! Really liking this UI. Thanks everyone for your contributions!
I would show more pages but Iām a new user and it wonāt let me.
SNoof85 - I also switched the temperatures!
Nice! Could you post your other screens in differents posts maybe? Iām curious!
Finally iām having something that suits my needs for mobile interface. Last problem (I hope), hidding the header, Iāve seen the code to hide it but it doesnāt work. Even with the theme applied.
Nevermind : found my error 
The card-mod-theme: light_mobile has to be changed in card-mod-theme: mobile because my theme is named āmobileāā¦ RTFM !
Thanks for the card 
I reworked the card to look like an image of the original design. I added the color of the bulb in the icon and the brightness. Take it or not 
#cards
type: grid
cards:
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
- entity: light.salon_lampe_01
template:
- light_buttons_with_colors_light
type: custom:button-card
variables:
entity: light.salon_lampe_01
name: Salon
columns: 2
square: false
#templates
button_card_templates:
list_items_light:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 2fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
light_with_colors:
tap_action:
action: toggle
hold_action:
action: more-info
label: |-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri + '%' : 'On') ;
}
}else{
return "Indisponible";
}
]]]
state:
- styles:
icon:
- filter: |-
[[[
var bri = entity.attributes.brightness / 2.55;
return ('brightness(' + (50+bri/2) + '%)') ;
]]]
- color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',1)'
}
else{
return 'rgba(var(--couleur-jaune),1)'
}
]]]
img_cell:
- background-color: |-
[[[
var color = entity.attributes.rgb_color;
if (color){
return 'rgba(' + entity.attributes.rgb_color + ',0.2)'
}
else{
return 'rgba(var(--couleur-jaune),0.2)'
}
]]]
value: 'on'
light_buttons_with_colors_light:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĆØre
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: light.salon_lampe_01
radius: 12px
height: 42px
thumbColorOff: rgba(var(--couleur-theme),0.2)
mainSliderColorOff: rgb(var(--couleur-theme),0.2)
secondarySliderColorOff: var(--google-grey-500)
mainSliderColor: rgb(var(--couleur-gris-light))
thumbColor: rgb(var(--couleur-gris-light))
secondarySliderColor: var(--google-grey-500)
card_mod:
style: |
ha-card {
border-radius: 14px;
}
div {
border: 2px solid var(--google-grey-500);
border-radius: 14px !important;
box-sizing: border-box;
position: relative;
}
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
light_buttons_with_colors:
show_name: false
show_icon: false
variables:
entity: light.default
name: LumiĆØre
styles:
card:
- border-radius: 20px
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: call-service
service: light.toggle
service_data:
entity_id: '[[[ return variables.entity ]]]'
template:
- icon_info
- light_with_colors
type: custom:button-card
item2:
card:
template: list_items_light
type: custom:button-card
custom_fields:
item1:
card:
type: custom:slider-card
entity: '[[[ return variables.entity ]]]'
radius: 14px
height: 42px
mainSliderColorOff: var(--google-grey-500)
secondarySliderColor: rgba(var(--couleur-theme),0.05)
secondarySliderColorOff: rgba(var(--couleur-theme),0.05)
thumbColorOff: white
item2:
card:
icon: mdi:palette
tap_action:
action: more-info
type: custom:button-card
entity: '[[[ return variables.entity ]]]'
template: widget_icon
The code is not optimized because I think we can lighten it by combining the templates
trĆØs sexy.
I just published the github on my first post, feel free to give feedback, itās the first time Iāve done this 
Outstanding work ! Really love this. Go get your ass in the frontend team !
