Skip to content

Home Assistant entity elements: areas, names, states, and icons

Basic usage

Entity elements display information from the entities defined in the card. They are used for the text and icon parts of a layout: the Home Assistant area, the friendly name, the current state, and the entity icon.

Each type has its own layout section:

Element Section Description
Area areas Shows the Home Assistant area of the entity
Name names Shows the entity name or friendly name
State states Shows the entity state, including unit and decimals
Icon icons Shows the entity icon or a standalone icon

All of these elements use the same basic positioning system. xpos and ypos place the element on the 100x100 card canvas. entity_index connects the element to an entity from the entities section.

Icons can also be used without an entity by defining the icon directly in the layout item.

Example definitions

Basic Area 1
1
2
3
4
5
6
7
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  entity_index: 0           # connects to entity 0 in the entity definitions
  ellipsis: 20
  styles:
    font-size: 1.4em
    text-transform: none
Basic Area 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  entity_index: 0           # connects to entity 0 in the entity definitions
  ellipsis: 20
  styles:
    font-size: 1.4em
    text-transform: none
  color_stop:               # Use of color stop: color of area depends on state
    colors:
      0: 'blue'
      0.1: 'green'
      0.4: 'yellow'
      1: 'orange'
      3: 'red'
      5: 'purple'

Basic Name 1
1
2
3
4
5
6
7
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  entity_index: 0           # connects to entity 0 in the entity definitions
  ellipsis: 20
  styles:
    font-size: 1.4em
    text-transform: none
Basic Name 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  entity_index: 0           # connects to entity 0 in the entity definitions
  ellipsis: 20
  styles:
    font-size: 1.4em
    text-transform: none
  color_stop:               # Use of color stop: color of area depends on state
    colors:
      0: 'blue'
      0.1: 'green'
      0.4: 'yellow'
      1: 'orange'
      3: 'red'
      5: 'purple'

State
1
2
3
4
5
6
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  length: 25                # length of line.
  entity_index: 0           # connect to state of entity 0
  styles:
    stroke-width: 2         # Set stroke width using CSS attribute
State
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  length: 25                # length of line.
  entity_index: 0           # connect to state of entity 0
  styles:
    stroke-width: 2         # Set stroke width using CSS attribute
  color_stop:               # Use of color stop: color of circle depends on state
    colors:
      0: 'blue'
      0.1: 'green'
      0.4: 'yellow'
      1: 'orange'
      3: 'red'
      5: 'purple'

Standalone Icon
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  icon_size: 10             # Relative size of 10 (em)
  align: center             # Align (center, end, start)
  # Specify icon as icon, external image or external SVG
  icon: mdi:dots-vertical   # Specify icon in item definition
  icon: url(/local/images/some-image.png) # Override Icon with external image
  icon: url(/local/images/some-svg.svg) # Override Icon with external SVG
  styles:
    fill: var(--primary-text-color)
Entity Icon
1
2
3
4
5
6
7
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  icon_size: 10             # Relative size of 10 (em)
  align: center             # Align (center, end, start)
  entity_index: 1           # Specify entity_index
  styles:
    fill: var(--primary-text-color)

State Mapped Icon
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- xpos: 50                  # xpos=50 is center position
  ypos: 50                  # ypos=50 is center position
  icon_size: 10             # Relative size of 10 (em)
  align: center             # Align (center, end, start)
  entity_index: 2
  state_map:                # Translate text state to icon
    map:
      - state: 'low'
        icon: url(/local/images/kleenex/pollen_weed_low.svg)
      - state: 'moderate'
        icon: url(/local/images/kleenex/pollen_weed_moderate.svg)
      - state: 'high'
        icon: url(/local/images/kleenex/pollen_weed_high.svg)
      - state: 'very_high'
        icon: url(/local/images/kleenex/pollen_weed_very_high.svg)

Configuration fields

The fields below are available for each entity element type.

Field Required Description
xpos X position on the 100x100 card canvas
ypos Y position on the 100x100 card canvas
entity_index Index in the entities section
ellipsis Maximum number of characters before ...
styles CSS style definitions
color_stop Color stop used to set the text color based on the entity state
Field Required Description
xpos X position on the 100x100 card canvas
ypos Y position on the 100x100 card canvas
entity_index Index in the entities section
ellipsis Maximum number of characters before ...
styles CSS style definitions
color_stop Color stop used to set the text color based on the entity state
Field Required Description
xpos X position on the 100x100 card canvas
ypos Y position on the 100x100 card canvas
entity_index Index in the entities section
styles CSS style definitions
color_stop Color stop used to set the text color based on the entity state
state_map Entity state translation from named states to decimal states for color stops NOT YET IMPLEMENTED
Field Required Description
xpos X position on the 100x100 card canvas
ypos Y position on the 100x100 card canvas
icon_size Icon size
entity_index Index in the entities section
icon Define an icon, external image, or external SVG
styles CSS style definitions
color_stop Color stop used to set the icon color based on the entity state
state_map Entity state-dependent icon value

Shared fields

These fields can be used across the entity element sections.

Field Required Description
id Optional unique id within the section, used by same_as
group Group this layout item belongs to
same_as* Reuse another item from the same section. See the same_as documentation

Styling

All entity element sections support inline SVG and CSS styling through the styles field.

Method Support Description
styles Inline SVG and CSS styles
Property Purpose Example
font-size Text size font-size: 12em sets a relative font size
text-anchor Text alignment text-anchor: start, middle, or end
fill Text color fill: red sets the text color to red
opacity Text opacity opacity: 0.7 sets the text opacity to 70%

Use relative font sizes when possible

Relative font sizes fit well with the relative sizing used by the Flexible Horseshoe Card. Use fixed pixel sizes only when you need a fixed visual size.

Property Purpose Example
font-size Text size font-size: 12em sets a relative font size
text-anchor Text alignment text-anchor: start, middle, or end
fill Text color fill: red sets the text color to red
opacity Text opacity opacity: 0.7 sets the text opacity to 70%

Use relative font sizes when possible

Relative font sizes fit well with the relative sizing used by the Flexible Horseshoe Card. Use fixed pixel sizes only when you need a fixed visual size.

Property Purpose Example
font-size Text size font-size: 12em sets a relative font size
text-anchor Text alignment text-anchor: start, middle, or end
fill Text color fill: red sets the text color to red
opacity Text opacity opacity: 0.7 sets the text opacity to 70%
Property Purpose Example
fill Icon color fill: red sets the icon color to red
opacity Icon opacity opacity: 0.7 sets the icon opacity to 70%

Color stops and animations

Entity elements can use color stops and animations when they are connected to an entity.

Method Support Description
color_stops List of state values used to set the color
animations State-based animations using class or style changes

Animations require an entity

Animations require the item to be connected to an entity with entity_index.