diff --git a/src/common/const.ts b/src/common/const.ts
index e5c36f1eee..399654a10b 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -176,6 +176,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
 
 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
+  "alert",
   "button",
   "climate",
   "cover",
diff --git a/src/state-summary/state-card-alert.ts b/src/state-summary/state-card-alert.ts
new file mode 100755
index 0000000000..151637490b
--- /dev/null
+++ b/src/state-summary/state-card-alert.ts
@@ -0,0 +1,87 @@
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { computeRTL } from "../common/util/compute_rtl";
+import "../components/entity/state-info";
+import { haStyle } from "../resources/styles";
+import { stateActive } from "../common/entity/state_active";
+import type { HomeAssistant } from "../types";
+
+@customElement("state-card-alert")
+export class StateCardAlert extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj!: HassEntity;
+
+  @property({ type: Boolean }) public inDialog = false;
+
+  // property used only in CSS
+  @property({ type: Boolean, reflect: true }) public rtl = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="horizontal justified layout">
+        <state-info
+          .hass=${this.hass}
+          .stateObj=${this.stateObj}
+          .inDialog=${this.inDialog}
+        >
+        </state-info>
+        <div class="state">
+          ${stateActive(this.stateObj)
+            ? html`<ha-entity-toggle
+                .hass=${this.hass}
+                .stateObj=${this.stateObj}
+              ></ha-entity-toggle>`
+            : computeStateDisplay(
+                this.hass!.localize,
+                this.stateObj,
+                this.hass.locale,
+                this.hass.config,
+                this.hass.entities
+              )}
+        </div>
+      </div>
+    `;
+  }
+
+  protected updated(changedProps) {
+    super.updated(changedProps);
+    if (!changedProps.has("hass")) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+    if (!oldHass || oldHass.language !== this.hass.language) {
+      this.rtl = computeRTL(this.hass);
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        state-info {
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+        .state {
+          color: var(--primary-text-color);
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
+          text-align: var(--float-end, right);
+          flex: 0 0 auto;
+          overflow-wrap: break-word;
+          display: flex;
+          align-items: center;
+          direction: ltr;
+        }
+        ha-entity-toggle {
+          margin: -4px -16px -4px 0;
+          padding: 4px 16px;
+        }
+      `,
+    ];
+  }
+}
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 4171bd447a..d62703f97c 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -2,6 +2,7 @@
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import dynamicContentUpdater from "../common/dom/dynamic_content_updater";
 import { stateCardType } from "../common/entity/state_card_type";
+import "./state-card-alert";
 import "./state-card-button";
 import "./state-card-climate";
 import "./state-card-humidifier";