Tile card


The tile card gives you a quick overview of your entity. The card allows you to toggle the entity and show the more info dialog. A badge is shown for some entities like the climate or person entities.

Screenshot of tile cards Screenshot of tile cards.

To add the tile card to your user interface:

  1. In the top right of the screen, select the three dots menu and then select Edit dashboard.
    • By editing the dashboard, you are taking over control of this dashboard. This means that it is no longer automatically updated when new dashboard elements become available. To continue, in the dialog, select Take control.
  2. In the bottom right corner, select the Add card button and select from the card picker.

Configuration Variables

type string Required

tile

entity string Required

Entity ID.

name string (Optional)

Overwrites the entity name.

icon string (Optional)

Overwrites the entity icon.

color string (Optional, default: state)

Set the color when the entity is active. By default, the color is based on state, domain, and device_class of your entity. It accepts color token or hex color code.

show_entity_picture boolean (Optional, default: false)

If your entity has a picture, it will replace the icon.

vertical boolean (Optional, default: false)

Displays the icon above the name and state.

hide_state boolean (Optional, default: false)

Hide the entity state.

state_content string | list (Optional)

Content to display for the state. Can be state, last-changed, or any attribute of the entity. Can be either a string with a single item, or a list of string items. Default depends on the entity domain.

tap_action map (Optional)

Action taken on card tap. See action documentation. By default, it will show the “more-info” dialog.

icon_tap_action map (Optional)

Action taken on icon card tap. See action documentation. By default, it will toggle the entity (if possible), otherwise, show the “more-info” dialog.

features list (Optional)

Additional widgets to control your entity. See available features.

Examples

Alternatively, the card can be configured using YAML:

type: tile
entity: cover.kitchen_window
type: tile
entity: light.bedroom
icon: mdi:lamp
color: yellow
type: tile
entity: person.anne_therese
show_entity_picture: true
type: tile
entity: person.anne_therese
vertical: true
hide_state: true
type: tile
entity: light.living_room
state_content: 
  - state
  - brightness
  - last-changed
type: tile
entity: vacuum.ground_floor
features:
  - type: vacuum-commands
    commands:
      - start_pause
      - return_home

Available color tokens

Some color tokens are available to colorize the tile card : primary, accent, disabled, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown, grey, blue-grey, black and white.