Show specific notices with cards easily in your dashboard

Hello everyone, I am new to the community. Please tell me if I create the post in a incorrect section/ missing anything/ any duplications. Thanks.

Recently I have created a Notice section in my dashboard. I would like to extend this section easily in the future, that I don’t need to have duplicated logic in the dashboard and the virtual sensors, etc. Also I want to dynamically show the notice cards only when certain conditions are fulfilled.

Here is the result of what I have done.

The yaml structure is as simple as a vertical stack containing “Notices” title plus plenty of built-in conditional cards.

type: vertical-stack
  - type: custom:mushroom-title-card
    subtitle: Notices
  - type: conditional
      - ...
  - type: conditional
      - ...

I did a tiny CSS hack for hiding the title when there is no siblings. This pseudo selector :has() is fairly new and some browser might not support. Please confirm your usage before using it.

/* It hides the mushroom-title-card if no non-hidden siblings.
 * ~ hui-conditional-card:not([style*="display: none"])
 * => any siblings who are not hidden
 * :not(:has(~ hui-conditional-card:not([style*="display: none"])))
 * => don't have any sibling who are not hidden
mushroom-title-card:not(:has(~ hui-conditional-card:not([style*="display: none"]))) {
  display: none;

I have upload the whole settings in this GitHub repository. home-assistant-blueprints/dashboard/notices at main · hlchanad/home-assistant-blueprints · GitHub

1 Like

Just to understand: which notifications are these? The built-in persistent notifications?

Thanks for replying. I didn’t mean the built-in persistent notifications of Home Assistant, but some cards on the dashboard which “notify” me when certain conditions is fulfilled. They are basically the built-in conditional card.

Right, so more like a notice than a notification.

1 Like

Right! This better suits the nature. I will update the wordings. Thank you.

1 Like

Notifications or notices are one underestimated feature of HA. :slight_smile:

@ccpk1 did something similar, I use it as the basis for the system I implemented for myself.

Take a look here, maybe you can find some inspiration for your own implementation.

One thing I’d note though: I wouldn’t work with conditional cards in the frontend, rather with auto-entities. That moves the “logic” into the backend, and you can use this logic in all places you want. Eg. in your case, you have the conditional logic in a frontend card. If you want that code shown in another place, you have to duplicate the logic. :slight_smile:

1 Like

LGTM i have sth similar too, super useful.

1 Like

Yes!! I wanted to prevent duplicated codes, so I hack the css to hide the title XD. Thanks for the recommendations. I will have a look of auto-entities.

If you want to have less duplication in your frontend, alerts are a wonderful way. Combine them with some nice binary_sensors and you have a great information system for your house.

This is an excerpt of one of my alerts:

# config/packages/alerts.yaml
    name: Lampe Berger is on fire
    icon: mdi:alert
    name: Lampe Berger on fire
    icon: mdi:fire

  - binary_sensor:
      - name: lampe_berger_on_fire_alert_active
        state: "{{ is_state('input_boolean.lampe_berger_on_fire', 'on') and is_state('input_boolean.lampe_berger_on_fire_notify', 'on') }}"
        delay_on: '00:20:00'

    name: lampe_berger_on_fire_critical_alert_active
    entity_id: binary_sensor.lampe_berger_on_fire_alert_active
    state: 'on'
      - 3
    can_acknowledge: false
    skip_first: false
    title: "Critical warning"
    message: "Lampe Berger is still on!"
      - NOTIFY_critical
      tag: lampe_berger
    done_message: clear_notification

  - name: NOTIFY_critical
    platform: group
      - service: mobile_app_s
      - service: mobile_app_p
      - service: notification_tv
            duration: 10
            fontsize: medium
            position: center
            color: grey
            transparency: 0%

And this is, how it is used in the frontend with auto-entities:

type: vertical-stack
  - type: custom:auto-entities
    show_empty: false
      type: entities
      title: Active, critical warning
        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;
        - entity_id: /^alert(.).*_critical_alert_active/
            secondary_info: last-changed
        - state: 'off'
        - state: idle
      method: last_changed
      reverse: true

I hope, this helps a little in understanding the underlying logic I used. Maybe some things are adaptable for you. :slight_smile: