Lovelace: threshold-stack card

Share your Projects! Dashboards & Frontend
1

Hello HA community! Here’s a custom card I made after posting in the Discord and finding no card that fit my needs. It makes cards appear as either a horizontal-stack or vertical-stack, depending on your screen’s width. Works best if you use it with vertical-stack nested underneath, for example all of your lights in a vertical-stack or each room in their own vertical-stack.

Behold!

Installation

Install threshold-stack.js as a module.

resources:
  - url: /local/threshold-stack.js
    type: module

Usage

type: custom:threshold-stack
threshold: <pixels>px
cards:
  ...

If the device is at least pixels pixels wide, cards will be displayed as a horizontal-stack.
If the device is less than pixels pixels wide, cards will be displayed as a vertical-stack.

Options

  • threshold Threshold in pixels for horizontal-stack. Default: 800px
  • cards Required Cards to render; works particularly well as a vertical-stack container

Check out the code on Github:

5 Likes
2

Thank you! This is the exact thing I have been looking for the last couple days.