information_card_style_2.yaml

type: custom:stack-in-card
cards:
  - type: custom:button-card
    entity: sensor.daily_energy_usage
    show_icon: false
    name: Electrcity
    styles:
      card:
        - border-radius: 20px
        - border-style: none
      grid:
        - grid-template-areas: '"icon_cells n" "icon_cells value"'
        - grid-template-columns: min-content 1fr
        - grid-template-rows: min-content min-content
      name:
        - align-self: start
        - font-weight: normal
        - font-size: 65%
        - margin-left: 5px
        - margin-top: 10px
        - justify-self: start
        - filter: opacity(60%)
      custom_fields:
        icon_cells:
          - align-self: center
          - margin-left: 15px
          - margin-top: 4px
          - color: ato
        value:
          - align-self: start
          - justify-self: start
          - font-weight: bold
          - font-size: 14px
          - margin-left: 4px
          - margin-top: 4px
          - margin-bottom: 10px
    custom_fields:
      icon_cells: |
        [[[
          return `<ha-icon
            icon="ssb:flash"
            style="width: 30px; height: 30px; color: auto;">
           </ha-icon> 
           `
        ]]]
      value: |
        [[[
          return `<span"> 
            ${states['sensor.daily_energy_usage'].state}kWh</span>
            `

        ]]]
card_mod:
  style: |
    ha-card {
      border-radius: 20px;
      border-style: none;
      box-shadow: 0px 0px 10px -9px black;

    }