Skip to content

Your first card

Create a horseshoe gauge that shows an entity icon, its current state in the center and the name below.

Your First Horseshoe Card

Add the card

Open a dashboard in edit mode, add a Manual card, and enter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
- type: custom:flex-horseshoe-card

  entities:
    - entity: sensor.__your_temperature_sensor__
      name: Temperature
  layout:
    aspectratio: 1/1      # Square card (default)

    horseshoes:
      - entity_index: 0
        xpos: 50          # In center of square card (100 x 100)
        ypos: 50
        radius: 45
        horseshoe_scale:
          min: 0
          max: 40
        show:
          horseshoe_style: colorstop
        color_stops:
          colors:
            0: "#42a5f5"
            20: "#66bb6a"
            30: "#f9a825"
            40: "#d32f2f"

    icons:
      - entity_index: 0
        xpos: 50
        ypos: 30
        icon_size: 3

    states:
      - entity_index: 0
        xpos: 50
        ypos: 57
        styles:
          font-size: 2.5em
          font-weight: bold

    names:
      - entity_index: 0
        xpos: 50
        ypos: 95
        styles:
          text-transform: none

Replace sensor.__your_temperature_sensor__ with an entity from your Home Assistant instance.

The horseshoe fills according to the entity state. Its color follows the configured color stops.

Continue building

There are so many more possibilities with this card, so keep building!

Flexible Horseshoe Card #36 with horseshoe and sparkline