Shopping list / to-do list - in an entity card

Configuration Frontend
1

I don’t like the design of the shopping list. Having a long list is a bit of a waste of space for me, since I just need some overview on everything that’s in the shopping list, and I’m not looking for editing capabilities, adding or removing items are not required (I have Alexa for that). I’d like to have the list as a text-wrap of items. I’ve succeeded doing it with the entity card:

type: entity
entity: calendar.alexa_shopping_list
attribute: all_tasks
card_mod:
  style: |
    :host
      .info {text-wrap:wrap}

It looks like this:

Capture

This is not bad for what I’m looking to achieve. What I would like though is a way to separate this all_tasks attribute, which is just a long comma separated string, and to have each item with its own separate rectangular background, so it’ll look something like this:

e1d20cf546784906dee313c36a624a07a435c157_2_690x326

I’d really love some help here, it could be really great.

2 Likes
2

If anyone is ever interested in this, I found a solution, I ended up using a card called tailwindcss-template-card

And this is my code for this card which achieves exactly what I wanted.

<div class="flex flex-wrap gap-2 justify-center p-5">
  {% set items = state_attr("calendar.alexa_shopping_list",'all_tasks') %}
{% for i in range(0, items | count, 1) %}

    <div class="bg-accent rounded-lg p-2">
        
        {{ items[i]}}

    </div>
    {% endfor %}
  
</div>
3 Likes