Area¶

An area shows where an entity belongs in the home, such as Living room, Kitchen, or Bedroom. Use it to add that location to a card.

The displayed area follows the entity selected with entity_index.

Basic configuration¶

Add areas under layout.areas:

1
2
3
4
5
6
7
8
9

entities:
  - entity: sensor.living_room_temperature

layout:
  areas:
    - id: room
      entity_index: 0
      xpos: 50
      ypos: 50

entity_index selects the entity whose area is displayed.

xpos and ypos position the area text on the card.

Configuration options¶

Where the area comes from¶

Flexible Horseshoe Card uses the Home Assistant area assigned to the entity.

If the entity itself has no area, the area assigned to its device is used.

You can override the displayed area in the entity configuration:

1
2
3
4
5
6
7
8

entities:
  - entity: sensor.living_room_temperature

layout:
  areas:
    - entity_index: 0
      xpos: 50
      ypos: 50

1
2
3
4
5
6
7
8
9

entities:
  - entity: sensor.living_room_temperature
    area: Downstairs

layout:
  areas:
    - entity_index: 0
      xpos: 50
      ypos: 50

Size and position¶

Position the area with xpos and ypos:

1
2
3
4
5
6
7
8

layout:
  areas:
    - entity_index: 0
      xpos: 10
      ypos: 90
      styles:
        text-anchor: start
        font-size: 1em

Use text-anchor to align the text around its position:

• start — text starts at xpos
• middle — text is centered on xpos
• end — text ends at xpos

See Positioning and sizing for the card coordinate system.

Text appearance¶

Use styles to change the appearance of the area:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

layout:
  areas:
    - entity_index: 0
      xpos: 50
      ypos: 50
      styles:
        font-size: 1.4em
        font-weight: bold
        text-transform: none
        fill: var(--secondary-text-color)
        opacity: 0.8

Common styles include:

See Styling for the complete styling guide.

Shorten long area names¶

Use ellipsis to limit the displayed length:

1
2
3
4
5
6

layout:
  areas:
    - entity_index: 0
      xpos: 50
      ypos: 50
      ellipsis: 20

Longer area names are shortened with an ellipsis.

Color from the entity¶

An area can change color with the state of its entity:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

layout:
  areas:
    - entity_index: 0
      xpos: 50
      ypos: 50

      show:
        item_style: colorstop

      color_stops:
        colors:
          0: green
          50: orange
          100: red

Area color stops are applied to the text.

See Color stops for ranges, gradients, palettes, and interpolation.

Related¶

• Name
• State
• Text
• Entities
• Positioning and sizing
• Styling
• Color stops
• Actions
• Animations