Skip to content

Line

A line adds a simple visual connection or separation to a card. Use it as a divider, status indicator, scale mark, connector, or decorative element.

Basic configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
layout:
  lines:
    - id: divider
      xpos: 50
      ypos: 50
      length: 70
      orientation: horizontal
      styles:
        stroke: var(--divider-color)
        stroke-width: 1

Configuration options

Field Required Description
orientation Yes horizontal, vertical, or fromto
xpos, ypos Horizontal or vertical Position of the line center
length Horizontal or vertical Total line length
start, end Point to point Coordinates of both ends
entity_index No Entity used by colors and actions
styles No Stroke, width, opacity, and line ends
color_stops No Value- or state-based colors

Choose the direction

1
2
3
4
- xpos: 50
  ypos: 50
  length: 70
  orientation: horizontal

1
2
3
4
- xpos: 50
  ypos: 50
  length: 70
  orientation: vertical

1
2
3
4
5
6
7
- orientation: fromto
  start:
    xpos: 20
    ypos: 30
  end:
    xpos: 80
    ypos: 70

Line ends

Use stroke-linecap to choose the line ends:

1
2
3
4
styles:
  stroke: var(--primary-color)
  stroke-width: 2
  stroke-linecap: round

Color from an entity

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
- entity_index: 0
  xpos: 50
  ypos: 50
  length: 70
  orientation: horizontal

  show:
    item_style: colorstopinterpolated

  colorstopinterpolated:
    stroke: true
    fill: false

  color_stops:
    colors:
      - value: 0
        color: green
      - value: 50
        color: orange
      - value: 100
        color: red