button_card_template_container.yaml

button_card_templates:
  container:
    styles:
      card:
        - padding: 1px
        - background-color: rgba(0,0,0,0)
        - box-shadow: 0px 0px 0px 0px
      name:
        - padding: 0.4em
        - margin-left: 0.3em
        - width: 100%
        - text-align: left
        - font-size: 22px
        - filter: brightness(90%)
      grid:
        - grid-template-areas: '"i" "n" "buttons"'
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr min-content min-content
      custom_fields:
        buttons:
          - background-color: rgba(0,0,0,0)
          - margin: 0
          - padding: 0.3em

dashboard.yaml

type: custom:button-card
template: container
name: |
  [[[
      return "KIDS | " + "<span style='font-size:13px;vertical-align:middle'>" + states["sensor.bedroom_temperature"].state + "&#176;</span>" +"<span style='font-size:13px;vertical-align:middle'> | "+ states["sensor.bedroom_humidity"].state + "% Humidity</span><span style='font-size:12px;vertical-align:middle;float:right;margin:8px;'>More</span>";;
  ]]]
tap_action:
  action: navigate
  navigation_path: /lovelace/finley
custom_fields:
  buttons:
    card:
      type: horizontal-stack
      cards:
        - type: custom:button-card
          entity: light.finley_ceiling_fan
          icon: mdi:lightbulb-group
          aspect_ratio: 1/1
          name: MAIN
          color: goldenrod
          styles:
            card:
              - border-radius: 10%
              - padding: 5%
              - color: null
              - font-size: 12px
              - text-transform: capitalize
            grid:
              - grid-template-areas: '"i temp" "n n" "tempy tempy"'
              - grid-template-columns: 1fr 1fr
              - grid-template-rows: 1fr min-content min-content
            name:
              - font-weight: bold
              - font-size: 13px
              - align-self: middle
              - justify-self: start
              - padding-bottom: 4px
            img_cell:
              - justify-content: start
              - align-items: start
              - margin: none
            icon:
              - width: 80%
              - margin-top: '-10%'
            custom_fields:
              tempy:
                - padding-bottom: 2px
                - align-self: middle
                - justify-self: start
          custom_fields:
            temp: |
              [[[
                if (states['binary_sensor.mancave_motion'].state == 'on')
                  return `<ha-icon icon="mdi:motion-sensor"></ha-icon>`;
                return `<ha-icon icon="mdi:motion-sensor-off" style="width: 18x; height: 18px;color:gray"></ha-icon>`;
              ]]]
            tempy: |
              [[[
                return `<span><span style="color: var(--text-color-sensor);">${states['light.finley_ceiling_fan'].state}</span></span>`
              ]]]
          state:
            - value: 'off'
              styles:
                card:
                  - filter: brightness(94%)
        - type: custom:button-card
          entity: light.finley_lamp
          icon: mdi:lamp
          aspect_ratio: 1/1
          name: LAMP
          color: goldenrod
          hold_action:
            action: call-service
            confirmation:
              text: Slowly turn light on?
            service: script.finleylampslowturnon
          styles:
            card:
              - border-radius: 10%
              - padding: 10%
              - color: null
              - font-size: 12px
              - text-transform: capitalize
            grid:
              - grid-template-areas: '"i temp" "n n" "tempy tempy"'
              - grid-template-columns: 1fr 1fr
              - grid-template-rows: 1fr min-content min-content
            name:
              - font-weight: bold
              - font-size: 13px
              - align-self: middle
              - justify-self: start
              - padding-bottom: 4px
            img_cell:
              - justify-content: start
              - align-items: start
              - margin: none
            icon:
              - width: 80%
              - margin-top: '-10%'
            custom_fields:
              tempy:
                - padding-bottom: 2px
                - align-self: middle
                - justify-self: start
          custom_fields:
            tempy: |
              [[[
                return `<span><span style="color: var(--text-color-sensor);">${states['light.finley_lamp'].state}</span></span>`
              ]]]
          state:
            - value: 'off'
              styles:
                card:
                  - filter: brightness(94%)
        - type: custom:button-card
          entity: fan.red_series_fan_light_switch_2
          icon: mdi:fan
          aspect_ratio: 1/1
          name: FAN
          color: goldenrod
          styles:
            card:
              - border-radius: 10%
              - padding: 10%
              - color: null
              - font-size: 12px
              - text-transform: capitalize
            grid:
              - grid-template-areas: '"i temp" "n n" "tempy tempy"'
              - grid-template-columns: 1fr 1fr
              - grid-template-rows: 1fr min-content min-content
            name:
              - font-weight: bold
              - font-size: 12px
              - align-self: middle
              - justify-self: start
              - padding-bottom: 4px
            img_cell:
              - justify-content: start
              - align-items: start
              - margin: none
            icon:
              - width: 80%
              - margin-top: '-10%'
            custom_fields:
              tempy:
                - padding-bottom: 2px
                - align-self: middle
                - justify-self: start
          hold_action:
            action: more-info
          custom_fields:
            tempy: |
              [[[
                return `<span><span style="color: var(--text-color-sensor);">${states['fan.red_series_fan_light_switch_2'].attributes.percentage}</span></span>`
              ]]]
          state:
            - value: 'off'
              styles:
                card:
                  - filter: brightness(94%)
            - value: 'on'
              spin: true
        - type: custom:button-card
          entity: switch.tasmota_3
          icon: mdi:fire-off
          aspect_ratio: 1/1
          name: HEATER
          styles:
            card:
              - border-radius: 10%
              - padding: 10%
              - color: null
              - font-size: 12px
              - text-transform: capitalize
            grid:
              - grid-template-areas: '"i temp" "n n" "tempy tempy"'
              - grid-template-columns: 1fr 1fr
              - grid-template-rows: 1fr min-content min-content
            name:
              - font-weight: bold
              - font-size: 12px
              - align-self: middle
              - justify-self: start
              - padding-bottom: 4px
            img_cell:
              - justify-content: start
              - align-items: start
              - margin: none
            icon:
              - width: 80%
              - margin-top: '-10%'
            custom_fields:
              tempy:
                - padding-bottom: 2px
                - align-self: middle
                - justify-self: start
          custom_fields:
            tempy: |
              [[[
                return `<span><ha-icon
                      icon="mdi:thermometer"
                      style="width: 12px; height: 12px; color: gra;">
                      </ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.bedroom_temperature'].state}&#176;</span></span>`
              ]]]
          state:
            - value: 'off'
              styles:
                card:
                  - filter: brightness(94%)
            - value: 'on'
              icon: mdi:fire
              styles:
                icon:
                  - color: red