Skip to content

Reusable YAML Card Examples

Real-world card examples

The two cards below show practical examples of the Reuse™ features provided by same_as, calc(), and ref(). Both examples include the full YAML configuration, so you can see how the repeated parts are reduced in a real card.

Example Card 30

Card 30 is an electricity card that uses the DSMR Reader integration.

It shows:

  • total electricity consumption in the main horseshoe
  • the consumption for each individual phase: L1, L2, and L3

This card has several repeated parts:

  • the three horizontal lines
  • the L1, L2, and L3 groups, each containing a state, a name, and a circle separator
  • the shared color stops used by both the horseshoe and the icon

This example also uses named ids for all items. That makes the configuration easier to read and makes the same_as references more explicit.

The card configuration

Entity definitions
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
- type: custom:flex-horseshoe-card
  entities:
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      name: 'Total'
      area: ':30:'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l1
      name: 'L1'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l2
      name: 'L2'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l3
      name: 'L3'
    - entity: sensor.dsmr_reading_electricity_currently_delivered
External Palette definition
1
2
  palettes:
    rainbow: /local/palettes/rainbow-palette-new.json

The constants section defines the styles and color stops used by ref(), plus numeric constants used by calc() for positioning.

Constants definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
  constants:
    centerX: 50
    centerY: 50
    lineStep: 11
    lineLength: calc(4 * 20 + 5)       
    disabledLineStyle:
      stroke: var(--disabled-text-color)
      stroke-width: 2         
    defaultColorStops:
      mode: gradient
      gap: 3
      colors:
        0: var(--fhs-sys-rainbow-blue)
        1: var(--fhs-sys-rainbow-green)
        2: var(--fhs-sys-rainbow-yellow)
        3: var(--fhs-sys-rainbow-orange)
        4: var(--fhs-sys-rainbow-red)
        5: var(--fhs-sys-rainbow-purple)

The three groups place related items at the right position on the card grid.

Groups do not support same_as yet.
Groups can also scale or rotate elements. 

groups:
  L1:
    xpos: 125
    ypos: 23
    scale:
      x: 1
      y: 1
    rotate: 90

Groups definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
  layout:
    groups:
      L1:
        xpos: 23
        ypos: 72
      L2:
        xpos: 73
        ypos: 72
      L3:
        xpos: 48
        ypos: 83
Area and Icon definitions
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
    areas:
      - id: all
        entity_index: 0
        xpos: 0
        ypos: 100
        styles:
          - font-size: 0.75em
          - text-transform: none     
          - text-anchor: start                       
    icons:
      - id: first
        entity_index: 0
        xpos: 50
        ypos: 10
        size: 1.5
        color_stops: ref(defaultColorStops)
hlines definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    hlines:
      - id: first
        xpos: calc(centerX)
        ypos: 64
        length: calc(4 * 20 + 5)
        styles:
          - ref(disabledLineStyle)
          - opacity: 0.8
      - id: second
        same_as: first
        same_as_dypos: calc(1 * lineStep)
      - id: third
        same_as: first
        same_as_dypos: calc(2 * lineStep)
vlines definition
1
2
3
4
5
6
7
    vlines:
      - id: first
        xpos: 50
        ypos: 69.5
        length: 11
        styles:
          - stroke: var(--disabled-text-color);

All three grouped circles are identical and are positioned around the center point of the card.

The group places each circle at the right position on the card grid.

Circles definition
 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
    circles:
      - id: first
        group: L1 
        xpos: calc(centerX - 3)
        ypos: calc(centerY - 3)
        radius: 2
        styles:
          - fill: var(--primary-text-color);
          - opacity: 0.5;
      - id: second
        group: L2
        same_as: first
      - id: third
        group: L3
        same_as: first

      - id: bigone
        xpos: calc(centerX)
        ypos: calc(-centerY)
        radius: 175     # Radius in pixels
        styles:
          - fill: var(--primary-background-color);
          - opacity: 0.7;
          - stroke: var(--disabled-text-color);
          - stroke-width: 2

All three grouped states are identical and are positioned around the center point of the card.

The group places each state at the right position on the card grid.

States definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    states:
      - id: all
        entity_index: 0
        xpos: calc(centerX)
        ypos: 56
        styles:
          - font-size: 2.5em
          - font-weight: bold
      - id: first
        group: L1
        entity_index: 1
        xpos: calc(centerX)
        ypos: calc(centerY)
        styles:
          - text-anchor: start
          - font-size: 1.2em                 
      - id: second
        group: L2
        entity_index: 2
        same_as: first
      - id: third
        group: L3
        entity_index: 3
        same_as: first

All three grouped names are identical and are positioned around the center point of the card.

The group places each name at the right position on the card grid.

Names definition
 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
    names:
      - id: all
        entity_index: 0
        xpos: calc(centerX)
        ypos: 98
        ellipsis: 20
        styles:
          - font-size: 1.4em
          - text-transform: none
      - id: first
        entity_index: 1
        group: L1
        xpos: calc(centerX - 6)
        ypos: calc(centerY)
        styles:
          - text-anchor: end
          - font-size: 1.2em                
      - id: second
        entity_index: 2
        group: L2
        same_as: first
      - id: third
        entity_index: 3
        group: L3
        same_as: first
Horseshoe definition
 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
    horseshoes:
      - id: first
        entity_index: 0
        xpos: calc(centerX)
        ypos: -45
        radius: 70
        tickmarks_radius: 43
        arc_degrees: 70
        flip: both

        show:
          horseshoe: true
          scale_tickmarks: false
          horseshoe_style: colorstopgradient
          scale_style: fixed
          labels_at: ticks_major
          ticks: true
          label_badges: true                  
          label_background: none
        # 
        horseshoe_scale:
          min: 0
          max: 5
          width: 6
          color: var(--primary-background-color)
          ticksize: 0.1
          gap: 3
          styles:
            - opacity: 0.7
        #
        horseshoe_tickmarks:
          ticks_major:
            ticksize: 1
            color_mode: colorstopgradient
            width: 12
            offset: -3
            thickness: 3
            styles:
              - opacity: 0.9;
          ticks_minor:
            ticksize: 0.2
            color_mode: colorstopgradient
            thickness: 2
            width: 6
            offset: -12
            styles:
              - opacity: 0.7;
        #
        horseshoe_labels:
          distance_min: 0.3
          ticksize_min: 0.3
          orientation: horizontal
          background:
            width: 10
            gap: 3  
            styles:
              - opacity: 0.05
              - stroke: var(--primary-text-color)
          badges:
            radius: 6
            color: var(--card-background-color)
            border_color: var(--divider-color)
            padding: 0
            height: 10
          styles:
            - font-size: 0.7em
        #
        horseshoe_state:
          width: 12
        color_stops: ref(defaultColorStops)

Example Card 32

Card 32 is also an electricity card that uses the DSMR Reader integration.

It shows four vertical horseshoes: one for the total consumption and one for each phase.

This card has several repeated parts:

  • the four vertical horseshoes
  • the states for the horseshoes
  • the names for the horseshoes

This example does not use groups. Instead, it uses simple shift-to-the-right positioning with calc().

The card configuration

Entity definitions
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
- type: custom:flex-horseshoe-card
  entities:
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      decimals: 2
      name: 'Total'
      area: ':32:'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l1
      decimals: 2
      name: 'L1'
      area: 'Electricity'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l2
      decimals: 2
      name: 'L2'
    - entity: sensor.dsmr_reading_phase_currently_delivered_l3
      decimals: 2
      name: 'L3'
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      decimals: 2
External Palette definition
1
2
  palettes:
    rainbow: /local/palettes/rainbow-palette-new.json
Constants definition
1
2
3
4
5
6
  constants:
    radius0: 5000     # An extreme radius to emulate a straight horseshoe!!
    xpos0: 20         # First vertical horseshoe at xpos = 20
    ypos0: 45         # ... and ypos = 45
    dxPos1: 25        # Delta/shift xpos for first phase
    dxPos2: 21        # Delta/shift xpos for other phases
Areas definitions
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
  layout:
    areas:
      - entity_index: 0
        xpos: 0
        ypos: 100
        styles:
          - font-size: 0.75em
          - text-transform: none     
          - text-anchor: start                       
      - entity_index: 1
        xpos: 50
        ypos: 8
        styles:
          - font-size: 1.7em
          - text-transform: none
States definition
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    states:
      - entity_index: 0
        xpos: calc(xpos0)
        ypos: 85
        styles:
          - font-size: 1.0em
      - entity_index: 1
        same_as: 0
        same_as_dxpos: calc(dxPos1)
      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)
      - entity_index: 3
        same_as: 2
        same_as_dxpos: calc(dxPos2)

  • Check syntax, processing order, and constraints in the Reuse Reference.
  • Design repeated layouts with Positioning and Groups.
  • Configure the reused gradients with Color Stops.
  • Configure the scales and state arcs with the Horseshoe Tool.
    Names definition
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        names:
      - entity_index: 0
        xpos: calc(xpos0)
        ypos: 95
        styles:
          - font-size: 1.0em
      - entity_index: 1
        same_as: 0
        same_as_dxpos: calc(dxPos1)
      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)
      - entity_index: 3
        same_as: 2
        same_as_dxpos: calc(dxPos2)

The very small arc of .7 degrees, combined with the large radius and a -90 degree rotation, makes the horseshoe look like a vertical progress bar.

Horseshoe definition ALL
 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
    horseshoes:
      - entity_index: 0
        xpos: calc(-radius0 + xpos0 + 5)
        ypos: 45
        radius: calc(radius0)
        rotate: -90       # Rotate horseshoe 90 degrees CCW
        arc_degrees: .7   # A large requires a small arc
        flip: y           # Flip around y-axis so 0 is at bottom

        show:
          horseshoe: true
          scale_tickmarks: false
          horseshoe_style: colorstopgradient
          scale_style: fixed
          labels_at: ticks_major
          ticks: true
          label_badges: true                  
          label_background: none
        # 
        horseshoe_scale:
          min: 0
          max: 5
          width: 6
          color: var(--primary-background-color)
          ticksize: 0.1   # Ticks each 0.1 kWh
          gap: 3
          styles:
            - opacity: 0.7
        #
        horseshoe_tickmarks:
          ticks_major:
            ticksize: 1
            color_mode: colorstopgradient
            width: 12
            offset: -3
            thickness: 1
            styles:
              - stroke: var(--primary-text-color)
              - fill: var(--primary-text-color)
              - opacity: 0.9;
          ticks_minor:
            ticksize: 0.1
            color_mode: colorstopgradient
            thickness: 1
            width: 6
            offset: -12
            styles:
              - stroke: var(--primary-text-color)
              - fill: var(--primary-text-color)
              - opacity: 0.7;
        #
        horseshoe_labels:
          distance_min: 0.3
          ticksize_min: 0.3
          orientation: horizontal
          offset: -34
          badges:
            radius: 6
            color: var(--card-background-color)
            border_color: var(--divider-color)
            padding: 0
            height: 10  
          styles:
            - font-size: 0.7em
        #
        horseshoe_state:
          width: 12
          styles:
            - stroke-linecap: butt
        #
        color_stops:
          gap: 3
          colors:
            0: var(--fhs-sys-rainbow-blue)
            1: var(--fhs-sys-rainbow-green)
            2: var(--fhs-sys-rainbow-yellow)
            3: var(--fhs-sys-rainbow-orange)
            4: var(--fhs-sys-rainbow-red)
            5: var(--fhs-sys-rainbow-purple)

Notice how little YAML is needed for the other three horseshoes!

The first copy reuses the "All" configuration, shifts it to the right, and removes the labels.
The other two copy the previous horseshoe and shift to the right from that position.

That reduces each additional horseshoe to only a few lines of YAML instead of repeating the full 79-line configuration.

Horseshoe definition L1/L2/L3
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
      - entity_index: 1
        same_as: 0
        same_as_dxpos: calc(dxPos1)
        show:
          labels_at: none
      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)
      - entity_index: 3
        same_as: 2
        same_as_dxpos: calc(dxPos2)