Add spacing card

src/panels/lovelace/cards/hui-spacing-card.ts

@@ -0,0 +1,36 @@
+import type { PropertyValues } from "lit";
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../components/ha-card";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
+
+@customElement("hui-spacing-card")
+export class HuiSpacingCard extends LitElement implements LovelaceCard {
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    await import("../editor/config-elements/hui-spacing-card-editor");
+    return document.createElement("hui-spacing-card-editor");
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
+  public getCardSize(): number {
+    return 1;
+  }
+
+  public setConfig(): void {
+    // No config necessary
+  }
+
+  protected render() {
+    return html`<ha-card></ha-card>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-spacing-card": HuiSpacingCard;
+  }
+}

src/panels/lovelace/create-element/create-card-element.ts

@@ -6,6 +6,7 @@ import "../cards/hui-entity-button-card";
 import "../cards/hui-glance-card";
 import "../cards/hui-grid-card";
 import "../cards/hui-light-card";
+import "../cards/hui-spacing-card";
 import "../cards/hui-sensor-card";
 import "../cards/hui-thermostat-card";
 import "../cards/hui-weather-forecast-card";
@@ -89,6 +90,7 @@ const LAZY_LOAD_TYPES = {
   "statistics-graph": () => import("../cards/hui-statistics-graph-card"),
   statistic: () => import("../cards/hui-statistic-card"),
   "vertical-stack": () => import("../cards/hui-vertical-stack-card"),
+  spacing: () => import("../cards/hui-spacing-card"),
 };
 
 // This will not return an error card but will throw the error

src/panels/lovelace/editor/config-elements/hui-spacing-card-editor.ts

@@ -0,0 +1,61 @@
+import type { CSSResultGroup } from "lit";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../components/ha-form/ha-form";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCardEditor } from "../../types";
+import { configElementStyle } from "./config-elements-style";
+import type { SchemaUnion } from "../../../../components/ha-form/types";
+
+const SCHEMA = [
+  {
+    name: "description",
+    type: "constant",
+  },
+] as const;
+
+@customElement("hui-spacing-card-editor")
+export class HuiSpacingCardEditor
+  extends LitElement
+  implements LovelaceCardEditor
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  public setConfig(): void {
+    // No config necessary
+  }
+
+  protected render() {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    return html`
+      <ha-form
+        .hass=${this.hass}
+        .data=${{}}
+        .schema=${SCHEMA}
+        .computeLabel=${this._computeLabelCallback}
+      ></ha-form>
+    `;
+  }
+
+  private _computeLabelCallback = (schema: SchemaUnion<typeof SCHEMA>) => {
+    if (schema.name === "description") {
+      return this.hass!.localize(
+        "ui.panel.lovelace.editor.card.spacing.no_config_options"
+      );
+    }
+    return this.hass!.localize(
+      `ui.panel.lovelace.editor.card.generic.${schema.name}`
+    );
+  };
+
+  static styles: CSSResultGroup = configElementStyle;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-spacing-card-editor": HuiSpacingCardEditor;
+  }
+}

src/panels/lovelace/editor/lovelace-cards.ts

@@ -129,4 +129,8 @@ export const coreCards: Card[] = [
     type: "heading",
     showElement: true,
   },
+  {
+    type: "spacing",
+    showElement: false,
+  },
 ];

src/translations/en.json

@@ -7213,6 +7213,11 @@
               "daily": "Daily",
               "hourly": "Hourly",
               "twice_daily": "Twice daily"
+            },
+            "spacing": {
+              "name": "Spacing",
+              "description": "Add custom spacing between cards.",
+              "no_config_options": "This card has no config options, use the Layout tab to set the size."
             }
           },
           "elements": {