Add persistent notification card

src/cards/ha-card-chooser.html

@@ -4,3 +4,4 @@
 <link rel='import' href='./ha-entities-card.html'>
 <link rel='import' href='./ha-introduction-card.html'>
 <link rel='import' href='./ha-media_player-card.html'>
+<link rel='import' href='./ha-persistent_notification-card.html'>

src/cards/ha-persistent_notification-card.html

@@ -0,0 +1,47 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
+
+<link rel='import' href='../components/ha-card.html'>
+
+<dom-module id='ha-persistent_notification-card'>
+  <style>
+    :host {
+      @apply(--paper-font-body1);
+    }
+    .content {
+      padding: 0 16px 16px;
+    }
+    paper-button {
+      margin: 8px;
+      font-weight: 500;
+    }
+  </style>
+  <template>
+    <ha-card header="[[computeTitle(stateObj)]]">
+      <div class='content'>[[stateObj.state]]</div>
+      <paper-button on-tap='dismissTap'>DISMISS</paper-button>
+    </ha-card>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-persistent_notification-card',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+  },
+
+  computeTitle: function (stateObj) {
+    return stateObj.attributes.title || stateObj.entityDisplay;
+  },
+
+  dismissTap: function (ev) {
+    ev.preventDefault();
+
+    this.hass.entityActions.delete(this.stateObj);
+  },
+});
+</script>

src/components/ha-cards.js

@@ -7,10 +7,12 @@ import '../cards/ha-card-chooser';
 const DOMAINS_WITH_CARD = {
   camera: 4,
   media_player: 3,
+  persistent_notification: 0,
 };
 
 const PRIORITY = {
   configurator: -20,
+  persistent_notification: -15,
   group: -10,
   a: -1,
   updater: 0,