Simple and Effective Alerting

[ablyes (Lyes)]

@ccpk1

title: "" #########################  Home  #########################
icon: mdi:home
cards:
  - type: vertical-stack
    cards:
        ##################### Show active critical alerts
      - type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          title: Active Critical Alerts
          card_mod:
            style: |
              ha-card {
                background-color: rgba(251,13,13,1);
                border-radius: 5px;
                --primary-color: white;
                --paper-item-icon-color: white;
                --secondary-text-color: white;
              }
        filter:
          include:
            - entity_id: "/^alert(.).*_crit_alert_active/"
              options:
                secondary_info: last-changed
          exclude:
            - state: "off"
            - state: idle
        sort:
          method: last_changed
          reverse: true
        ##################### Show active warning alerts
      - type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          title: Active Warnings
          card_mod:
            style: |
              ha-card {
                background-color: rgba(204,102,0,1);
                border-radius: 5px;
                --primary-color: white;
                --paper-item-icon-color: white;
                --secondary-text-color: white;
              }
        filter:
          include:
            - entity_id: "/^alert(.).*_warn_alert_active/"
              options:
                secondary_info: last-changed
          exclude:
            - state: "off"
            - state: idle
            - state: unavailable
        sort:
          method: last_changed
          reverse: true
        ##################### Show active information
      - type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          title: Active Information
          card_mod:
            style: |
              ha-card {
                background-color: rgba(68,115,158,1);
                border-radius: 5px;
                --primary-color: white;
                --paper-item-icon-color: white;
                --secondary-text-color: white;
              }
        filter:
          include:
            - entity_id: "/^alert(.).*_info_alert_active/"
              options:
                secondary_info: last-changed
          exclude:
            - state: "off"
            - state: idle
        sort:
          method: last_changed
          reverse: true
        ##################### Show acknowledged alerts
      - type: custom:auto-entities
        show_empty: false
        card:
          type: entities
          title: Acknowledged Alerts
          card_mod:
            style: |
              ha-card {
                background-color: rgba(68,115,158,1);
                border-radius: 5px;
                --primary-color: white;
                --paper-item-icon-color: white;
                --secondary-text-color: white;
              }
        filter:
          include:
            - domain: alert
              options:
                secondary_info: last-changed
          exclude:
            - state: "on"
            - state: idle
        sort:
          method: last_changed
          reverse: true

Yes, I added both via HACS.
I tried of course to integate small parts of your code.