Skip to content

Latest commit

 

History

History
106 lines (79 loc) · 2.78 KB

README.md

File metadata and controls

106 lines (79 loc) · 2.78 KB
Raw

Vertical Style Card

Vertical Style is a custom Lovelace card for Home Assistant who let you group diferent cards in one vertical-stack card, with diferent style options, like title, card color, to have a border or not. This is very useful for cards like custom:button-card or picture-entity, giving the option for add a title and grouping in a column.

Vertical Style Examples

Options

Name Type Default Description
type string Required custom:vertical-style-card
cards list Required List of cards
title string Optional Card title
style object Optional Options: font_size, border,background_color

Style Object

Name Type Default Options
font_size string Optional Example: 20px
border boolean true Show or not the card border
background_color string Optional Options: rgb, var(--), hex

Installation

  1. Install the vertical-style-card card by copying vertical-style-card.js to <config directory>/www/vertical-style-card.js

Bash:

wget https://raw.githubusercontent.com/matisaul/vertical-style-card/master/vertical-style-card.js
mv vertical-style-card.js /config/www/
  1. Link vertical-style-card inside you ui-lovelace.yaml
resources:
  - url: /local/vertical-style-card.js?v=0.1
    type: js
  1. Add a custom card in your ui-lovelace.yaml

To add vertical-style-card to custom_updater:

custom_updater:
  card_urls: 
    - https://raw.githubusercontent.com/matisaul/vertical-style-card/master/tracker.json

Example

- type: custom:vertical-style-card
  title: Scenes
  style:
    font_size: 18px
    border: false
    background_color: var(--secondary-background-color)
  cards:
    - type: horizontal-stack
      cards:
        - type: picture-entity
          image: /local/images/love.png
          entity: scene.romantic
          name: Romantic
          show_state: false
          tap_action: toggle
        - type: picture-entity
          image: /local/images/soccer.png
          entity: scene.soccer
          name: Soccer
          show_state: false
          tap_action: toggle 
    - type: horizontal-stack
      cards:
        - type: picture-entity
          image: /local/images/party.png
          entity: scene.party
          name: Party
          show_state: false
          tap_action: toggle
        - type: picture-entity
          image: /local/images/netflix.png
          entity: scene.netflix
          name: Netflix
          show_state: false
          tap_action: toggle

Credits