Description:

A third part addon called button-card is a highly customizable component the supports JavaScript and templates. I use it for multiple things, including displaying the status of components in my home theater. This snippet is the template I use for displaying statuses in my control panels and theater remote.

  large_status:
    variables:
      site_var: Label
      entity_var: Entity
      name_var: Name
      state_var: State
      background_var: BackgroundColor
      color_var: IconColor
    layout: icon_label
    label: '[[[ return variables.label_var; ]]]'
    show_name: true
    show_label: true
    styles:
      card: null
      label:
        - justify-self: left
        - align-self: center
        - padding-left: 10px
        - font-weight: bold
        - font-size: 15px
        - font: Ubuntu,sans-serif
      name:
        - justify-self: left
        - align-self: center
        - padding-left: 10px
        - font-size: 12px
        - color: rgba(155, 155, 155, 1)
        - font: Ubuntu,sans-serif
        - font-weight: bold
      grid:
        - grid-template-areas: '"i l" "i n" "i s"'
        - grid-template-columns: 1fr 80%
        - padding: 3px
        - padding-left: 10px
      img_cell:
        - border-radius: 20px
        - height: 40px
        - width: 40px
        - background: rgba(50, 61, 37, 1)
      icon:
        - width: 50%
        - height: 50%
        - padding-left: 1px
        - padding-bottom: 3px
        - color: rgba(139, 195, 74, 1)