Mushroom Chips Template with multiline content

Configuration Frontend
1

Dear comunity,
I found something interesting (at least for me) and I want to share in order to save time to somebody.
Thanks to the masive badges incompatibility introduced in 2024.8, (argh: 2024.8: Beautiful badges!), I was forced to rewrite one dashboard. I decided to use mushroom-chips card. Its template kind was almost ideal for my purpose except the content which is allways showed in one line. Googling and experimentig I found the way to display multi line text in template chip.
There is the code:

type: custom:mushroom-chips-card
chips:
  - type: template
    entity: switch.grijanje_termostat
    use_entity_picture: true
    content: |
      Grijanje
      {{ state_attr("sensor.grijanje_termostat_state", "desc_hr") }}
    picture: '{{ state_attr("sensor.grijanje_termostat_state","picture") }}'
    tap_action:
      action: more-info
    card_mod:
      style: |
        ::slotted(span) {
          content: "\a";
          white-space: pre;
        }
        ha-card 
          {
            --chip-background: {%- if is_state('var.plamenik_greska', 'on') -%}#ffd0d0{%- else -%}{%- if is_state('binary_sensor.thermostat_on', 'on') -%}#ffe4b3{%- else -%}#d0ffd0{%- endif -%}{%- endif -%};
            --chip-border-color: {%- if is_state('var.plamenik_greska', 'on') -%}red{%- else -%}{%- if is_state('binary_sensor.thermostat_on', 'on') -%}orange{%- else -%}green{%- endif -%}{%- endif -%};
            --card-mod-icon-color: {%- if is_state('var.plamenik_greska', 'on') -%}red{%- else -%}{%- if is_state('binary_sensor.thermostat_on', 'on') -%}orange{%- else -%}green{%- endif -%}{%- endif -%};
          }

This produces:
multiline_template_chip

2 Likes
2

you might wish to check out THIS thread then

3

Excuse me, but how is this related?
There is nothing about mushroom-chips.
Don’t get me wrong, but your comment is nothing than noise in channel.

4

Hello! I was using your solution before but it appears to not work anymore in producing multi-line chip cards - have you figured out another solution? I tried a couple of things but so far no success…

5

What card_mod version do you have installed? If it’s v3.5, please install v3.4.4

6

Still working for me and I have all latest versions.
Could be card_mod related as @LiQuid_cOOled said.

7

That did the trick! Much obliged for your tip good sir, hadnt noticed it was rolled back!

1 Like
8

Can you please share the code as the link from @fugley doesn’t have an example of multi-line chip card. Something like this
image

9

Here is one of mine:

                    - type: template
                      entity: binary_sensor.nodejs_update
                      name: NodeJS update
                      icon: mdi:update
                      content: >
                        {% from "binary_sensor_negated_to_words.jinja" import binary_sensor_negated_to_words %}
                        {{ config.name }}

                        Actual: {{ binary_sensor_negated_to_words("binary_sensor.nodejs_update", "No","Yes") }}
                      tap_action:
                        action: more-info
                      card_mod:
                        style: |
                          ::slotted(span) {
                            content: "\a";
                            white-space: pre;
                          }
                          ha-card {
                            --chip-border-color: {% if is_state('binary_sensor.nodejs_update', 'off') %} green {% elif is_state('binary_sensor.nodejs_update', 'on') %} orange {% else %} blue {% endif %};
                            --chip-background: {% if is_state('binary_sensor.nodejs_update', 'off') %} #d0ffd0 {% elif is_state('binary_sensor.nodejs_update', 'on') %} #ffe4b3 {% else %} #d0d0ff {% endif %};
                          }
                          ha-card:active { --chip-border-width: 4px; --chip-border-color: maroon; --chip-background: rgba(var(--rgb-red), 0.8); }