Hello Home Assistant community! 
I’m sharing my latest creation: Todo Swipe Card - a specialized card for todo lists with built-in styling and swipe functionality.
The Story Behind This Card 
I wanted a way to organize multiple shopping lists on my dashboard, each representing a different store with its own background image with the colors and logo from the store. This was already partially possible with the native shopping-list card, but because I wanted to use multiple shopping-list cards and swipe them, I developed my own custom card that fits my needs.
Now I can swipe between my store-specific lists, each with customized styling that makes it instantly recognizable.
Features 
- Swipe between multiple todo lists
- Built-in styling with customizable background images
- Pagination dots for quick reference
- Options to show/hide completed items
- Delete completed items button with optional confirmation dialog
- Full visual editor support
Important: This card requires card-mod to be installed!
Configuration Example 
yaml
type: custom:todo-swipe-card
entities:
- todo.shopping_list
- todo.home_tasks
- todo.work_projects
show_pagination: true
show_addbutton: true
show_create: true
show_completed: true
show_completed_menu: true
delete_confirmation: true
card_spacing: 15
background_images:
todo.shopping_list: /local/images/shopping_bg.jpg
todo.home_tasks: /local/images/home_bg.jpg
Visual Editor 
The card includes an easy-to-use visual editor for easy configuration from the dashboard without the need to edit any yaml. Please see the Github repository for a screenshot.
My Use-Case 
My personal setup has a todo list for each grocery store with their logo and brand colors as the background, as seen in the example .gif. When I drive near Albert Heijn, Jumbo, Ikea, or any other store, Home Assistant sends me the appropriate list via a notification. It’s been a huge help for remembering those little items we always forget! 
If you’re interested I can send you the automation.
Installation & More Information 
For installation instructions and complete documentation:
GitHub - nutteloost/todo-swipe-card: A specialized swipe card for todo lists in Home Assistant with custom styling
Let me know if you have any questions or suggestions.
3 Likes
A new version of the Todo Swipe Card is just released!
Todo Swipe Card v1.6.0
New Features
- Added Advanced CSS Variable System for comprehensive theming and customization:
- Added 25 CSS variables for controlling every aspect of appearance including text colors, background, pagination styling, and animations
- Support for both Home Assistant themes and card-mod styling approaches
- Complete pagination customization with size, positioning, colors, and animation control
- Enhanced typography and spacing controls for accessibility and visual preferences
- Added Custom Card-Mod Integration functionality:
- New custom_card_mod configuration option for advanced styling
- Intelligent merging of internal styles with user-provided customizations
- Support for transition speed and easing customization through CSS variables
Improvements 
- Performance Optimization: Implemented comprehensive performance enhancements and config change detection to reduce resource usage and improve responsiveness
- Memory Management: Enhanced cleanup procedures and better resource management to prevent memory leaks
- Touch/Swipe Interaction: Completely rewritten gesture handling system with improved touch detection
The card looks lovely! I’ll hopefully get about playing with it soon, as it seems very useful for me.
I had a question regarding this. Does it trigger only for specific stores (i.e. ones you gave a distinct zone in Home Assistant), or does it work in general? I’ve been looking into ways to get location bound reminders for myself, for exactly this, but usually they only support a single location. I’d love one that triggers whenever I’m close to any Action, for example. (Hopefully it is not too off topic)
Yes, it only triggers on specific zones, so not on all Actions unfortunately.
This is my automation which sends the shopping list when enetering the zone:
alias: shopping lists
description: ""
mode: single
triggers:
- entity_id: person.[name_1]
event: enter
zone: zone.albert_heijn
id: albert_heijn
trigger: zone
- id: jumbo
entity_id: person.[name_1]
zone: zone.jumbo
event: enter
trigger: zone
- id: hornbach
entity_id: person.[name_1]
zone: zone.hornbach
event: enter
trigger: zone
- id: ikea
entity_id: person.[name_1]
zone: zone.ikea
event: enter
trigger: zone
- id: action
entity_id: person.[name_1]
zone: zone.action
event: enter
trigger: zone
conditions: []
actions:
- choose:
- conditions:
- condition: trigger
id: albert_heijn
- condition: numeric_state
entity_id: todo.albert_heijn
above: "0"
sequence:
- response_variable: albert_heijn_items
data:
status:
- needs_action
target:
entity_id:
- todo.albert_heijn
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Albert Heijn
message: >
{%- for item in albert_heijn_items['todo.albert_heijn']['items']
%}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/ah.png
action: notify.mobile_app
- conditions:
- condition: trigger
id: jumbo
- condition: numeric_state
entity_id: todo.jumbo
above: "0"
sequence:
- response_variable: jumbo_items
data:
status:
- needs_action
target:
entity_id:
- todo.jumbo
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Jumbo
message: |
{%- for item in jumbo_items['todo.jumbo']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/jumbo.png
action: notify.mobile_app
- conditions:
- condition: trigger
id: hornbach
- condition: numeric_state
entity_id: todo.hornbach
above: "0"
sequence:
- response_variable: hornbach_items
data:
status:
- needs_action
target:
entity_id:
- todo.hornbach
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Hornbach
message: |
{%- for item in hornbach_items['todo.hornbach']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/hornbach.jpeg
action: notify.mobile_app
- conditions:
- condition: trigger
id: ikea
- condition: numeric_state
entity_id: todo.ikea
above: "0"
sequence:
- response_variable: ikea_items
data:
status:
- needs_action
target:
entity_id:
- todo.ikea
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Ikea
message: |
{%- for item in ikea_items['todo.ikea']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/ikea.png
action: notify.mobile_app
- conditions:
- condition: trigger
id: action
- condition: numeric_state
entity_id: todo.action
above: "0"
sequence:
- response_variable: action_items
data:
status:
- needs_action
target:
entity_id:
- todo.action
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Action
message: |
{%- for item in ikea_items['todo.action']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/action.png
action: notify.mobile_app
But I think the following would be possible if you add multiple zones for specific stores. For example zone.albert_heijn_1, zone.albert_heijn_2, zone.albert_heijn_3, etc, you can have the folllowing automations which triggers when entering every zone, but filters for albert_heijn_* zones:
alias: shopping lists
description: ""
mode: single
triggers:
# Generic trigger: when person.[name_1] enters ANY zone
- platform: zone
entity_id: person.[name_1]
event: enter
# No specific zone here, so it triggers for ANY zone entry by person.[name_1]
conditions: []
actions:
- choose:
- conditions:
# Check if the entered zone's entity_id starts with 'zone.albert_heijn_'
- condition: template
value_template: "{{ trigger.zone.entity_id.startswith('zone.albert_heijn_') }}"
- condition: numeric_state
entity_id: todo.albert_heijn
above: "0"
sequence:
- response_variable: albert_heijn_items
data:
status:
- needs_action
target:
entity_id:
- todo.albert_heijn
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Albert Heijn
message: >
{%- for item in albert_heijn_items['todo.albert_heijn']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/ah.png
action: notify.mobile_app
I think this would be the best solution if you want to have multiple zones of specific stores and not want to have a super large automation.
1 Like
Todo Swipe Card v2.0.0
Breaking Changes
This version introduces a new entity-centric configuration format that’s much more intuitive and organized. While your existing v1.x configuration will probably partially work, you’ll see a migration warning in the visual editor encouraging you to upgrade. The easiest way to migrate is through the visual editor - simply click the “Auto-Migrate Configuration” button to instantly convert your configuration to the new format while preserving all your existing settings. Please refer to the README file if you want to manually convert your configuration.
New Features
- Entity-Centric YAML Configuration: Each todo list can now be configured individually with its own settings, creating a much cleaner, more intuitive and future proof YAML structure where background images, sorting, and titles are grouped with their respective entities.
- Individual Todo List Titles: Add custom titles that appear above each todo list with highly customizable styling through 13+ new CSS variables for complete visual control of the title text and wrapper.
- Advanced Color Control: New CSS variables specifically for controlling description text and due date colors, including separate styling for overdue items. (closes #3)
Improvements
- Redesigned Visual Editor: Features an accordion-style interface where you can click the arrow next to each todo list to expand and configure it individually, making setup much more organized and user-friendly.
- Smart Visual Feedback: Due date icons now automatically scale with text size, entity restrictions prevent adding duplicate todo lists, and the visual editor provides better button state feedback.
Bug Fixes 
- Fixed Visual Editor Issues: Resolved entity picker loading problems after cache clearing and eliminated the double-click requirement for the ‘+ ADD TODO LIST’ button.
- Fixed Color Inheritance: Due dates and descriptions now properly display colors matching the native todo list card behavior. (closes #3)
Example card including the new title feature:
Checkout the
README for all new configuration options and CSS variables to customize your todo list card.
