Vertical Stack In Card

Vertical Stack In Card lets you you to group multiple cards into a single sleek card in the Home Assistant UI.

Options

Name	Type	Default	Description
type	string	Required	custom:vertical-stack-in-card
cards	list	Required	List of cards
title	string	Optional	Card title
horizontal	boolean	Optional	Default: false
styles	object	Optional	Adds custom CSS directives to child cards

Installation

VSIC is available in HACS (Home Assistant Community Store).

1. Download the card

Install the VSIC by copying vertical-stack-in-card.js to <config directory>/www/vertical-stack-in-card.js, or via bash:

wget https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/master/vertical-stack-in-card.js
mv vertical-stack-in-card.js /config/www/

2. Link the card to your Lovelace UI

The manual way:

Link vertical-stack-in-card inside your ui-lovelace.yaml

resources:
  - url: /local/vertical-stack-in-card.js?v=0.4.4
    type: js

Through the GUI:

Alternatively, with Home Assistant 2021.3 or later, click here. Using My Home Assistant, that will bring up the GUI for Resources. Click the Plus to add a new resource. The url is the path to your downloaded file. Replace <config directory>/www/ with /local/.

Finish by clicking "Create" and refresh your browser.

3. Use the card somehere.

Add a custom card in your ui-lovelace.yaml.

Example

type: 'custom:vertical-stack-in-card'
title: My Card
cards:
  - type: glance
    entities:
      - sensor.temperature_sensor
      - sensor.humidity_sensor
      - sensor.motion_sensor
  - type: entities
    entities:
      - switch.livingroom_tv
      - entity: script.livingroom_receiver
        name: Receiver
      - switch.livingroom_ac

Credits

• ofekashery
• ciotlosm
• thomasloven