Skip to content

Card tools

Card tools are the elements you add to a Flexible Horseshoe Card. Choose the tools you want to show, then position and style each one independently.

Available tools

You want to show Use
Current state, name, area, or icon Entity tools
A line, circle, arc, rectangle, or custom text Shapes
A value on a circular scale Horseshoe
Entity history or statistics Sparkline
A button, toggle, selector, stepper, or slider Interactive controls

Add tools to the layout

Each tool belongs to a named list under layout:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
layout:
  icons:
    - entity_index: 0
      xpos: 50
      ypos: 25

  states:
    - entity_index: 0
      xpos: 50
      ypos: 50

  circles:
    - xpos: 50
      ypos: 50
      radius: 30
  #
  # Etcetera
  #

Tools can share an entity, use different entities, or remain independent of entity data.

Configure a tool

Start with the page for the item you want to add. Continue with these guides when you want to change how it behaves:

Goal Guide
Place an item on the card Positioning and sizing
Arrange several items together Groups
Change colors, fonts, or outlines Styling
Show colors based on a value or state Color stops
Run something when an item is tapped Actions
Show or hide an item Visibility
Reuse a repeated item Reuse