How can change where text is being displayed on this timer card?

Intelligent_Home · April 13, 2025, 11:08pm

I created this timer card but somehow I cant find a way to move the “time remaining” from the timer upwards so its above the progress bar (or as an alternative: in the foreground of the bar).

I’d also like the Icon to be displayed to the left of the two texts “Washing Machine” and the state of “sensor.waschmaschine_program” so the card’s height can be reduced. Any recommendations?

Currently I am using the “vertical-stack-in-card”, “custom:button-card” and “custom:timer-bar-card” to make it work.

type: custom:vertical-stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.waschmaschine_program
    name: Washing Machine
    icon: mdi:washing-machine
    show_label: true
    label: |
      [[[
        return states['sensor.waschmaschine_program'].state;
      ]]]
    styles:
      icon:
        - width: 20px
        - color: "#03A9F4"
      img_cell:
        - justify-content: flex-start
        - margin-top: 4px
      card:
        - height: 80px
        - padding: 12px 0 12px 18px
      name:
        - justify-self: start
        - font-size: 16px
        - color: "#ffff"
        - opacity: 1
        - padding-top: 5px
      label:
        - justify-self: start
        - font-size: 14px
        - opacity: 0.75
        - font-weight: 400
        - margin-bottom: 0px
  - type: custom:timer-bar-card
    entity: timer.washingmachine
    bar_height: 120px
    bar_foreground: "#64b5f6"
    bar_background: "#3C3C3C"
    text_width: 50.01px
    layout: full_row
    invert: false
    active_state:
      - active
    styles:
      card:
        - padding: 0px 15px 10px 15px
        - margin-top: "-10px"
        - border-radius: 10px