Thanks for keeping on with it - I’ve just rebuilt my whole UI using mostly your tiles now! One small ‘bug’ I’ve come across, when text overflows to a second row, it seems to lose its alignment. For example:
Normal display, note the centred text:
When text becomes too long for the line it turns to right aligned, i.e. when my weather description becomes longer (ignore the overlapping time, I had to squash things to reproduce it):
It was really happening this bug, I sent a correction to github. Your interface seems to be getting really cool!
Thanks for the fix, works perfectly in Chrome and Firefox, but I seem to be getting the same behaviour in Opera 57 on Windows.
Yeah I’m getting there, got a bit of a menu system going to display different cards on a wall mounted tablet. I’ll put up a demo once it’s finished. Just having some performance issues at the moment, after a few hours my tablet browser freezes up or crashes. I need to narrow down the cause, but don’t suspect it’s tiles doing it at this stage, and it may just be a Lovelace thing in general.
Another feature request I’ve come across that would be handy, is a separate service call for long-presses on tiles. Similar to this.
@rodrigodf - I would just like to say thank you very much for making a really great Tiles UI card for Lovelace. Both the built-in Entity Button card and the Custom Button card massively pale in comparison to the amazing work you are doing here. Thanks!
@rodrigodf I’ve started to transition my non-lovelace Tiles config to your new one and I think I’ve found a bug with background colours.
It looks like the “background” colour section within “entities” doesn’t work when the entity is a group (on or off), as it defaults to a green/red colour.
title: Home
views:
- title: Summary
icon: mdi:home
panel: false
id: home
cards:
- type: custom:tiles-card
card_settings:
title: Summary
columns: 3
row_height: 50px
entities:
- entity: group.all_lights_main
row: 1
column: 1
column_span: 3
backgroud:
value_on: yellow
value_off: gray
templates:
label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
However, if I set the “background” section within “global_settings”, it works as expected:
- type: custom:tiles-card
card_settings:
title: Summary
columns: 3
row_height: 50px
global_settings:
background:
value_on: yellow
value_off: gray
entities:
- entity: group.all_lights_main
row: 1
column: 1
column_span: 3
templates:
label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
It all seems to work fine when I use an “input_boolean” entity:
entities:
- entity: group.all_lights_main
row: 1
column: 1
column_span: 3
backgroud:
value: yellow
value_on: yellow
value_off: gray
templates:
label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
- entity: input_boolean.window_is_open
row: 2
column: 1
background:
value_on: red
value_off: '#00cc00' #light green
templates:
label: "return 'Windows: ' + entities['sensor.windows_open'].state;"
icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
- entity: input_boolean.door_is_open
row: 2
column: 2
background:
value_on: red
value_off: '#00cc00' #light green
templates:
label: "return 'Doors: ' + entities['sensor.doors_open'].state;"
icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door-closed'"
On another note, how would I make the text and icon appear on the same line please? It seemed to default to being on the same line in the original Tiles version:
Another example is as follows; original version:
new version:
Original Yaml:
- entity: sensor.netatmo_outdoor1_temperature
label: Outdoor
label_sec_template: "return entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
icon: mdi:thermometer
# more_info: history_graph.gr1
color: 'hsla(0, 0%, 98%, 0)' #whitetransparent
New Yaml:
- entity: sensor.netatmo_outdoor1_temperature
row: 3
column: 1
background:
value: 'hsla(0, 0%, 98%, 0)'
label:
color: black
value: Outdoor
templates:
label_sec: "return entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
icon:
value: 'mdi:thermometer'
color: black
Sorry, one more question, is there a way to make the text bold? I guess I need to use CSS styles, but not quite sure how. My lame attempt was to try the following, but it didn’t work.
style: "return '--tiles-font-weight: bold;'"
Thanks!
though I don’t use the latest version, (since it broke too many dedicated settings of my legacy tiles… reverted to version 1) my groups are colored like this: config wide settings under the config, entity overrides in the entity setting:
type: custom:tiles-card
legacy_config:
row_height: 25px
text_uppercase: false
text_size: 1em
text_color_on: '#555B65'
text_color_off: '#F0C209'
text_sec_color_on: '#555B65'
color_on: '#F0C209'
color_off: '#555B65'
# icon_size: 25px works but is not necessary
entities:
- entity: group.all_lights_only
label_template: >
if (entities['sensor.lights_badge'].state !== 0) return 'Total lights on: ' + entities['sensor.lights_badge'].state;
return 'No lights on';
icon_template: >
if (state === 'on') return 'mdi:power-plug';
return 'mdi:power-plug-off';
style_template: >
if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #555B65';
return 'min-height: 25px;--tiles-icon-color:#5daf35';
color_on: '#5daf35'
text_color_off: 'green'
column: 1
column_span: 3
row: 1
row_span: 1
- entity: group.all_hallway_lights
label: All hallway and ambient lights
icon_template: >
if (state === 'on') return 'mdi:power-plug';
return 'mdi:power-plug-off';
style_template: >
if (state == 'on') return 'min-height: 25px;--tiles-icon-color: #F0C209';
return 'min-height: 25px;--tiles-icon-color:#5daf35';
color_on: '#cf2525'
text_color_on: '#f0c209'
text_color_off: '#5daf35'
column: 1
column_span: 3
row: 2
row_span: 1
have a look here:
- entity: sensor.active_badge
# label: Active
icon_template: >
if (state > 0 ) return 'mdi:checkbox-multiple-marked-circle-outline';
return 'mdi:circle-outline';
label_sec_template: >
return 'Active: ' + state;
style_template: >
if (state > 0) return 'background-color: #f0c209;--tiles-icon-color:#555B65;--tiles-label-sec-color: #555B65;color: #555B65';
return 'background-color: #555B65;--tiles-icon-color:#f0c209;--tiles-label-sec-color: #f0c209;color: #f0c209;text-decoration: line-through';
more_info: sensor.active_badge
- entity: sensor.alarms_badge
label_sec_template: return attributes.friendly_name;
style_template: >
if (attributes.unit_of_measurement === 'On') return 'background-color: #e20000;background-image: url(\"' + attributes.entity_picture + '\");--tiles-label-sec-color: #333;font-weight: bold';
return 'background-color: #555B65;background-image: url(\"' + attributes.entity_picture + '\");--tiles-label-sec-color: #fff;font-weight: bold';
more_info: sensor.alarms_badge
you mean like this:
see the code for the first question. using label and icon, or in my setting _template for both seems to do the trick. Unless of course the tile isn’t large enough (both wide or tall) to have them fit both.
other example:
- entity: light.laundry_ceiling
label: Laundry
label_sec_template: >
if (state === 'unavailable') return 'n/a';
if (state === 'off') return ' ';
return Math.round(attributes.brightness / 2.55) + ' %';
icon: mdi:ceiling-light
style_template: >
if (state === 'unavailable') return
'border: 1px dotted #D3D3D3;color:#D3D3D3;--tiles-icon-color:#D3D3D3;--tiles-label-sec-color: #D3D3D3;background-color:var(--paper-card-background-color)';
return '--tiles-icon-color:#F0C209';
color_on: '#1675C9'
# color_off: '#c7c4bb'
text_color_on: '#f0C209'
text_sec_color_on: '#f0C209'
# text_color_off: '#1675C9'
column: 1
row: 4
row_span: 2
showing as:
see the issue with the Garden terrace in my configuration…
This is a feature I had previously thought of adding, but will probably require many modifications. I am currently involved in other projects and have no time at the moment, but I intend to add this feature in the future.
Thank you @jarrah , I’m glad you liked it!
I believe the mistake is happening because you wrote backgroud instead of background. Note that whenever any setting is entered incorrectly, it is ignored.
For the text and icon to appear on the same line you must use the orientation: attribute that accepts the vertical (default) and horizontal values. Note that when the orientation is vertical label will be in the top and label_sec will be in the bottom, when the orientation is horizontal label will be on the left and label_sec on the right, the icon will always be in the middle (if it exists).
Vertical (default):
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
#orientation: vertical
Horizontal:
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
orientation: horizontal
Another setting that can help you is align: that aligns all the content within the tile and accepts left, center and right values for horizontal alignment and top, middle and bottom values for vertical alignment. You can use only one type of alignment or combine the two by separating them with a space, the default is align: ‘center middle’:
Orientation: horizontal - Align: ‘bottom center’
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
orientation: horizontal
align: 'bottom center'
Orientation: horizontal - Align: ‘top left’
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
orientation: horizontal
align: 'top left'
Orientation: vertical - Align: ‘top left’
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
align: 'top left'
You can also use the padding attribute (for label, label_sec and icon) to place them in a specific position, as in the example below that I have aligned in “bottom center” and raised label_sec 130px:
Orientation: horizontal - Align: ‘bottom center’ - label_sec padding
- entity: light.light_1
label: label
label_sec:
value: label_sec
padding: 0px 0px 130px 0px
icon: mdi:power
orientation: horizontal
align: 'bottom center'
To make the text bold, you can use the style template in this way:
- entity: light.light_1
label: label
label_sec: label_sec
icon: mdi:power
templates:
style: "return 'font-weight: bold;'"
Thank you @Mariusthvdb and @rodrigodf for your incredibly useful replies, I will be trying them out this evening.
oh dear, what a fool I am for missing the obvious spelling mistake, thank you for pointing that out. 
@rodrigodf the screenshots and example yaml you’ve given in your reply to me and on previous posts have been very useful. If you have chance, would you mind including these on your GitHub page, perhaps in a “Question & Answer Examples” wiki page please? I’m the sort of person who is much better able to understand code if I can see the visual example alongside it, as you have done here. 
Just to help anyone new to this thread, here are the links to @rodrigodf’s excellent work!
EDIT - found a simple solution using <br>: 
- entity: sensor.netatmo_outdoor1_temperature
row: 3
column: 1
orientation: horizontal
background:
value: 'hsla(0, 0%, 98%, 0)' #whitetransparent
templates:
label_sec: "return 'Outdoor:<br>' + entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
icon:
value: 'mdi:thermometer'
Having had a good read through your alignment examples, I suspect the following isn’t possible.
My old tiles config had the following layout:
using:
label: Kitchen
label_sec_template: "return entities['sensor.temperature_158d0001dfc938'].state + 'ºC'"
icon: mdi:thermometer
You mentioned above that the icon will always be in the middle, which means label_sec is required to have the icon to the left, resulting in no options to have text below. I suspect this could be done using padding, but I’ll be viewing this on desktop and small screen so don’t want to have fixed positions.
Now to be honest, this is purely an aesthetics issue as I have no qualms using the following layout if it’ll be a pain to make the above example work.
Thanks!
Thanks for your help, I’ve now been able to transition my summary page to LoveLace thanks to your excellent custom card @rodrigodf
In case it helps others, here is my summary page along with the yaml code:
resources:
- url: /local/kiosk.js?v=1.1
type: js
title: Home
views:
- title: Summary
icon: mdi:home
panel: false
path: kiosk
cards:
- type: custom:tiles-card
card_settings:
# title: Summary
columns: 3
row_height: 45px
global_settings:
align: 'center middle'
orientation: horizontal
label:
color:
value: white
label_sec:
color:
value: white
icon:
color:
value: white
entities:
- entity: group.all_lights_main
row: 1
column: 1
column_span: 3
background:
value: yellow
value_on: '#F0C209'
value_off: '#555B65'
templates:
label: "return 'All Lights: ' + entities['sensor.lights_on'].state;"
style: "return 'font-weight: bold;'"
- entity: input_boolean.window_is_open
row: 2
column: 1
background:
value_on: red
value_off: '#00cc00' #light green
templates:
label_sec: "return 'Windows: ' + entities['sensor.windows_open'].state;"
style: "return 'font-weight: bold;'"
icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
- entity: input_boolean.door_is_open
row: 2
column: 2
background:
value_on: red
value_off: '#00cc00' #light green
templates:
label_sec: "return 'Doors: ' + entities['sensor.doors_open'].state;"
icon: "if (state === 'on') return 'mdi:door-open'; else return 'mdi:door-closed'"
style: "return 'font-weight: bold;'"
- entity: input_boolean.curtain_is_open #I don't have auto curtains yet, it's on my to-buy list!
row: 2
column: 3
background:
value_on: red
value_off: '#00cc00' #light green
label_sec:
value: "Curtains: 0"
templates:
icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
style: "return 'font-weight: bold;'"
- entity: sensor.netatmo_outdoor1_temperature
row: 3
column: 1
orientation: horizontal
background:
value: 'hsla(0, 0%, 98%, 0)'
label_sec:
color: black
templates:
label_sec: "return 'Outdoor<br>' + entities['sensor.netatmo_outdoor1_temperature'].state + 'ºC'"
icon:
value: 'mdi:thermometer'
color: black
- entity: sensor.dark_sky_apparent_temperature
row: 3
column: 2
orientation: horizontal
background:
value: 'hsla(0, 0%, 98%, 0)'
label_sec:
color: black
templates:
label_sec: "return 'Feels Like<br>' + entities['sensor.dark_sky_apparent_temperature'].state + 'ºC'"
icon:
value: 'mdi:thermometer'
color: black
- entity: sensor.dark_sky_wind_speed
row: 3
column: 3
orientation: horizontal
background:
value: 'hsla(0, 0%, 98%, 0)'
label_sec:
color: black
templates:
label_sec: "return 'Wind Speed<br>' + entities['sensor.dark_sky_wind_speed'].state + 'mph'"
icon:
value: 'mdi:thermometer'
color: black
- entity: sensor.dark_sky_minutely_summary
row: 4
column: 1
column_span: 3
background:
value: 'hsla(0, 0%, 98%, 0)'
label:
color: black
templates:
label: "return entities['sensor.dark_sky_minutely_summary'].state"
- entity: input_boolean.wearehome
row: 5
column: 1
column_span: 2
background:
value_off: red
value_on: '#00cc00' #light green
templates:
label: "if (state === 'on') return 'Home Mode'; else return 'Away Mode'"
style: "return 'font-weight: bold;'"
icon: "if (state === 'on') return 'mdi:home-account'; else return 'mdi:home'"
- entity: input_boolean.doginout
row: 5
column: 3
background:
value_on: red
value_off: '#00cc00' #light green
icon:
value: mdi:dog
templates:
label: "if (state === 'off') return 'Dog In'; else return 'Dog Out'"
style: "return 'font-weight: bold;'"
Kiosk mode helps display this summary on my HyperPixel display which is next to the door, so that I can see the house status at a quick glance, as well as the weather outside.
Thanks!
Is there any way to do lovelace page navigation with this card?
Agreed, it would be great if Tiles could utilise tap_action (along with action, navigation_path, etc), as documented in the built-in button card here: https://www.home-assistant.io/lovelace/entity-button/#configuration-variables
@rodrigodf how feasible would this be to implement out of interest please?
Anyone know if there is a way to make the text closer together on 2 lines of text?
Look at the bottom row of my radion player, I made the text smaller, but it still doesn’t look right to me, and if there was a way to make the 2 rows of text (ie. Kitchen & Portable) closer together.
I’ve tried using just label: and using label: and label_sec: and both, and every combination of align and padding I can think of.
I am having trouble upgrading tiles on the latest version of Home Assistant. I am running 65.6 and tiles are working great. I have a test system running 85.1 but I am having trouble with icons and colors. I am using an input_text entity as the container and switch entities for the buttons.
Thanks
Love the tiles! Now converting my custom buttons .
A question though, can you use theme variables in the color settings?
icon:
color:
value: "var(--paper-toggle-button-checked-button-color)"
color:
value_on: "var(--paper-toggle-button-checked-button-color)"
color:
value_off: lightgrey
This doesn’t seem to work.
I second that! Great how much can be configured 
That’s working here without problems. You have to use it like this.
icon:
color:
value: "var(--paper-toggle-button-checked-button-color)"
value_on: "var(--paper-toggle-button-checked-button-color)"
value_off: lightgrey
Thanks for the example. It works! Brilliant!
@rodrigodf Do you know if it would be possible to implement varying button widths so that they aren’t set by rigid columns please, e.g.
Perhaps if only a row number was specified (as shown below), it could work out how to spread the buttons evenly over the card width. As it stands, it currently looks like this:
entities:
- entity: binary_sensor.door_window_sensor_158d0001e44f03
row: 1
- entity: binary_sensor.door_window_sensor_158d0001b1456a
row: 1
- entity: binary_sensor.door_kitchen_rear_contact
row: 1
- entity: binary_sensor.door_window_sensor_158d0001ab73f7
row: 2
- entity: binary_sensor.door_window_sensor_158d0001dad5e6
row: 2
I’ve figured out a workaround to my question above by using a combination of templates, display, gap, and padding! Hope this helps others too.
- title: test
icon: mdi:run
panel: false
path: test
cards:
- type: custom:tiles-card
card_settings:
title: test
gap: 10px
padding: 0px
columns: 5
row_height: 45px
templates:
style: "return 'box-shadow: 0px 0px;'"
entities:
- entity: binary_sensor.door_window_sensor_158d0001e44f03
row: 1
- entity: binary_sensor.door_window_sensor_158d0001b1456a
row: 1
- entity: binary_sensor.door_kitchen_rear_contact
row: 1
- entity: binary_sensor.door_window_sensor_158d0001e44f03
row: 1
- entity: binary_sensor.door_window_sensor_158d0001b1456a
row: 1
- type: custom:tiles-card
card_settings:
display: hidden
gap: 10px
padding: 0px
columns: 3
row_height: 45px
entities:
- entity: binary_sensor.door_window_sensor_158d0001e44f03
row: 1
- entity: binary_sensor.door_window_sensor_158d0001b1456a
row: 1
- entity: binary_sensor.door_kitchen_rear_contact
row: 1
- type: custom:tiles-card
card_settings:
display: hidden
gap: 10px
padding: 0px
columns: 2
row_height: 45px
entities:
- entity: binary_sensor.door_window_sensor_158d0001e44f03
row: 1
- entity: binary_sensor.door_window_sensor_158d0001b1456a
row: 1