Skip to content

Timeflow card v3.2

Choose a tag to compare

View all tags
@Rishi8078 Rishi8078 released this 25 Jan 22:21
v3.2
25c99e8

TimeFlow Card v3.2

New Features

Two New Card Styles: Eventy & Classic Compact

new

TimeFlow now offers three distinct visual styles to match your dashboard aesthetic:

Eventy Style (style: eventy)

A sleek, compact horizontal layout that puts the focus on a single prominent countdown unit. Perfect for event countdowns and minimal dashboards.

💡 Inspired by u/musicjock's dashboard on Reddit

type: custom:timeflow-card
title: "Summer Vacation"
subtitle: "Tue, Jul 15"
target_date: "2026-07-15T00:00:00"
style: eventy
header_icon: mdi:beach
header_icon_color: "#3b82f6"
header_icon_background: "rgba(59, 130, 246, 0.2)"

Classic Compact Style (style: classic-compact)

A horizontal layout that combines the best of both worlds—compact size with a progress circle indicator.

type: custom:timeflow-card
title: Project Deadline
header_icon: mdi:briefcase
progress_color: "#ef4444"
compact_format: false
creation_date: "2026-01-23T23:18:00"
target_date: "2026-01-29T23:19:00"
show_days: true
style: classic-compact

Classic Style (style: classic) - Default

The original vertical layout with full progress circle. No configuration needed—this remains the default.

Header Icons: Add Visual Identity to Your Cards

All card styles now support customizable header icons with full color control:

  • header_icon: MDI icon name (e.g., mdi:cake-variant, mdi:airplane-takeoff)
  • header_icon_color: Icon color (hex, rgb, or CSS variable)
  • header_icon_background: Background color for the icon container

Example with icon styling:

type: custom:timeflow-card
title: "Birthday Party"
target_date: "2026-03-15T18:00:00"
header_icon: mdi:cake-variant
header_icon_color: "#ec4899"
header_icon_background: "rgba(236, 72, 153, 0.15)"

Tip: For a cohesive look, use a semi-transparent version of your icon color as the background (e.g., rgba(236, 72, 153, 0.15)).

Bug Fixes

Fixed: "Starting..." Display Issue (#33)

Previously, when a countdown had just begun or when all time units were disabled except one that hadn't started counting, the card would display "Starting..." instead of useful information.

Now fixed: The card automatically falls back to the highest available time unit instead of showing "Starting...". This ensures you always see meaningful countdown information.

Notes

  • Breaking Changes: None
  • Browser Cache: Clear your browser cache after updating to ensure new styles load correctly
  • Compatibility: All existing configurations continue to work unchanged
Assets 3
Loading