Text¶

A text item adds headings, captions, labels, and compact summaries anywhere on a card. Use it to build one readable label from fixed words and the name, state, or area already shown elsewhere on the card.

Basic configuration¶

Set text to the value you want to display.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

layout:
  texts:
    - id: history-title
      text:
        - value: 'History: '
        - value: 7 days
          styles:
            font-weight: bold
      xpos: 50
      ypos: 15
      styles:
        font-size: 1.2em
        font-weight: bold
        text-anchor: middle

Use xpos and ypos to position the text. Common SVG text styles such as font-size, font-weight, fill, text-anchor, and dominant-baseline control its appearance.

Configuration options¶

Text item¶

Inline text part¶

Inline text parts¶

Set text to a list when a label contains parts with different content or styling.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

layout:
  texts:
    - id: history-label
      xpos: 50
      ypos: 45
      styles:
        text-anchor: middle
        dominant-baseline: middle
      text:
        - value: 'History: '
          styles:
            fill: var(--secondary-text-color)
        - value: 7 days
          styles:
            fill: var(--primary-text-color)
            font-weight: bold

Parts on the same line are placed directly after each other. Include spaces in the values where they are needed.

Each part uses value and can have its own styles.

Combine entity information¶

Use inline parts to make a single summary such as Living room: 21.4 °C - Ground floor. This is useful when the name, current value, and assigned area should stay together instead of being positioned as separate labels.

First add the Name, State, and Area items that provide the information. They can stay hidden when the summary is the only place where they should appear. Then select each item by its type and id in the summary text.

 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

layout:
  names:
    - id: room-name
      entity_index: 0
      visibility: hidden

  states:
    - id: room-temperature
      entity_index: 0
      visibility: hidden
      show:
        uom: end

  areas:
    - id: room-area
      entity_index: 0
      visibility: hidden

  texts:
    - id: room-summary
      xpos: 50
      ypos: 50
      styles:
        text-anchor: middle
        dominant-baseline: middle
      text:
        - type: name
          id: room-name
        - value: ': '
        - type: state
          id: room-temperature
          uom:
            styles:
              font-size: 0.75em
        - value: ' - '
        - type: area
          id: room-area

The inline part uses the source item's formatted content and appearance. Add styles to the inline part when the summary needs a different appearance. Set source_styles: false when only the text or value should be reused.

Multiple lines¶

Add new_line: true to start a part on the next line.

1
2
3
4
5
6
7
8

text:
  - value: Indoor climate
    styles:
      fill: var(--secondary-text-color)
  - value: Comfortable
    new_line: true
    styles:
      font-weight: bold

Use dx and dy on an individual part to adjust its horizontal or vertical position.

Long text¶

Decide what a label should do when it does not fit in the available space: continue on another line, keep its size and shorten the ending, or keep the complete label visible by using a smaller font.

Limit the number of characters¶

Use direct ellipsis when a label may contain only a fixed number of characters. Place it on the complete text item to limit every line, or on one inline part to limit that part only.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

layout:
  texts:
    - id: compact-label
      xpos: 50
      ypos: 50
      ellipsis: 16
      text:
        - value: 'History period: '
        - value: 7 days
          styles:
            font-weight: bold

Use more than one line¶

Show a longer label on multiple lines while keeping it inside the available width.

1
2
3
4
5
6

text_overflow:
  mode: wrap
  wrap:
    max_width: 40
    max_lines: 3
    dy: 1.4

Keep the text size within a fixed width¶

Use this when the label must stay within a known width while keeping its font size. Unlike ellipsis: 40, max_width: 40 is a width in the card layout, not a character count. Flexible Horseshoe Card shortens the ending only when the complete label is wider than max_width.

1
2
3
4

text_overflow:
  mode: ellipsis
  ellipsis:
    max_width: 40

Keep the complete label visible¶

Flexible Horseshoe Card uses the configured text size while it fits and makes the label smaller only when necessary. Set min_font_size to the smallest size that is still readable in your card.

1
2
3
4
5

text_overflow:
  mode: fit
  fit:
    max_width: 40
    min_font_size: 0.7em

Related¶

• Styling
• Positioning and sizing