HA - custom:button-card

type: custom:button-card
entity: binary_sensor.d_0_front_door
name: Front Door
show_last_changed: true
entity_picture: /local/contactsensor.png
show_entity_picture: true
aspect_ratio: 1/1
show_state: true
show_label: true
styles:
  card:
    - padding: 10%
  grid:
    - grid-template-areas: '"i" "n" "s" "l"'
    - grid-template-columns: 1fr
    - grid-template-rows: 1fr min-content min-content
  img_cell:
    - align-items: start
  icon:
    - width: 40px
    - margin: auto
  name:
    - justify-self: start
    - font-weight: 300
    - font-size: 15px
    - padding-bottom: 3px
  state:
    - justify-self: start
    - font-size: 11px
    - padding-bottom: 3px
  label:
    - justify-self: start
    - font-size: 10px
state:
  - value: 'on'
    styles:
      card:
        - filter: opacity(50%)
        - height: 130px
        - padding: 10px
      grid:
        - grid-template-areas: '"i" "n" "s" "l"'
        - grid-template-columns: 1fr
      icon:
        - align-self: start
        - text-align: start
        - width: 45px
        - margin: auto
        - filter: grayscale(100%)
      name:
        - justify-self: start
        - font-weight: 300
        - font-size: 15px
        - padding-bottom: 3px
      state:
        - justify-self: start
        - font-size: 13px
        - padding-bottom: 3px
      label:
        - justify-self: start
        - font-size: 12px