5 More Frontend HACS for Home Assistant

5MoreHacs.yaml

# IF YOU MAKE USE OF THIS DOCUMENT,
# Let me know in the comments of my video. That way I will know if it's worthwhile putting this together.
# Cheers,  Mark

# SIMPLE VACUUM CARD
type: custom:vacuum-card
entity: vacuum.your_vacuum
image: default
compact_view: false
show_name: true
show_status: true
show_toolbar: true


# Simple Fold-Entity-Row
type: custom:fold-entity-row
head: light.light_1
entities:
  - light.light_1
  - light.light_2
  - light.light_3
  
# Fold-Entity-Row Group
type: custom:fold-entity-row
head: group.downstairs_lights
label: Group Example

# Nested Fold-Entity-Row
type: custom:fold-entity-row
head:
  type: section
  label: Nested Example
entities:
  - light.light_3
  - type: custom:fold-entity-row
    head: light.light_1
    entities:
      - light.light_2
      - type: custom:fold-entity-row
        head: group.downstairs_lights


# Fold-Entity-Row with Padding
type: custom:fold-entity-row
head:
  type: section
  label: Padding Example
padding: 50
entities:
  - light.light_1
  - light.light_2
  - light.light_3

# Fold-Entity-Row that defaults to Open
type: custom:fold-entity-row
head:
  type: section
  label: Default Open
open: true
entities:
  - light.light_1
  - light.light_2
  - light.light_3

# Digital Clock - Its that simple
type: custom:digital-clock

# RGB Lights with all covered examples
type: entities
show_header_toggle: false
entities:
  - entity: light.light_2
  - type: custom:rgb-light-card
    entity: light.light_2
    colors:
      - rgb_color:
          - 234
          - 136
          - 140
        brightness: 255
        transition: 1
      - color_name: yellow
        brightness: 200
        transition: 1
      - rgb_color:
          - 136
          - 198
          - 237
        brightness: 150
        transition: 1
      - rgb_color:
          - 111
          - 226
          - 254
        brightness: 100
        transition: 1
      - icon_color: 'linear-gradient(15deg, #0250c5, #d43f8d)'
      - icon_color: >-
          center/120%
          url('https://www.home-assistant.io/images/favicon-192x192.png')
      - icon_color: 'linear-gradient(1deg, #0210c5, #e12f8d)'
        label: '<span style="color: #609fc6">Cool Label</span>'
      - icon_color: >-
          center no-repeat
          url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22mdi-lightbulb%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M12%2C2A7%2C7%200%200%2C0%205%2C9C5%2C11.38%206.19%2C13.47%208%2C14.74V17A1%2C1%200%200%2C0%209%2C18H15A1%2C1%200%200%2C0%2016%2C17V14.74C17.81%2C13.47%2019%2C11.38%2019%2C9A7%2C7%200%200%2C0%2012%2C2M9%2C21A1%2C1%200%200%2C0%2010%2C22H14A1%2C1%200%200%2C0%2015%2C21V20H9V21Z%22%20%2F%3E%3C%2Fsvg%3E"),
          #EA888C
      - icon_color: >-
          center no-repeat
          url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22mdi-lightning-bolt%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%2352CE2B%22%20d%3D%22M11%2015H6L13%201V9H18L11%2023V15Z%22%20%2F%3E%3C%2Fsvg%3E"),
          #3E3A3A
state_color: false