SingleButtonCardAlert.yaml

card:
  name: '[[[return states["sensor.active_alerts"].attributes.name]]]'
  icon: '[[[return states["sensor.active_alerts"].attributes.icon]]]'
  show_state: '[[[return states["sensor.active_alerts"].attributes.label != '']]]'
  show_name: '[[[return states["sensor.active_alerts"].attributes.name != '']]]'
  show_icon: '[[[return states["sensor.active_alerts"].attributes.icon != '']]]'
  show_label: '[[[return states["sensor.active_alerts"].attributes.label != '']]]'
  label: '[[[return states["sensor.active_alerts"].attributes.label]]]'
  entity: null
  state_display: |
    [[[
      if (states["sensor.active_alerts"].attributes.alertcount != null && states["sensor.active_alerts"].attributes.alertcount != '1')
        return states["sensor.active_alerts"].attributes.alertcount;
      else 
        return '';
    ]]]
  tap_action:
    action: nothing
    multi_calls: |
      [[[
        hass.callService(
          "homeassistant",
          "toggle",
          { entity_id: states["sensor.active_alerts"].attributes.entity }
        );
        hass.callService(
          "homeassistant",
          "turn_on",
          { entity_id: "input_boolean.trigger_alert_update" }
        );
      ]]]
  extra_styles: |
    #state{
      border-radius: 50%;
      padding: 2px;
      width: 1.25em;
      background: #fff;
      border: 2px solid #666;
      color: #666;
      text-align: center;
    }
    #card{
      min-height: 115px;
    }
  styles:
    grid:
      - grid-template-areas: |
          [[[
            var column1Row1 = '';
            var column2Row1 = '. ';
            var column3Row1 = '';
            var column1Row2 = '';
            var column2Row2 = '. ';
            var column3Row2 = '';
            if (states["sensor.active_alerts"].attributes.icon != '') {
              column1Row1 = 'i ';
              column1Row2 = 'i ';
            } 
            if (states["sensor.active_alerts"].attributes.alertcount != 1) {
              column3Row1 = 's ';
              column3Row2 = 's ';
              if (states["sensor.active_alerts"].attributes.icon == '') {
                var column1Row1 = '. ';
                var column1Row2 = '. ';
              }
            } 
            
            if (states["sensor.active_alerts"].attributes.name != '') {
              if (states["sensor.active_alerts"].attributes.label != '') {
                column2Row1 = 'n ';
                column2Row2 = 'l ';
              } else {
                column2Row1 = 'n ';
                column2Row2 = 'n ';
              }
            } else {
              if (states["sensor.active_alerts"].attributes.label != '') {
                column2Row1 = 'l ';
                column2Row2 = 'l ';
              }
            }
            return "'" + column1Row1 + column2Row1 + column3Row1 + "' '" + column1Row2 + column2Row2 + column3Row2 + "'";
          ]]]
      - grid-template-columns: |
          [[[
            var column1 = '';
            var column2 = '1fr ';
            var column3 = '';
            if (states["sensor.active_alerts"].attributes.icon != ''){
              column1 = '25% ';
            }
            if (states["sensor.active_alerts"].attributes.alertcount != 1) {
              column1 = '25% ';
              column3 = '25%';
            }
            return column1 + column2 + column3;
          ]]]
      - grid-template-rows: auto repeat(2, min-content)
    card:
      - background-color: '[[[return states["sensor.active_alerts"].attributes.backgroundcolor]]]'
      - min-height: 115px;
    icon:
      - color: '[[[return states["sensor.active_alerts"].attributes.textcolor]]]'
      - animation: '[[[return states["sensor.active_alerts"].attributes.animation]]]'
    label:
      - text-transform: uppercase
      - font-size: 1.25em
      - font-weight: bold
      - color: '[[[return states["sensor.active_alerts"].attributes.textcolor]]]'
      - animation: '[[[return states["sensor.active_alerts"].attributes.animation]]]'
    name:
      - font-size: 1.25em
      - font-weight: bold
      - color: '[[[return states["sensor.active_alerts"].attributes.textcolor]]]'
      - animation: '[[[return states["sensor.active_alerts"].attributes.animation]]]'
    state:
      - font-weight: bold
      - font-size: 1.5em
  type: custom:button-card
conditions:
  - entity: sensor.active_alerts
    state: 'on'
type: conditional