Strip Card

[cataseven]

Hi Please share your feedbacks. Thanks.

GitHub - cataseven/Strip-Card: This custom card displays multiple Home Assistant...

Features

• UI Editor
• Horizontal and vertical scrolling layouts
• Continuous or single‑cycle scrolling
• Direction control (left / right)
• Badge/Chip display mode
• Per‑entity actions: tap / hold / double‑tap
• Supports more-info, toggle, navigate, url, assist, call-service
• Full template support for value, colors, icons, titles, visibility & more
• Per‑entity color, icon, attribute & unit overrides
• Conditional rendering via visible_if
• Repeat items from attribute arrays via repeat_on (alerts, todos, forecasts)
• Regex‑based friendly name replacement
• Full‑width responsive mode with sidebar & scrollbar compensation
• Optional fading edges and hover‑pause
• Transparent mode
• Works with states() style HA templating

[Johan_L (Johan)]

Great card now I can eliminate even more custom crap I’ve (ai) made. I’m using a html template card at the moment for my ticker, but this could be a great replacement.

At the moment I’m missing only one function, that is selecting a background color based on sensor state and possibly set “priorities” so that if one sensor is RED and another is GREEN or YELLOW the RED background color has priority.

[luha68 (Lutz)]

Wow, this is great! But f or some unclear reasons I can’t make it fill the entire with (see screenshot). Any idea how to fix this?

[cataseven]

Hi @luha68

Can you please share yaml? Also type of the dashboard? Sections, masonary layout etc.

[cataseven]

Hmm, nice idea. I will try to implement it on the next release

[luha68 (Lutz)]

Sorry, I knew instantly that I forgot some basic information here… This is my “standard” dashboard, running on a 16 inch Acer P16 tablet. You see the ticker on the button - it doesn’t fill the entire screen no matter how wide I set it. See yaml-part below the screenhot (I hope the code is entered in the right way here).

EDIT: just found the reason - the card should not be placed in the first column. Moved it to the right and there we go with the full with ticker! Yet again thank you very much for this useful card!

[Johan_L (Johan)]

Is it possible to hide the ticker when it’s empty?

[cataseven]

Hi @Johan_L

You can try below templates for below example

visible_if: “{{ float(states(entity)) > 0 }}”

visible_if: “{{ is_state(entity, ‘on’) }}”

visible_if: “{{ state_attr(entity, ‘temperature’) !== undefined }}”

visible_if: “{{ states(entity) not in [‘unknown’, ‘unavailable’, ‘’] }}”

visible_if: “{{ states(entity) !== ‘unknown’ && states(entity) !== ‘unavailable’ && states(entity) !== ‘’ }}”

visible_if: “{{int(states(‘sensor.temperature’))<1}}”

type: custom:strip-card
title: ""
entities:
  - entity: sensor.temperature
    name: Temp
    visible_if: HERE YOU CAN USE TEMPLATES
  - entity: zone.home
    name: People at Home
duration: 20
scroll_direction: left
separator: •
separator_color: var(--disabled-text-color)
separator_font_size: 14px
empty_message: No entities passed the visible_if conditions
font_size: 14px
card_width: 400px
card_height: 50px
border_radius: 0px
show_icon: true
pause_on_hover: false
continuous_scroll: true
vertical_scroll: false
vertical_alignment: stack
fading: true
transparent: false
full_width: false
badge_style: false

[cataseven]

New update is available

Release ✨ New Features & 🔧 Improvements · cataseven/Strip-Card

[luha68 (Lutz)]

Hi cataseven

Thank you for the update! I still have the issue to get the full with in my four columns dashboard, no matter what I do. I’ve shifted it between column two and three - in two it has a blank area on the right, in column three it has the blank part on the left (see screenshot). Can’t see any issue in the YAML. As stated above the issue is available in the browser (current Firefox) as well as in Fully Kiosk on the Acer P16 Tablet I am using for the dashboard. Can you check where I am wrong? Any help is welcome!

[Johan_L (Johan)]

Hi @cataseven I probably didn’t explain it correctly

The visibility templates of individual items based on sensor state /attr state is working great but I would like to set the visibility of the card to off when all of the entities are empty.

[cataseven]

hi @luha68

Can you please open a bug on github with sample yaml code? It will be great if you can also tell your dashboard layout type. If you are using Sections type dashboard please write also it’s yaml WITHOUT PERSONAL PRIVATE INFO.

Thanks.

[cataseven]

@Johan_L I will look into this

[cataseven]

@luha68 I am not sure If I could reproduce the same issue on my dashboard but I managed to card width to full screen with step below

Go to section options and make width highest

Go to Layout tab and toggle Full Width option to true

Then go to card options to Toggles tab and toggle on Full Width

Result

[cataseven]

@Johan_L @luha68

New update available hoping fix the width issue and the hide card feature.

[luha68 (Lutz)]

Okay, okay, okay - that Layout tab setting did the trick. I think I know why I didn’t see it: when in config the preview is running over that tab:

[Johan_L (Johan)]

Both seems to work fine, thanks for the fast work.

[Johan_L (Johan)]

@cataseven any idea what can cause the ticker to stay empty on chromium?

I see the card & background color (full width) my best guess is that the browser misses something to render it.

Tested it on 2 debian systems, the rest of the dashboard cards work fine.

Also the ticker works and is active when I use firefox and also when I use chrome on win11. So it should be browser related.

[cataseven]

Hi @Johan_L

Can you please share yaml code and a screenshot?

[Johan_L (Johan)]

@cataseven it took a few days but here is the screenshot and yaml.

Strange thing is that it’s only on chromium.

type: custom:strip-card
title: ""
entities:
  - name: BRAND
    unit: ""
    attribute: ""
    repeat_on: ""
    tap_action:
      action: none
    entity: binary_sensor.rookmelders
    icon: mdi:smoke-detector-variant
    name_color: red
    icon_color: RED
    value_color: black
    visible_if: "{{ not is_state('binary_sensor.rookmelders', 'off') }}"
    value_template: >-
      {{ 'Geen rook gedetecteerd' if is_state('binary_sensor.rookmelders',
      'off') else 'Rook gedetecteerd in zone 1' if
      is_state('binary_sensor.rookmelders', 'on1') else 'Rook gedetecteerd in
      zone 2' if is_state('binary_sensor.rookmelders', 'on2') else 'Rook
      gedetecteerd in zone 3' if is_state('binary_sensor.rookmelders', 'on3')
      else 'Rook gedetecteerd in zone 4' if
      is_state('binary_sensor.rookmelders', 'on4') else 'Rook gedetecteerd in
      zone 5' if is_state('binary_sensor.rookmelders', 'on5') }}
  - entity: binary_sensor.knmi_warning
    name: WEER ALARM
    unit: ""
    attribute: description
    value_template: ""
    repeat_on: ""
    icon: mdi:weather-cloudy-alert
    visible_if: "{{ not is_state('binary_sensor.knmi_warning', 'off') }}"
    name_color: >-
      {{ {'groen': '#00c800', 'geel': '#ffd700', 'oranje': '#ff8c00', 'rood':
      '#ff0000'}.get(state_attr('binary_sensor.knmi_warning', 'code'),
      '#00c800') }}
    icon_color: >-
      {{ {'groen': '#00c800', 'geel': '#ffd700', 'oranje': '#ff8c00', 'rood':
      '#ff0000'}.get(state_attr('binary_sensor.knmi_warning', 'code'),
      '#00c800') }}
    value_color: black
    tap_action:
      action: none
  - entity: switch.slaapkamer_js_schakelaar_wandlampen
    visible_if: "{{ not is_state('switch.slaapkamer_js_schakelaar_wandlampen', 'off') }}"
duration: "40"
scroll_speed: "65"
scroll_direction: left
separator: —
separator_color: black
separator_font_size: 20px
separator_font_weight: bold
empty_message: false
font_size: 36px
card_width: 400px
card_height: 60px
border_radius: 0px
show_icon: true
pause_on_hover: false
pause_on_click: false
hide_when_empty: true
continuous_scroll: true
vertical_scroll: false
vertical_alignment: stack
fading: false
transparent: false
full_width: true
badge_style: false
badge_background: var(--primary-background-color)
badge_label_color: var(--secondary-text-color)
badge_value_color: var(--primary-text-color)
badge_height: 28px
badge_font_size: 12px
badge_icon_size: 16px
name_color: var(--primary-text-color)
value_color: var(--primary-color)
unit_color: var(--secondary-text-color)
icon_color: var(--primary-text-color)
grid_options:
  columns: full
visibility:
  - condition: state
    entity: switch.slaapkamer_js_schakelaar_wandlampen
    state: "on"
card_mod:
  style: |
    ha-card {
      margin-top: -24px;
      margin-bottom: -40px;
      padding-top: 0px;
      padding-bottom: 0px;
    }