Skip to content

Your first card

Your first card only needs one entity and a few visible items. Building one working card first shows the basic relationship between entities: and layout: before you add more features.

This page builds a simple Horseshoe card with an entity value, icon, and name, then points to the topics you can add next.

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
type: custom:flex-horseshoe-card

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

layout:
  horseshoes:
    - 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
      radius: 45  # Distance from the center to the Horseshoe path
      arc_degrees: 260  # Draw 260° of the full 360° circle

      horseshoe_scale:
        min: 0  # Value at the start of the scale
        max: 40  # Value at the end of the scale

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

Replace sensor.__your_temperature_sensor__ with one of your own entities.

The Horseshoe shows the entity value between 0 and 40. The State tool shows the same value in the center.

Add more to the card

From here, choose what you want to add:

Flexible Horseshoe Card #36 with horseshoe and sparkline