Area¶

The Area tool displays the Home Assistant area associated with an entity. It is useful when the card should identify where a device or sensor belongs without repeating that text manually.

This page shows how to add an Area item, choose its position and text appearance, keep long area names readable, and optionally color the text from the entity value.

Show the area¶

Use the Area tool when the card should display the Home Assistant area associated with an entity.

1
2
3
4
5
6
7
8

entities:
  - entity: sensor.living_room_temperature  # Home Assistant entity used by this card

layout:
  areas:
    - entity_index: 0  # Use the first entity configured above
      xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card

The card uses the entity's Home Assistant area unless you override it for this card.

Use another area name¶

Override the area text when the automatic Home Assistant area name is not the wording you want on this card.

1
2
3

entities:
  - entity: sensor.living_room_temperature  # Home Assistant entity used by this card
    area: Downstairs  # Area name shown for this entity

Position and style the area¶

Position and style the Area text so it fits the visual hierarchy of the card.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

entities:
  - entity: sensor.example_1  # Entity used by this example

layout:
  areas:
    - entity_index: 0  # Use entity 0 from entities: (0 = first entity)
      xpos: 20  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      styles:
        text-anchor: start  # Horizontal alignment of the text
        font-size: 1em  # Size of the displayed text

Shorten a long area name¶

Use ellipsis when a long area name would collide with nearby content or exceed the space available.

1
2
3
4
5
6
7
8
9

entities:
  - entity: sensor.example_1  # Entity used by this example

layout:
  areas:
    - entity_index: 0  # Use entity 0 from entities: (0 = first entity)
      xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      ellipsis: 16

max_characters is an alternative field with the same effect. If both fields are set, max_characters is used.

Change color with the entity¶

Use color_stops when the area text should change color with the selected entity. See Color stops.

Configuration options¶

Required applies to the specific form described by that table: Yes means you need the field for that form; No means you can leave it out. Not set means the card adds no explicit value when the option is omitted.

Related¶

• Entities
• Name
• State