Custom Light and Scene cards using Button Card

Share your Projects! Dashboards & Frontend
, , , ,
1

I decided to make some custom cards to use for a simple yet intuitive wall panel dashboard. They look great and work well. Both of them require the button-card (GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant) hacs integration installed
When I figure out how to make hacs dashboard integrations, I’ll release them there
Light (Horizontal)

type: custom:button-card
entity: light.entity
name: Light
show_state: true
state:
  - value: "on"
    styles:
      card:
        - background-color: rgba(247, 217, 89, 0.15)
        - border: "2px solid #d4b627"
      icon:
        - color: "#FFF"
      name:
        - color: "#FFF"
      state:
        - color: "#FFF"
  - value: "off"
    styles:
      card:
        - background-color: "#1d1d1d"
        - border: "2px solid #808080"
      icon:
        - color: "#444444"
      name:
        - color: "#666666"
      state:
        - color: "#666666"
styles:
  card:
    - border-radius: 5px
    - box-shadow: 0 3px 6px rgba(0,0,0,0.16)
    - padding: 8px
    - height: 90px
    - position: relative
    - overflow: hidden
  grid:
    - grid-template-areas: "\"i\" \"n\" \"s\""
    - grid-template-columns: 1fr
    - grid-template-rows: 30px 1fr min-content
  name:
    - justify-self: center
    - font-weight: bold
    - font-size: 14px
    - margin-top: 5px
  state:
    - font-size: 12px
    - justify-self: center
  img_cell:
    - justify-content: center
    - align-items: center
  icon:
    - color: "#444444"
    - width: 30px
    - height: 30px
    - margin-top: 5px
tap_action:
  action: toggle
hold_action:
  action: more-info

Light (Vertical)

type: custom:button-card
entity: light.entity
name: Light
show_state: true
state:
  - value: "on"
    styles:
      card:
        - background-color: rgba(247, 217, 89, 0.15)
        - border: "2px solid #d4b627"
      icon:
        - color: "#FFF"
      name:
        - color: "#FFF"
      state:
        - color: "#FFF"
  - value: "off"
    styles:
      card:
        - background-color: "#1d1d1d"
        - border: "2px solid #808080"
      icon:
        - color: "#444444"
      name:
        - color: "#666666"
      state:
        - color: "#666666"
styles:
  card:
    - border-radius: 5px
    - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16)
    - padding: 8px
    - width: 114px
    - height: 360px
    - display: flex
    - flex-direction: column
    - justify-content: center
    - align-items: center
    - gap: 8px
  icon:
    - width: 60px
    - height: 60px
    - color: "#444444"
  name:
    - font-weight: bold
    - font-size: 16px
    - text-align: center
  state:
    - font-size: 12px
    - color: "#666666"
tap_action:
  action: toggle
hold_action:
  action: more-info

Scene


type: custom:button-card
entity: scene.movie
show_state: false
styles:
  card:
    - border-radius: 5px
    - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16)
    - padding: 8px
    - width: 112px
    - height: 176px
    - display: flex
    - flex-direction: column
    - justify-content: center
    - align-items: center
    - gap: 8px
    - background-color: "#1d1d1d"
    - border: "2px solid #808080"
  icon:
    - width: 60px
    - height: 60px
  name:
    - font-weight: bold
    - font-size: 16px
    - text-align: center
tap_action:
  action: toggle
hold_action:
  action: more-info