Linefeed/Carriage Return in Horizontal stack card

Hey all,

I’ve got the following in the Secondary information of a Horizontal Stack Card:

Temperature: {{states(‘sensor.downstairs_nest_temperature’)}}
Humidity: {{states(‘sensor.downstairs_nest_humidity’)}}

This wants to display all on one line, and I would like them one on top of the other. Is there a way to force a Carriage Return/Linefeed between them?

Thanks!

It would be more helpful if you posted your whole card.

OK,

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Main Floor
    secondary: |-
      Temperature: {{states('sensor.downstairs_nest_temperature')}}
      Humidity: {{states('sensor.downstairs_nest_humidity')}}
    icon: mdi:home-floor-1
    tap_action:
      action: navigate
      navigation_path: floor1
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon_color: >-
      {% if is_state('light.kitchen_above_cabinets', 'on') or
      is_state('light.kitchen_under_cabinets', 'on')  %}
        green
      {% endif %}
    layout: vertical
    fill_container: true
  - type: custom:mushroom-template-card
    primary: Second Floor
    secondary: |-
      Temperature: {{ states('sensor.upstairs_nest_temperature')}}
      Humidity: {{ states('sensor.upstairs_nest_humidity')}}
    icon: mdi:home-floor-2
    layout: vertical
    tap_action:
      action: navigate
      navigation_path: floor2
    hold_action:
      action: none
    double_tap_action:
      action: none
    icon_color: ''

The standard YAML syntax have issues with linefeeds due to the way it is formatted.
In order to help with this there are some alternative syntax options.
{% and {{ can be replaced with {%- and {{- which will remove a leading linefeed.
%} and }} can be replaced with -%} and -}} which will remove a following linefeed.

It is possible to mix and match these, so a output line can be started with {{ and ended with -}}

Ok,

I’ve tried a myriad of variations, with no change in the display:

image

What is your suggestion for these lines:

Temperature: {{states(‘sensor.downstairs_nest_temperature’)}}
Humidity: {{states(‘sensor.downstairs_nest_humidity’)}}

Thank you

I did not read the post well enough and answered on how to remove a linefeed. :slight_smile:
I normally use markdown cards for stuff like that, so I can design it as I like.
In markdown cards you can use html tags, so <br> will make a linefeed. I have no idea if that works in your card too.

You can do it by setting the white-space attribute to break-spaces on the .secondary class, and putting a single return between the lines.

type: custom:mushroom-template-card
primary: Second Floor
secondary: >
  Temperature: {{ states('sensor.upstairs_nest_temperature')}}
  
  Humidity: {{ states('sensor.upstairs_nest_humidity')}}
icon: mdi:home-floor-2
card_mod:
  style:
    mushroom-state-info$: |
      .secondary {
        white-space: break-spaces !important;
      }

:pray:

Thank you.