Skip to content

Positioning and sizing

Place tools with xpos and ypos. The card coordinate system starts at 0, 0 in the top-left and uses 50, 50 as its center.

Position a tool

1
2
3
4
5
6
layout:
  icons:
    - entity_index: 0
      xpos: 50
      ypos: 25
      size: 4
Position xpos ypos
Top-left 0 0
Center 50 50
Bottom-right 100 100

Tools are positioned from their visual center unless their own page describes another anchor.

Choose the card shape

Use layout.aspectratio to make the card square, wide, or tall:

1
2
layout:
  aspectratio: 1/1

1
2
layout:
  aspectratio: 1.5/1

1
2
layout:
  aspectratio: 1/1.5

Size tools

Tool Common size fields
Text and entity text font-size, overflow settings
Icon size
Circle radius or radius_percent
Arc and horseshoe radius, arc_degrees
Line length, thickness
Rectangle width, height, radius
Sparkline and control width, height

Use a group when several tools form one visual block. Positions inside the group are relative to its center.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
layout:
  groups:
    - id: heading
      xpos: 50
      ypos: 15

  icons:
    - group: heading
      entity_index: 0
      xpos: 40
      ypos: 50

  names:
    - group: heading
      entity_index: 0
      xpos: 55
      ypos: 50

See Groups for complete examples.