Line¶

A Line is a straight visual element that can separate, connect, underline, or highlight parts of a card. It can be horizontal, vertical, or drawn between two explicit points.

This page shows how to choose the line direction, place and size it, control its ends and appearance, and optionally let its color follow an entity value.

Add a horizontal line¶

Use a horizontal line to separate content, underline a value, or add a simple visual guide across the card.

1
2
3
4
5
6
7
8
9

layout:
  lines:
    - orientation: horizontal  # Arrange it from left to right
      xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      length: 60  # Length of the line
      styles:
        stroke: var(--divider-color)  # Border or line color
        stroke-width: 2  # Border or line thickness

Add a vertical line¶

Use a vertical line to separate columns or create a simple vertical visual guide.

1
2
3
4
5
6

layout:
  lines:
    - orientation: vertical  # Arrange it from bottom to top
      xpos: 50  # Horizontal position; 50 = center of the card
      ypos: 50  # Vertical position; 50 = center of the card
      length: 40  # Length of the line

Draw a line between two points¶

Use fromto when a center position plus length is not enough — for example when the line must connect two known points. In this form you give the start and end directly, so xpos, ypos, and length are not needed:

1
2
3
4
5
6
7
8
9

layout:
  lines:
    - orientation: fromto  # Draw the line between start and end
      start:
        x: 20
        y: 30
      end:
        x: 80
        y: 70

You can also write the same point-to-point line with x1, y1, x2, and y2. x1/y1 define the start point and x2/y2 define the end point. If start or end is also present, that mapping is used for that endpoint instead.

1
2
3
4
5
6
7

layout:
  lines:
    - orientation: fromto  # Draw between two explicit points
      x1: 20  # Start x coordinate
      y1: 30  # Start y coordinate
      x2: 80  # End x coordinate
      y2: 70  # End y coordinate

Change the line ends¶

Set styles.stroke-linecap to choose the shape of both line ends: butt ends exactly at the endpoint with a flat edge, round uses a rounded end, and square uses a flat end that extends slightly beyond the endpoint. The default is round.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

layout:
  lines:
    - orientation: horizontal
      xpos: 50
      ypos: 50
      length: 60
      styles:
        stroke: var(--divider-color)
        stroke-width: 4
        stroke-linecap: square  # Flat ends that extend slightly past the endpoints

Change color with an entity¶

Add entity_index and color_stops when the line color should follow an entity value or state. See Color stops.

Configuration options¶

Choose the table for the kind of line you want to draw. A horizontal line has useful defaults; vertical and point-to-point lines only need the fields that differ from that default.

Horizontal line¶

Vertical line¶

Line between two points¶

Alternative coordinate form:

Options for every Line¶

Related¶

• Shapes
• Appearance
• Color stops