Lovelace: Flipdown Timer card

Lovelace : Flipdown Timer card

  • Set timer duration on the card
  • Display timer
  • Flip together if you have multiple cards

Please visit github for installation and usage instruction.

It’s still in progress and may buggy.
Let me know if you have any questions or issues!


Installed, no issues, no known bugs. Works fine. Thanks!

Well, it still works, but generates some errors.

Made an issue here:

The card is working great.

I noticed a small typo on the github page. Under the configuration it is “show_hours” but in the example it is called “show_hour”.
The latter is correct in order to show the hours in the card.

I think the former is right so it should be a breaking(?) change

I created an automation voice notification when the timer completes. It works perfectly.

Would you please share, how?

Create automation:

- id: '1636820385022'
  alias: Minutka
  description: ''
  - platform: state
    entity_id: timer.minutka
    from: active
    to: idle
  condition: []
  - service: tts.cloud_say
      message: Čas minutky vypršel
      entity_id: media_player.picore_tts
  mode: single
1 Like

How to make a timer entity for this to work?


# Timers
    duration: "00:06:00"
    duration: "00:08:00"
    duration: "00:04:00"
1 Like

This all looks interesting.

Very much like to set timers via Alexa. But would be nice to display on my dashboard.

Any way to set and start a timer from Alexa (maybe via the Alexa media player)


Also found out that the Timer can be set from the Settings-“Automation & Scenes”-Helpers.

Like this:

Here is the timer configuration:

This will give us a timer.egg entity which can be used as:

     - "active"
1 Like

Add to show the card only when it is active!

1 Like

Off topic: What theme are you using @poraschaudhary raschaudhary ? and what graph lovelace card is that?

1 Like

It’s a mod of theme Midnight
The Lovelace graph card is ‘ApexCharts card’.

This is great. I am using this to show my alexa kitchen timer (so it is more visual and I don’t have to ask my alexa how much time is left all the time).

My code looks like this:

  - alias: Kitchen Echo Timer
    - entity_id: sensor.kitchen_next_timer
      from: unavailable
      platform: state
    - data_template:
        duration: >
          {{(as_timestamp(states('sensor.kitchen_next_timer')) - as_timestamp(now())) | timestamp_custom("%H:%M:%S", false)}}
      entity_id: timer.kitchen_echo
      service: timer.start
  - alias: TeardownTimer
    - entity_id: sensor.kitchen_next_timer
      platform: state
      to: unavailable
    - data: {}
      entity_id: timer.kitchen_echo
      service: timer.cancel

From one side it works great. However, if I click the stop or reset buttons it resets my timer but does nothing to my alexa timer. Is there a way to get rid of those stop/reset buttons ?

You can hide buttons. Check the github page.

Hi all

I’ve been using the flipdown card for some time now and it works like a charm.
For a new project, I would like to be able to change the font family of the digits of the timer to a custom font. I’ve already added this font to HA and can use it for my other dahsboards and in my custom themes, so it is available.
I’ve tried using a custom theme, but this doesn’t seem to affect the flipdown card font.
I’ve tried changing the fonts directly in the .flipdown.flipdown__theme-hass element from the flipdown-timer-card.js file, but this also doesn’t work (even after several reboots).
Finally I’ve tried using card-mod to change the font-family directly in the card, but this doesn’t work either. In the browser inspector I can see a .flipdown.flipdown__theme-hass element, defined as a contructed stylesheet that takes precedence over thee .flipdown.flipdown__theme-hass element style defined with card-mod.
My card-mod code inside the card (tried both at the root and by defining the ha-card element):

    .: |
      .flipdown.flipdown__theme-hass {
          font-family: Roboto;
          font-weight: lighter;
type: custom:flipdown-timer-card
entity: timer.tijd_escape

which gives the following in the browser inspector:

constructed stylesheet
.flipdown.flipdown__theme-hass {
    font-family: sans-serif;
    font-weight: bold;
.flipdown.flipdown__theme-hass {

font-family: Roboto;
font-weight: lighter;

And now, I’m out of ideas.
Does anyone know how this could be achieved?


Your first try would work, if you replaced all “sans-serif” to your font in js file.
I think you just had to hard refresh(shift/ctrl + f5) rather than reboot.

or try this(add !important)

    .: |
      .flipdown.flipdown__theme-hass {
          font-family: Roboto !important;
          font-weight: lighter !important;
type: custom:flipdown-timer-card
entity: timer.tijd_escape