Merge branch 'dev' into Better-row-editor

src/components/entity/ha-entity-picker.ts

@@ -95,7 +95,8 @@ export class HaEntityPicker extends LitElement {
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ type: Boolean }) public hideClearIcon = false;
+  @property({ type: Boolean, attribute: "hide-clear-icon" })
+  public hideClearIcon = false;
 
   @property({ type: Boolean }) private _opened = false;
 

src/components/ha-button-menu.ts

@@ -23,6 +23,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public fixed = false;
+
   @query("mwc-menu", true) private _menu?: Menu;
 
   public get items() {
@@ -39,6 +41,7 @@ export class HaButtonMenu extends LitElement {
         <slot name="trigger"></slot>
       </div>
       <mwc-menu
+        .fixed=${this.fixed}
         .corner=${this.corner}
         .multi=${this.multi}
         .activatable=${this.activatable}

src/components/ha-dialog.ts

@@ -68,6 +68,12 @@ export class HaDialog extends MwcDialog {
           top: var(--dialog-surface-top);
           min-height: var(--mdc-dialog-min-height, auto);
         }
+
+        :host([full]) .mdc-dialog .mdc-dialog__surface {
+          height: 100%;
+          width: 100%;
+        }
+
         :host([flexContent]) .mdc-dialog .mdc-dialog__content {
           display: flex;
           flex-direction: column;
@@ -90,6 +96,23 @@ export class HaDialog extends MwcDialog {
           margin-left: 40px;
           margin-right: 0px;
         }
+
+        .mdc-dialog__content::-webkit-scrollbar {
+          width: 0.4rem;
+          height: 0.4rem;
+        }
+
+        .mdc-dialog__content::-webkit-scrollbar-thumb {
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          background: var(--scrollbar-thumb-color);
+        }
+
+        .mdc-dialog__content {
+          overflow-y: auto;
+          scrollbar-color: var(--scrollbar-thumb-color) transparent;
+          scrollbar-width: thin;
+        }
       `,
     ];
   }

src/components/ha-expansion-panel.ts

@@ -1,3 +1,4 @@
+import { mdiChevronDown } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -8,10 +9,9 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
-import { mdiChevronDown } from "@mdi/js";
-import { classMap } from "lit-html/directives/class-map";
 
 @customElement("ha-expansion-panel")
 class HaExpansionPanel extends LitElement {

src/components/ha-help-tooltip.ts

@@ -1,4 +1,4 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiHelpCircleOutline } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -18,7 +18,7 @@ export class HaHelpTooltip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+      <ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon>
       <paper-tooltip
         offset="4"
         .position=${this.position}

src/components/ha-settings-row.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResult,
@@ -18,18 +18,10 @@ export class HaSettingsRow extends LitElement {
 
   protected render(): SVGTemplateResult {
     return html`
-      <style>
+      <mwc-list-item noninteractive ?twoline=${!this.threeLine}>
-        paper-item-body {
-          padding-right: 16px;
-        }
-      </style>
-      <paper-item-body
-        ?two-line=${!this.threeLine}
-        ?three-line=${this.threeLine}
-      >
         <slot name="heading"></slot>
-        <div secondary><slot name="description"></slot></div>
+        <span slot="secondary"><slot name="description"></slot></span>
-      </paper-item-body>
+      </mwc-list-item>
       <slot></slot>
     `;
   }
@@ -42,6 +34,7 @@ export class HaSettingsRow extends LitElement {
         align-content: normal;
         align-self: auto;
         align-items: center;
+        justify-content: space-between;
       }
       :host([narrow]) {
         align-items: normal;
@@ -49,6 +42,9 @@ export class HaSettingsRow extends LitElement {
         border-top: 1px solid var(--divider-color);
         padding-bottom: 8px;
       }
+      mwc-list-item {
+        --mdc-list-side-padding: 0;
+      }
       ::slotted(ha-switch) {
         padding: 16px 0;
       }

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

@@ -1,16 +1,16 @@
+import { safeDump } from "js-yaml";
 import {
   css,
   CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { ErrorCardConfig } from "./types";
-import { safeDump } from "js-yaml";
 
 @customElement("hui-error-card")
 export class HuiErrorCard extends LitElement implements LovelaceCard {
@@ -49,6 +49,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
         font-weight: 500;
         user-select: text;
         cursor: default;
+        overflow: hidden;
       }
       pre {
         font-family: var(--code-font-family, monospace);

src/panels/lovelace/components/hui-action-editor.ts

@@ -179,6 +179,9 @@ export class HuiActionEditor extends LitElement {
       .dropdown {
         display: flex;
       }
+      paper-dropdown-menu {
+        flex-grow: 1;
+      }
     `;
   }
 }

src/panels/lovelace/components/hui-entity-editor.ts

@@ -1,4 +1,4 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragVerticalVariant } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -68,7 +68,7 @@ export class HuiEntityEditor extends LitElement {
             : this.entities!.map((entityConf, index) => {
                 return html`
                   <div class="entity" data-entity-id=${entityConf.entity}>
-                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiDragVerticalVariant}></ha-svg-icon>
                     <ha-entity-picker
                       .hass=${this.hass}
                       .value=${entityConf.entity}
@@ -192,6 +192,7 @@ export class HuiEntityEditor extends LitElement {
         .entity ha-svg-icon {
           padding-right: 8px;
           cursor: move;
+          color: var(--secondary-text-color);
         }
         .entity ha-entity-picker {
           flex-grow: 1;

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -26,11 +26,7 @@ export class HuiThemeSelectEditor extends LitElement {
     return html`
       <paper-dropdown-menu
         .label=${this.label ||
-        `${this.hass!.localize(
+        this.hass!.localize("ui.panel.lovelace.editor.card.generic.theme")}
-          "ui.panel.lovelace.editor.card.generic.theme"
-        )} (${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.config.optional"
-        )})`}
         dynamic-align
       >
         <paper-listbox

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -1,5 +1,14 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckBoxOutline,
+  mdiCodeBracesBox,
+  mdiDotsVertical,
+  mdiFormSelect,
+  mdiHelpCircleOutline,
+} from "@mdi/js";
 import deepFreeze from "deep-freeze";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultArray,
@@ -14,10 +23,16 @@ import {
 } from "lit-element";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { shouldHandleRequestSelectedEvent } from "../../../../common/mwc/handle-request-selected-event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-header-bar";
+import "../../../../components/ha-menu-button";
+import {
+  CoreFrontendUserData,
+  getOptimisticFrontendUserDataCollection,
+} from "../../../../data/frontend";
 import type {
   LovelaceCardConfig,
   LovelaceViewConfig,
@@ -40,6 +55,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "reload-lovelace": undefined;
+    "scroll-to-pos": { x: number; y: number };
   }
   // for add event listener
   interface HTMLElementEventMap {
@@ -75,6 +91,12 @@ export class HuiDialogEditCard extends LitElement
 
   @internalProperty() private _dirty = false;
 
+  @internalProperty() private _coreUserData?: CoreFrontendUserData | null;
+
+  @internalProperty() private _isAdvanced? = false;
+
+  private _unsubCoreData?: UnsubscribeFunc;
+
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     this._GUImode = true;
@@ -90,6 +112,13 @@ export class HuiDialogEditCard extends LitElement
     if (params.cardConfig) {
       this._dirty = true;
     }
+    this._unsubCoreData = getOptimisticFrontendUserDataCollection(
+      this.hass.connection,
+      "core"
+    ).subscribe((coreUserData) => {
+      this._coreUserData = coreUserData;
+      this._isAdvanced = coreUserData?.showAdvanced;
+    });
   }
 
   public closeDialog(): boolean {
@@ -102,6 +131,10 @@ export class HuiDialogEditCard extends LitElement
     this._error = undefined;
     this._documentationURL = undefined;
     this._dirty = false;
+    if (this._unsubCoreData) {
+      this._unsubCoreData();
+      this._unsubCoreData = undefined;
+    }
     fireEvent(this, "dialog-closed", { dialog: this.localName });
     return true;
   }
@@ -157,10 +190,11 @@ export class HuiDialogEditCard extends LitElement
       <ha-dialog
         open
         scrimClickAction
+        full
+        .heading=${true}
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
         @opened=${this._opened}
-        .heading=${true}
       >
         <div slot="heading">
           <ha-header-bar>
@@ -177,11 +211,75 @@ export class HuiDialogEditCard extends LitElement
                     dir=${computeRTLDirection(this.hass)}
                   >
                     <mwc-icon-button>
-                      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon>
                     </mwc-icon-button>
                   </a>
                 `
               : ""}
+            ${this._cardConfig !== undefined
+              ? html`
+                  <ha-button-menu
+                    fixed
+                    corner="BOTTOM_START"
+                    slot="actionItems"
+                    @closed=${(ev) => ev.stopPropagation()}
+                  >
+                    <mwc-icon-button
+                      slot="trigger"
+                      .label=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                      .title=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                    >
+                      <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                    </mwc-icon-button>
+                    ${this._coreUserData?.showAdvanced === true
+                      ? html`
+                          <mwc-list-item
+                            graphic="icon"
+                            .label=${this.hass!.localize(
+                              !this._cardEditorEl || this._GUImode
+                                ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                                : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                            )}
+                            .disabled=${!this._guiModeAvailable}
+                            @request-selected=${this._toggleMode}
+                          >
+                            <span
+                              >${this.hass!.localize(
+                                !this._cardEditorEl || this._GUImode
+                                  ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                                  : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                              )}</span
+                            >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${!this._cardEditorEl || this._GUImode
+                                ? mdiCodeBracesBox
+                                : mdiFormSelect}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : html`
+                          <mwc-list-item
+                            graphic="icon"
+                            label="Show Advanced Options"
+                            @request-selected=${this._toggleAdvanced}
+                          >
+                            <span>Show Advanced Options</span>
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${this._isAdvanced
+                                ? mdiCheckBoxOutline
+                                : mdiCheckboxBlankOutline}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `}
+                  </ha-button-menu>
+                `
+              : ""}
           </ha-header-bar>
         </div>
         <div class="content">
@@ -190,9 +288,11 @@ export class HuiDialogEditCard extends LitElement
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
+              .isAdvanced=${this._isAdvanced}
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
+              @scroll-to-pos=${this._scrollToPos}
             ></hui-card-element-editor>
           </div>
           <div class="element-preview">
@@ -211,22 +311,6 @@ export class HuiDialogEditCard extends LitElement
               : ``}
           </div>
         </div>
-        ${this._cardConfig !== undefined
-          ? html`
-              <mwc-button
-                slot="secondaryAction"
-                @click=${this._toggleMode}
-                .disabled=${!this._guiModeAvailable}
-                class="gui-mode-button"
-              >
-                ${this.hass!.localize(
-                  !this._cardEditorEl || this._GUImode
-                    ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
-                    : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
-                )}
-              </mwc-button>
-            `
-          : ""}
         <div slot="primaryAction" @click=${this._save}>
           <mwc-button @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
@@ -264,6 +348,13 @@ export class HuiDialogEditCard extends LitElement
     ev.stopPropagation();
   }
 
+  private _scrollToPos(ev: CustomEvent): void {
+    this.shadowRoot!.querySelector("ha-dialog")?.scrollToPos(
+      ev.detail.x,
+      ev.detail.y
+    );
+  }
+
   private _handleConfigChanged(ev: HASSDomEvent<ConfigChangedEvent>) {
     this._cardConfig = deepFreeze(ev.detail.config);
     this._error = ev.detail.error;
@@ -277,10 +368,20 @@ export class HuiDialogEditCard extends LitElement
     this._guiModeAvailable = ev.detail.guiModeAvailable;
   }
 
-  private _toggleMode(): void {
+  private _toggleMode(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
     this._cardEditorEl?.toggleMode();
   }
 
+  private _toggleAdvanced(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    this._isAdvanced = !this._isAdvanced;
+  }
+
   private _opened() {
     this._cardEditorEl?.refreshYamlEditor();
   }
@@ -358,37 +459,47 @@ export class HuiDialogEditCard extends LitElement
       css`
         :host {
           --code-mirror-max-height: calc(100vh - 176px);
+          --dialog-content-padding: 0px 24px;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
           ha-dialog {
             --mdc-dialog-max-height: 100%;
-            height: 100%;
           }
         }
 
-        @media all and (min-width: 850px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 845px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-        }
-
-        ha-dialog {
-          --mdc-dialog-max-width: 845px;
-          --dialog-z-index: 5;
-        }
-
         @media all and (min-width: 451px) and (min-height: 501px) {
           ha-dialog {
             --mdc-dialog-max-width: 90vw;
           }
-          :host([large]) .content {
+          :host([large]) ha-dialog {
             width: calc(90vw - 48px);
           }
         }
 
+        @media all and (min-width: 850px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 845px;
+          }
+        }
+
+        @media (min-width: 1200px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 1250px;
+            --dialog-surface-position: fixed;
+          }
+        }
+
+        ha-dialog {
+          --dialog-z-index: 5;
+          --mdc-dialog-max-height: 750px;
+        }
+
+        :host([large]) ha-dialog {
+          --mdc-dialog-max-width: calc(100% - 32px);
+        }
+
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
@@ -407,23 +518,17 @@ export class HuiDialogEditCard extends LitElement
           flex-direction: column;
           margin: 0 -10px;
         }
+
         .content hui-card-preview {
           margin: 4px auto;
           max-width: 390px;
         }
+
         .content .element-editor {
           margin: 0 10px;
         }
 
         @media (min-width: 1200px) {
-          ha-dialog {
-            --mdc-dialog-max-width: calc(100% - 32px);
-            --mdc-dialog-min-width: 1000px;
-            --dialog-surface-position: fixed;
-            --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
           .content {
             flex-direction: row;
           }
@@ -435,28 +540,34 @@ export class HuiDialogEditCard extends LitElement
           }
           .content hui-card-preview {
             padding: 8px 10px;
-            margin: auto 0px;
+            margin: auto;
             max-width: 500px;
           }
         }
+
         .hidden {
           display: none;
         }
+
         .element-editor {
           margin-bottom: 8px;
         }
+
         .blur {
           filter: blur(2px) grayscale(100%);
         }
+
         .element-preview {
           position: relative;
         }
+
         .element-preview ha-circular-progress {
           top: 50%;
           left: 50%;
           position: absolute;
           z-index: 10;
         }
+
         hui-card-preview {
           padding-top: 8px;
           margin-bottom: 4px;
@@ -464,14 +575,13 @@ export class HuiDialogEditCard extends LitElement
           width: 100%;
           box-sizing: border-box;
         }
-        .gui-mode-button {
+
-          margin-right: auto;
-        }
         .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
         }
+
         .header_button {
           color: inherit;
           text-decoration: none;

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -14,4 +14,13 @@ export const configElementStyle = css`
   .suffix {
     margin: 0 8px;
   }
+  ha-settings-row {
+    padding: 0;
+  }
+  ha-expansion-panel {
+    padding-top: 8px;
+  }
+  ha-expansion-panel .title {
+    font-size: 16px;
+  }
 `;

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

@@ -19,6 +19,7 @@ import { HomeAssistant } from "../../../../types";
 import { AlarmPanelCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -37,6 +38,8 @@ export class HuiAlarmPanelCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: AlarmPanelCardConfig;
 
   public setConfig(config: AlarmPanelCardConfig): void {
@@ -68,62 +71,68 @@ export class HuiAlarmPanelCardEditor extends LitElement
     const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
+              "ui.panel.lovelace.editor.card.config.required"
-          @change="${this._valueChanged}"
+            )})"
-          allow-custom-entity
+            .hass=${this.hass}
-        ></ha-entity-picker>
+            .value=${this._entity}
-        <paper-input
+            .configValue=${"entity"}
-          .label="${this.hass.localize(
+            .includeDomains=${includeDomains}
-            "ui.panel.lovelace.editor.card.generic.name"
+            @change=${this._valueChanged}
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <span>Used States</span> ${this._states.map((state, index) => {
+            @value-changed=${this._valueChanged}
-          return html`
+          ></paper-input>
-            <div class="states">
+          <span>Used States</span>
-              <paper-item>${state}</paper-item>
+          ${this._states.map((state, index) => {
-              <ha-icon
+            return html`
-                class="deleteState"
+              <div class="states">
-                .value="${index}"
+                <paper-item>${state}</paper-item>
-                icon="hass:close"
+                <ha-icon
-                @click=${this._stateRemoved}
+                  class="deleteState"
-              ></ha-icon>
+                  .value=${index}
-            </div>
+                  icon="hass:close"
-          `;
+                  @click=${this._stateRemoved}
-        })}
+                ></ha-icon>
-        <paper-dropdown-menu
+              </div>
-          .label="${this.hass.localize(
+            `;
-            "ui.panel.lovelace.editor.card.alarm-panel.available_states"
+          })}
-          )}"
+          <paper-dropdown-menu
-          @value-changed="${this._stateAdded}"
+            .label=${this.hass.localize(
-        >
+              "ui.panel.lovelace.editor.card.alarm-panel.available_states"
-          <paper-listbox slot="dropdown-content">
+            )}
-            ${states.map((state) => {
+            @value-changed=${this._stateAdded}
-              return html` <paper-item>${state}</paper-item> `;
+          >
-            })}
+            <paper-listbox slot="dropdown-content">
-          </paper-listbox>
+              ${states.map((state) => {
-        </paper-dropdown-menu>
+                return html`<paper-item>${state}</paper-item>`;
-        <hui-theme-select-editor
+              })}
-          .hass=${this.hass}
+            </paper-listbox>
-          .value="${this._theme}"
+          </paper-dropdown-menu>
-          .configValue="${"theme"}"
+        </div>
-          @value-changed="${this._valueChanged}"
+        <div slot="advanced" class="card-config">
-        ></hui-theme-select-editor>
+          <hui-theme-select-editor
-      </div>
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -11,9 +11,9 @@ import {
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -22,6 +22,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -53,6 +54,8 @@ export class HuiButtonCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: ButtonCardConfig;
 
   public setConfig(config: ButtonCardConfig): void {
@@ -107,117 +110,34 @@ export class HuiButtonCardEditor extends LitElement
       return html``;
     }
 
-    const dir = computeRTLDirection(this.hass!);
-
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label=${this.hass.localize(
-          .value=${this._entity}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )}
-          @value-changed=${this._valueChanged}
+            .hass=${this.hass}
-          allow-custom-entity
+            .value=${this._entity}
-        ></ha-entity-picker>
+            .configValue=${"entity"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></ha-entity-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._icon}
-            .placeholder=${this._icon ||
-            stateIcon(this.hass.states[this._entity])}
-            .configValue=${"icon"}
-            @value-changed=${this._valueChanged}
-          ></ha-icon-input>
-        </div>
-        <div class="side-by-side">
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_name"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_name !== false}
-                .configValue=${"show_name"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_state"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_state !== false}
-                .configValue=${"show_state"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_icon"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_icon !== false}
-                .configValue=${"show_icon"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-        </div>
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon_height"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._icon_height}
-            .configValue=${"icon_height"}
-            @value-changed=${this._valueChanged}
-            type="number"
-            ><div class="suffix" slot="suffix">px</div>
-          </paper-input>
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value=${this._theme}
-            .configValue=${"theme"}
-            @value-changed=${this._valueChanged}
-          ></hui-theme-select-editor>
-        </div>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
             .config=${this._tap_action}
             .actions=${actions}
@@ -227,12 +147,40 @@ export class HuiButtonCardEditor extends LitElement
             )}
             @value-changed=${this._valueChanged}
           ></hui-action-editor>
+        </div>
+        <div slot="advanced" class="card-config">
+          <div class="side-by-side">
+            <ha-icon-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.icon"
+              )}
+              .value=${this._icon}
+              .placeholder=${this._icon ||
+              stateIcon(this.hass.states[this._entity])}
+              .configValue=${"icon"}
+              @value-changed=${this._valueChanged}
+            ></ha-icon-input>
+            <paper-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.icon_height"
+              )}
+              .value=${this._icon_height}
+              .configValue=${"icon_height"}
+              @value-changed=${this._valueChanged}
+              type="number"
+              ><div class="suffix" slot="suffix">px</div>
+            </paper-input>
+          </div>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
             .config=${this._hold_action}
             .actions=${actions}
@@ -242,8 +190,44 @@ export class HuiButtonCardEditor extends LitElement
             )}
             @value-changed=${this._valueChanged}
           ></hui-action-editor>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_state !== false}
+              .configValue=${"show_state"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_name !== false}
+              .configValue=${"show_name"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_icon !== false}
+              .configValue=${"show_icon"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -1,5 +1,6 @@
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -23,6 +24,7 @@ import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import type { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -41,6 +43,8 @@ export class HuiCalendarCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @property({ attribute: false }) private _config?: CalendarCardConfig;
 
   @internalProperty() private _configEntities?: string[];
@@ -69,14 +73,15 @@ export class HuiCalendarCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <div class="side-by-side">
+        .hass=${this.hass}
+        .isAdvanced=${this.isAdvanced}
+      >
+        <div class="card-config">
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._title}
             .configValue=${"title"}
             @value-changed=${this._valueChanged}
@@ -105,28 +110,30 @@ export class HuiCalendarCardEditor extends LitElement
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
-        <hui-theme-select-editor
+        <h3>
-          .hass=${this.hass}
+          ${`${this.hass.localize(
-          .value=${this._theme}
+            "ui.panel.lovelace.editor.card.calendar.calendar_entities"
-          .configValue=${"theme"}
+          )} (
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})`}
+        </h3>
+        <ha-entities-picker
+          .hass=${this.hass!}
+          .value=${this._configEntities}
+          .includeDomains=${["calendar"]}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        >
-      </div>
+        </ha-entities-picker>
-      <h3>
+        <div slot="advanced" class="card-config">
-        ${this.hass.localize(
+          <hui-theme-select-editor
-          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
+            .hass=${this.hass}
-        ) +
+            .value=${this._theme}
-        " (" +
+            .configValue=${"theme"}
-        this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
+            @value-changed=${this._valueChanged}
-        ")"}
+          ></hui-theme-select-editor>
-      </h3>
+        </div>
-      <ha-entities-picker
+      </hui-config-element-template>
-        .hass=${this.hass!}
-        .value=${this._configEntities}
-        .includeDomains=${["calendar"]}
-        @value-changed=${this._valueChanged}
-      >
-      </ha-entities-picker>
     `;
   }
 
@@ -175,8 +182,15 @@ export class HuiCalendarCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -22,11 +22,11 @@ import {
   union,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
@@ -35,6 +35,7 @@ import type { LovelaceRowConfig } from "../../entity-rows/types";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../header-footer-editor/hui-header-footer-editor";
+import "../hui-config-element-template";
 import "../hui-entities-card-row-editor";
 import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
@@ -62,6 +63,8 @@ export class HuiEntitiesCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: EntitiesCardConfig;
 
   @internalProperty() private _configEntities?: LovelaceRowConfig[];
@@ -92,6 +95,7 @@ export class HuiEntitiesCardEditor extends LitElement
         <hui-sub-element-editor
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
+          .isAdvancedUser=${this.isAdvanced}
           @go-back=${this._goBack}
           @config-changed=${this._handleSubElementChanged}
         >
@@ -100,70 +104,80 @@ export class HuiEntitiesCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label="${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )} (${this.hass.localize(
-          @value-changed=${this._valueChanged}
+              "ui.panel.lovelace.editor.card.config.optional"
-        ></paper-input>
+            )})"
-        <hui-theme-select-editor
+            .value=${this._title}
-          .hass=${this.hass}
+            .configValue=${"title"}
-          .value=${this._theme}
+            @value-changed=${this._valueChanged}
-          .configValue=${"theme"}
+          ></paper-input>
-          @value-changed=${this._valueChanged}
+          <ha-settings-row>
-        ></hui-theme-select-editor>
+            <span slot="heading">
-        <div class="side-by-side">
+              ${this.hass.localize(
-          <ha-formfield
+                "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-            .label=${this.hass.localize(
+              )}
-              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+            </span>
-            )}
+            <span slot="description">
-            .dir=${computeRTLDirection(this.hass)}
+              ${this.hass.localize(
-          >
+                "ui.panel.lovelace.editor.card.entities.show_header_toggle_secondary"
+              )}
+            </span>
             <ha-switch
               .checked=${this._config!.show_header_toggle !== false}
               .configValue=${"show_header_toggle"}
               @change=${this._valueChanged}
             ></ha-switch>
-          </ha-formfield>
+          </ha-settings-row>
-          <ha-formfield
+        </div>
-            .label=${this.hass.localize(
+        <hui-entities-card-row-editor
-              "ui.panel.lovelace.editor.card.generic.state_color"
+          .hass=${this.hass}
-            )}
+          .entities=${this._configEntities}
-            .dir=${computeRTLDirection(this.hass)}
+          @entities-changed=${this._valueChanged}
-          >
+          @edit-detail-element=${this._editDetailElement}
+        ></hui-entities-card-row-editor>
+        <div slot="advanced" class="card-config">
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"header"}
+            .config=${this._config.header}
+            @value-changed=${this._valueChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"footer"}
+            .config=${this._config.footer}
+            @value-changed=${this._valueChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.state_color"
+              )}
+            </span>
             <ha-switch
               .checked=${this._config!.state_color}
               .configValue=${"state_color"}
               @change=${this._valueChanged}
             ></ha-switch>
-          </ha-formfield>
+          </ha-settings-row>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-        <hui-header-footer-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .configValue=${"header"}
-          .config=${this._config.header}
-          @value-changed=${this._valueChanged}
-          @edit-detail-element=${this._editDetailElement}
-        ></hui-header-footer-editor>
-        <hui-header-footer-editor
-          .hass=${this.hass}
-          .configValue=${"footer"}
-          .config=${this._config.footer}
-          @value-changed=${this._valueChanged}
-          @edit-detail-element=${this._editDetailElement}
-        ></hui-header-footer-editor>
-      </div>
-      <hui-entities-card-row-editor
-        .hass=${this.hass}
-        .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
-        @edit-detail-element=${this._editDetailElement}
-      ></hui-entities-card-row-editor>
     `;
   }
 
@@ -188,20 +202,9 @@ export class HuiEntitiesCardEditor extends LitElement
       return;
     }
 
-    if (configValue === "row" || (ev.detail && ev.detail.entities)) {
+    if (ev.detail && ev.detail.entities) {
       const newConfigEntities =
         ev.detail.entities || this._configEntities!.concat();
-      if (configValue === "row") {
-        if (!value) {
-          newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
-          this._goBack();
-        } else {
-          newConfigEntities[this._subElementEditorConfig!.index!] = value;
-        }
-
-        this._subElementEditorConfig!.elementConfig = value;
-      }
-
       this._config = { ...this._config!, entities: newConfigEntities };
       this._configEntities = processEditorEntities(this._config!.entities);
     } else if (configValue) {
@@ -221,18 +224,20 @@ export class HuiEntitiesCardEditor extends LitElement
 
   private _handleSubElementChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    if (!this._config || !this.hass) {
+    const configValue = this._subElementEditorConfig?.type;
+
+    if (!this._config || !this.hass || !configValue) {
       return;
     }
 
-    const configValue = this._subElementEditorConfig?.type;
     const value = ev.detail.config;
+    let goBack = false;
 
     if (configValue === "row") {
       const newConfigEntities = this._configEntities!.concat();
       if (!value) {
         newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
-        this._goBack();
+        goBack = true;
       } else {
         newConfigEntities[this._subElementEditorConfig!.index!] = value;
       }
@@ -240,9 +245,10 @@ export class HuiEntitiesCardEditor extends LitElement
       this._config = { ...this._config!, entities: newConfigEntities };
       this._configEntities = processEditorEntities(this._config!.entities);
     } else if (configValue) {
-      if (value === "") {
+      if (!value || value === "") {
         this._config = { ...this._config };
         delete this._config[configValue!];
+        goBack = true;
       } else {
         this._config = {
           ...this._config,
@@ -251,16 +257,21 @@ export class HuiEntitiesCardEditor extends LitElement
       }
     }
 
-    this._subElementEditorConfig = {
+    if (goBack) {
-      ...this._subElementEditorConfig!,
+      this._goBack();
-      elementConfig: value,
+    } else {
-    };
+      this._subElementEditorConfig = {
+        ...this._subElementEditorConfig!,
+        elementConfig: value,
+      };
+    }
 
     fireEvent(this, "config-changed", { config: this._config });
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
     this._subElementEditorConfig = ev.detail.subElementConfig;
+    fireEvent(this, "scroll-to-pos", { x: 0, y: 0 });
   }
 
   private _goBack(): void {

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

@@ -20,6 +20,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -39,6 +40,8 @@ export class HuiEntityCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: EntityCardConfig;
 
   public setConfig(config: EntityCardConfig): void {
@@ -76,74 +79,67 @@ export class HuiEntityCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            .label=${this.hass.localize(
-          .hass=${this.hass}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .value=${this._entity}
+            )}
-          .configValue=${"entity"}
+            .hass=${this.hass}
-          @change=${this._valueChanged}
+            .value=${this._entity}
-          allow-custom-entity
+            .configValue=${"entity"}
-        ></ha-entity-picker>
+            @change=${this._valueChanged}
-        <div class="side-by-side">
+            allow-custom-entity
+          ></ha-entity-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
+          <ha-entity-attribute-picker
+            .hass=${this.hass}
+            .entityId=${this._entity}
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.attribute"
+            )}
+            .value=${this._attribute}
+            .configValue=${"attribute"}
+            @value-changed=${this._valueChanged}
+          ></ha-entity-attribute-picker>
           <ha-icon-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
-        </div>
-        <div class="side-by-side">
-          <ha-entity-attribute-picker
-            .hass=${this.hass}
-            .entityId=${this._entity}
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.attribute"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._attribute}
-            .configValue=${"attribute"}
-            @value-changed=${this._valueChanged}
-          ></ha-entity-attribute-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.unit"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._unit}
             .configValue=${"unit"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-        <hui-theme-select-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-      </div>
     `;
   }
 

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

@@ -1,7 +1,6 @@
 import "@polymer/paper-input/paper-input";
 import {
-  css,
+  CSSResult,
-  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -11,14 +10,15 @@ import {
 } from "lit-element";
 import { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -40,6 +40,8 @@ export class HuiGaugeCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: GaugeCardConfig;
 
   public setConfig(config: GaugeCardConfig): void {
@@ -81,141 +83,131 @@ export class HuiGaugeCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._name}"
-          .configValue=${"name"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.unit"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._unit}"
-          .configValue=${"unit"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value="${this._theme}"
-          .configValue="${"theme"}"
-          @value-changed="${this._valueChanged}"
-        ></hui-theme-select-editor>
-        <paper-input
-          type="number"
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.minimum"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._min}"
-          .configValue=${"min"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          type="number"
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.maximum"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._max}"
-          .configValue=${"max"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.gauge.severity.define"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked="${this._config!.severity !== undefined}"
-            @change="${this._toggleSeverity}"
-          ></ha-switch
-        ></ha-formfield>
-        ${this._config!.severity !== undefined
-          ? html`
-              <paper-input
-                type="number"
-                .label="${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.gauge.severity.green"
-                )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.required"
             )})"
-                .value="${this._severity ? this._severity.green : 0}"
+            .hass=${this.hass}
-                .configValue=${"green"}
+            .value=${this._entity}
-                @value-changed="${this._severityChanged}"
+            .configValue=${"entity"}
-              ></paper-input>
+            .includeDomains=${includeDomains}
-              <paper-input
+            @change=${this._valueChanged}
-                type="number"
+          ></ha-entity-picker>
-                .label="${this.hass.localize(
+          <paper-input
-                  "ui.panel.lovelace.editor.card.gauge.severity.yellow"
+            .label=${this.hass.localize(
-                )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
-              "ui.panel.lovelace.editor.card.config.required"
+            )}
-            )})"
+            .value=${this._name}
-                .value="${this._severity ? this._severity.yellow : 0}"
+            .configValue=${"name"}
-                .configValue=${"yellow"}
+            @value-changed=${this._valueChanged}
-                @value-changed="${this._severityChanged}"
+          ></paper-input>
-              ></paper-input>
+          <div class="side-by-side">
-              <paper-input
+            <paper-input
-                type="number"
+              type="number"
-                .label="${this.hass.localize(
+              .label="${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.gauge.severity.red"
+                "ui.panel.lovelace.editor.card.generic.minimum"
-                )} (${this.hass.localize(
+              )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.required"
+                "ui.panel.lovelace.editor.card.config.optional"
-            )})"
+              )})"
-                .value="${this._severity ? this._severity.red : 0}"
+              .value=${this._min}
-                .configValue=${"red"}
+              .configValue=${"min"}
-                @value-changed="${this._severityChanged}"
+              @value-changed=${this._valueChanged}
-              ></paper-input>
+            ></paper-input>
+            <paper-input
+              type="number"
+              .label="${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.maximum"
+              )} (${this.hass.localize(
+                "ui.panel.lovelace.editor.card.config.optional"
+              )})"
+              .value=${this._max}
+              .configValue=${"max"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
           </div>
-          `
+        </div>
-          : ""}
+        <div slot="advanced" class="card-config">
-      </div>
+          <paper-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.unit"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._unit}
+            .configValue=${"unit"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.gauge.severity.define"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.severity !== undefined}
+              @change=${this._toggleSeverity}
+            ></ha-switch>
+          </ha-settings-row>
+          ${this._config!.severity !== undefined
+            ? html`
+                <div class="side-by-side">
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.green"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.green : 0}
+                    .configValue=${"green"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.yellow"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.yellow : 0}
+                    .configValue=${"yellow"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.red"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.red : 0}
+                    .configValue=${"red"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                </div>
+              `
+            : ""}
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResult {
-    return [
+    return configElementStyle;
-      configElementStyle,
-      css`
-        .severity {
-          display: none;
-          width: 100%;
-          padding-left: 16px;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-        .severity > * {
-          flex: 1 0 30%;
-          padding-right: 4px;
-        }
-        ha-switch[checked] ~ .severity {
-          display: flex;
-        }
-      `,
-    ];
   }
 
   private _toggleSeverity(ev: EntitiesEditorEvent): void {

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -76,6 +76,7 @@ export class HuiGenericEntityRowEditor extends LitElement
     return html`
       <div class="card-config">
         <ha-entity-picker
+          hide-clear-icon
           allow-custom-entity
           .hass=${this.hass}
           .value=${this._config.entity}

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

@@ -21,17 +21,18 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -57,6 +58,8 @@ export class HuiGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: GlanceCardConfig;
 
   @internalProperty() private _configEntities?: ConfigEntity[];
@@ -100,103 +103,94 @@ export class HuiGlanceCardEditor extends LitElement
       return html``;
     }
 
-    const dir = computeRTLDirection(this.hass!);
-
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )}
-          @value-changed=${this._valueChanged}
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+        <hui-entity-editor
+          .hass=${this.hass}
+          .entities=${this._configEntities}
+          @entities-changed=${this._valueChanged}
+        ></hui-entity-editor>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.glance.columns"
+            )}
+            type="number"
+            .value=${this._columns}
+            .configValue=${"columns"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_name !== false}
+              .configValue=${"show_name"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_icon !== false}
+              .configValue=${"show_icon"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_state !== false}
+              .configValue=${"show_state"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.state_color"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.glance.columns"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._columns}
-            .configValue=${"columns"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-        <div class="side-by-side">
+      </hui-config-element-template>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_name"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_name !== false}
-                .configValue=${"show_name"}
-                @change=${this._valueChanged}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_icon"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_icon !== false}
-                .configValue=${"show_icon"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_state"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_state !== false}
-                .configValue=${"show_state"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-        </div>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.state_color"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked=${this._config!.state_color}
-            .configValue=${"state_color"}
-            @change=${this._valueChanged}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
-      <hui-entity-editor
-        .hass=${this.hass}
-        .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
-      ></hui-entity-editor>
     `;
   }
 

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

@@ -24,6 +24,7 @@ import { EntityId } from "../../common/structs/is-entity-id";
 import "../../components/hui-entity-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
@@ -49,6 +50,8 @@ export class HuiHistoryGraphCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: HistoryGraphCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -81,47 +84,48 @@ export class HuiHistoryGraphCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
-            type="number"
+            .label=${this.hass.localize(
-            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.title"
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )}
-            )} (${this.hass.localize(
+            .value=${this._title}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .configValue=${"title"}
-            )})"
+            @value-changed=${this._valueChanged}
-            .value="${this._hours_to_show}"
-            .configValue=${"hours_to_show"}
-            @value-changed="${this._valueChanged}"
           ></paper-input>
+          <div class="side-by-side">
+            <paper-input
+              type="number"
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.hours_to_show"
+              )}
+              .value=${this._hours_to_show}
+              .configValue=${"hours_to_show"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+          </div>
+          <hui-entity-editor
+            .hass=${this.hass}
+            .entities=${this._configEntities}
+            @entities-changed=${this._valueChanged}
+          ></hui-entity-editor>
+        </div>
+        <div slot="advanced" class="card-config">
           <paper-input
             type="number"
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.refresh_interval"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._refresh_interval}
-            )})"
-            .value="${this._refresh_interval}"
             .configValue=${"refresh_interval"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
-        <hui-entity-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .entities="${this._configEntities}"
-          @entities-changed="${this._valueChanged}"
-        ></hui-entity-editor>
-      </div>
     `;
   }
 

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

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -32,6 +33,8 @@ export class HuiHumidifierCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: HumidifierCardConfig;
 
   public setConfig(config: HumidifierCardConfig): void {
@@ -57,37 +60,42 @@ export class HuiHumidifierCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            .label="${this.hass.localize(
-          .hass=${this.hass}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .value="${this._entity}"
+            )} (${this.hass.localize(
-          .configValue=${"entity"}
+              "ui.panel.lovelace.editor.card.config.required"
-          .includeDomains=${includeDomains}
+            )})"
-          @change="${this._valueChanged}"
+            .hass=${this.hass}
-          allow-custom-entity
+            .value=${this._entity}
-        ></ha-entity-picker>
+            .configValue=${"entity"}
-        <paper-input
+            .includeDomains=${includeDomains}
-          .label="${this.hass.localize(
+            @change=${this._valueChanged}
-            "ui.panel.lovelace.editor.card.generic.name"
+            allow-custom-entity
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -13,6 +13,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -28,6 +29,8 @@ export class HuiIframeCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: IframeCardConfig;
 
   public setConfig(config: IframeCardConfig): void {
@@ -53,40 +56,41 @@ export class HuiIframeCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.url"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
-          )})"
-          .value="${this._url}"
-          .configValue="${"url"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.title"
+              "ui.panel.lovelace.editor.card.generic.url"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
-            .value="${this._title}"
+            .value=${this._url}
-            .configValue="${"title"}"
+            .configValue=${"url"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._title}
-            )})"
+            .configValue=${"title"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
-      </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -19,6 +19,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -39,6 +40,8 @@ export class HuiLightCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: LightCardConfig;
 
   public setConfig(config: LightCardConfig): void {
@@ -85,78 +88,73 @@ export class HuiLightCardEditor extends LitElement
     ];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @value-changed=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.name"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            .includeDomains=${includeDomains}
+            @value-changed=${this._valueChanged}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )}
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
           <ha-icon-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hold_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._hold_action}
+            .actions=${actions}
+            .configValue=${"hold_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.double_tap_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._double_tap_action}
+            .actions=${actions}
+            .configValue=${"double_tap_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-
+      </hui-config-element-template>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
-
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.double_tap_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._double_tap_action}
-          .actions=${actions}
-          .configValue=${"double_tap_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
-      </div>
     `;
   }
 

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

@@ -17,6 +17,7 @@ import { LogbookCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -33,6 +34,8 @@ export class HuiLogbookCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: LogbookCardConfig;
 
   @internalProperty() private _configEntities?: string[];
@@ -65,50 +68,51 @@ export class HuiLogbookCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )}
-          @value-changed=${this._valueChanged}
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <paper-input
+            type="number"
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )}
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <h3>
+            ${`${this.hass!.localize(
+              "ui.panel.lovelace.editor.card.generic.entities"
+            )} (${this.hass!.localize(
+              "ui.panel.lovelace.editor.card.config.required"
+            )})`}
+          </h3>
+          <ha-entities-picker
+            .hass=${this.hass}
+            .value=${this._configEntities}
+            @value-changed=${this._valueChanged}
+          >
+          </ha-entities-picker>
+        </div>
+        <div slot="advanced" class="card-config">
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._hours_to_show}
-            .configValue=${"hours_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-        <h3>
+      </hui-config-element-template>
-          ${`${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.generic.entities"
-          )} (${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.config.required"
-          )})`}
-        </h3>
-        <ha-entities-picker
-          .hass=${this.hass}
-          .value=${this._configEntities}
-          @value-changed=${this._valueChanged}
-        >
-        </ha-entities-picker>
-      </div>
     `;
   }
 

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

@@ -19,8 +19,8 @@ import {
   string,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { PolymerChangedEvent } from "../../../../polymer-types";
 import { HomeAssistant } from "../../../../types";
@@ -29,6 +29,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-input-list-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -52,6 +53,8 @@ const cardConfigStruct = object({
 export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: MapCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -94,87 +97,84 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value="${this._aspect_ratio}"
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.default_zoom"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value="${this._default_zoom}"
-            .configValue="${"default_zoom"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
-        </div>
-        <div class="side-by-side">
-          <ha-formfield
             .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.dark_mode"
+              "ui.panel.lovelace.editor.card.generic.title"
             )}
-            .dir=${computeRTLDirection(this.hass)}
+            .value=${this._title}
-          >
+            .configValue=${"title"}
-            <ha-switch
+            @value-changed=${this._valueChanged}
-              .checked="${this._dark_mode}"
-              .configValue="${"dark_mode"}"
-              @change="${this._valueChanged}"
-            ></ha-switch
-          ></ha-formfield>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value="${this._hours_to_show}"
-            .configValue="${"hours_to_show"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
-        </div>
+          <div class="side-by-side">
-        <hui-entity-editor
+            <paper-input
-          .hass=${this.hass}
+              .label=${this.hass.localize(
-          .entities="${this._configEntities}"
+                "ui.panel.lovelace.editor.card.map.default_zoom"
-          @entities-changed="${this._entitiesValueChanged}"
+              )}
-        ></hui-entity-editor>
+              type="number"
-        <h3>
+              .value=${this._default_zoom}
-          ${this.hass.localize(
+              .configValue=${"default_zoom"}
-            "ui.panel.lovelace.editor.card.map.geo_location_sources"
+              @value-changed=${this._valueChanged}
-          )}
+            ></paper-input>
-        </h3>
+          </div>
-        <div class="geo_location_sources">
+          <paper-input
-          <hui-input-list-editor
+            .label=${this.hass.localize(
-            inputLabel=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.map.hours_to_show"
-              "ui.panel.lovelace.editor.card.map.source"
             )}
+            type="number"
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.map.dark_mode"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._dark_mode}
+              .configValue=${"dark_mode"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
+          <hui-entity-editor
             .hass=${this.hass}
-            .value="${this._geo_location_sources}"
+            .entities=${this._configEntities}
-            .configValue="${"geo_location_sources"}"
+            @entities-changed=${this._entitiesValueChanged}
-            @value-changed="${this._valueChanged}"
+          ></hui-entity-editor>
-          ></hui-input-list-editor>
         </div>
-      </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <h3>
+            ${this.hass.localize(
+              "ui.panel.lovelace.editor.card.map.geo_location_sources"
+            )}
+          </h3>
+          <div class="geo_location_sources">
+            <hui-input-list-editor
+              inputLabel=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.map.source"
+              )}
+              .hass=${this.hass}
+              .value=${this._geo_location_sources}
+              .configValue=${"geo_location_sources"}
+              @value-changed=${this._valueChanged}
+            ></hui-input-list-editor>
+          </div>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -30,6 +31,8 @@ export class HuiMarkdownCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: MarkdownCardConfig;
 
   public setConfig(config: MarkdownCardConfig): void {
@@ -55,38 +58,43 @@ export class HuiMarkdownCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._title}"
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue="${"title"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <paper-textarea
+            @value-changed=${this._valueChanged}
-          .label="${this.hass.localize(
+          ></paper-input>
-            "ui.panel.lovelace.editor.card.markdown.content"
+          <paper-textarea
-          )} (${this.hass.localize(
+            .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.required"
+              "ui.panel.lovelace.editor.card.markdown.content"
-          )})"
+            )} (${this.hass.localize(
-          .value="${this._content}"
+              "ui.panel.lovelace.editor.card.config.required"
-          .configValue="${"content"}"
+            )})"
-          @keydown=${this._ignoreKeydown}
+            .value=${this._content}
-          @value-changed="${this._valueChanged}"
+            .configValue=${"content"}
-          autocapitalize="none"
+            @keydown=${this._ignoreKeydown}
-          autocomplete="off"
+            @value-changed=${this._valueChanged}
-          spellcheck="false"
+            autocapitalize="none"
-        ></paper-textarea>
+            autocomplete="off"
-        <hui-theme-select-editor
+            spellcheck="false"
-          .hass=${this.hass}
+          ></paper-textarea>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -1,18 +1,18 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { assert, object, string, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -45,17 +45,17 @@ export class HuiMediaControlCardEditor extends LitElement
     return html`
       <div class="card-config">
         <ha-entity-picker
+          allow-custom-entity
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
           .hass=${this.hass}
-          .value="${this._entity}"
+          .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
+          @change=${this._valueChanged}
-          allow-custom-entity
         ></ha-entity-picker>
       </div>
     `;

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

@@ -16,6 +16,7 @@ import { PictureCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -32,6 +33,8 @@ export class HuiPictureCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureCardConfig;
 
   public setConfig(config: PictureCardConfig): void {
@@ -63,50 +66,51 @@ export class HuiPictureCardEditor extends LitElement
     const actions = ["navigate", "url", "call-service", "none"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.image"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <paper-input
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
-          <hui-action-editor
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.tap_action"
+              "ui.panel.lovelace.editor.card.generic.image"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.tap_action"
+            )}
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._hold_action}"
+            .config=${this._hold_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"hold_action"}"
+            .configValue=${"hold_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -13,8 +14,8 @@ import {
 } from "lit-element";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -23,6 +24,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -48,6 +50,8 @@ export class HuiPictureEntityCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureEntityCardConfig;
 
   public setConfig(config: PictureEntityCardConfig): void {
@@ -106,148 +110,137 @@ export class HuiPictureEntityCardEditor extends LitElement
 
     const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
     const views = ["auto", "live"];
-    const dir = computeRTLDirection(this.hass!);
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
-          .value="${this._entity}"
-          .configValue=${"entity"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._name}"
-          .configValue="${"name"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._camera_image}"
-          .configValue=${"camera_image"}
-          @value-changed="${this._valueChanged}"
-          .includeDomains=${includeDomains}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-dropdown-menu
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.camera_view"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
-            .configValue="${"camera_view"}"
+            .hass=${this.hass}
-            @value-changed="${this._valueChanged}"
+            .value=${this._entity}
-          >
+            .configValue=${"entity"}
-            <paper-listbox
+            @value-changed=${this._valueChanged}
-              slot="dropdown-content"
+          ></ha-entity-picker>
-              .selected="${views.indexOf(this._camera_view)}"
-            >
-              ${views.map((view) => {
-                return html` <paper-item>${view}</paper-item> `;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._name}
-            )})"
+            .configValue=${"name"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
-        </div>
+          <paper-input
-        <div class="side-by-side">
+            .label=${this.hass.localize(
-          <div>
+              "ui.panel.lovelace.editor.card.generic.image"
-            <ha-formfield
+            )}
-              .label=${this.hass.localize(
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_name"
               )}
-              .dir=${dir}
+            </span>
-            >
+            <ha-switch
-              <ha-switch
+              .checked=${this._config!.show_name !== false}
-                .checked="${this._config!.show_name !== false}"
+              .configValue=${"show_name"}
-                .configValue="${"show_name"}"
+              @change=${this._change}
-                @change="${this._change}"
+            ></ha-switch>
-              ></ha-switch
+          </ha-settings-row>
-            ></ha-formfield>
+          <ha-settings-row three-line>
-          </div>
+            <span slot="heading">
-          <div>
+              ${this.hass.localize(
-            <ha-formfield
-              .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_state"
               )}
-              .dir=${dir}
+            </span>
-            >
+            <ha-switch
-              <ha-switch
+              .checked=${this._config!.show_state !== false}
-                .checked="${this._config!.show_state !== false}"
+              .configValue=${"show_state"}
-                .configValue="${"show_state"}"
+              @change=${this._change}
-                @change="${this._change}"
+            ></ha-switch>
-              ></ha-switch
+          </ha-settings-row>
-            ></ha-formfield>
-          </div>
-        </div>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
+          <ha-expansion-panel>
+            <span class="title" slot="title">
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.card.picture-entity.camera_options`
+              )}
+            </span>
+            <ha-entity-picker
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.camera_image"
+              )}
+              .hass=${this.hass}
+              .value=${this._camera_image}
+              .configValue=${"camera_image"}
+              @value-changed=${this._valueChanged}
+              .includeDomains=${includeDomains}
+              allow-custom-entity
+            ></ha-entity-picker>
+            <paper-dropdown-menu
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.camera_view"
+              )}
+              .configValue=${"camera_view"}
+              @value-changed=${this._valueChanged}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${views.indexOf(this._camera_view)}
+              >
+                ${views.map((view) => {
+                  return html`<paper-item>${view}</paper-item>`;
+                })}
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </ha-expansion-panel>
+        </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._hold_action}"
+            .config=${this._hold_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"hold_action"}"
+            .configValue=${"hold_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 
@@ -294,8 +287,15 @@ export class HuiPictureEntityCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -22,6 +23,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   actionConfigStruct,
@@ -51,6 +53,8 @@ export class HuiPictureGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureGlanceCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -112,120 +116,114 @@ export class HuiPictureGlanceCardEditor extends LitElement
     const views = ["auto", "live"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._camera_image}"
-          .configValue=${"camera_image"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-          .includeDomains=${includeDomains}
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-dropdown-menu
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.camera_view"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue="${"camera_view"}"
-            @value-changed="${this._valueChanged}"
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              .selected="${views.indexOf(this._camera_view)}"
-            >
-              ${views.map((view) => {
-                return html` <paper-item>${view}</paper-item> `;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._title}
-            )})"
+            .configValue=${"title"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
+          ></paper-input>
-            @value-changed="${this._valueChanged}"
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.image"
+            )}
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
           ></paper-input>
-        </div>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.picture-glance.state_entity"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._entity}"
-          .configValue=${"entity"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
-          ></hui-action-editor>
-          <hui-action-editor
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .hass=${this.hass}
-            .config="${this._hold_action}"
-            .actions="${actions}"
-            .configValue="${"hold_action"}"
-            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
         </div>
         <hui-entity-editor
           .hass=${this.hass}
-          .entities="${this._configEntities}"
+          .entities=${this._configEntities}
-          @entities-changed="${this._valueChanged}"
+          @entities-changed=${this._valueChanged}
         ></hui-entity-editor>
-        <hui-theme-select-editor
+        <ha-expansion-panel>
-          .hass=${this.hass}
+          <span class="title" slot="title">
-          .value="${this._theme}"
+            ${this.hass.localize(
-          .configValue="${"theme"}"
+              `ui.panel.lovelace.editor.card.picture-entity.camera_options`
-          @value-changed="${this._valueChanged}"
+            )}
-        ></hui-theme-select-editor>
+          </span>
-      </div>
+          <ha-entity-picker
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.camera_image"
+            )}
+            .hass=${this.hass}
+            .value=${this._camera_image}
+            .configValue=${"camera_image"}
+            @value-changed=${this._valueChanged}
+            .includeDomains=${includeDomains}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-dropdown-menu
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.camera_view"
+            )}
+            .configValue=${"camera_view"}
+            @value-changed=${this._valueChanged}
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              .selected=${views.indexOf(this._camera_view)}
+            >
+              ${views.map((view) => {
+                return html`<paper-item>${view}</paper-item>`;
+              })}
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </ha-expansion-panel>
+        <div slot="advanced" class="card-config">
+          <ha-entity-picker
+            allow-custom-entity
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.entity"
+            )}
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            @value-changed=${this._valueChanged}
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hold_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._hold_action}
+            .actions=${actions}
+            .configValue=${"hold_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 
@@ -258,8 +256,15 @@ export class HuiPictureGlanceCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -16,6 +16,7 @@ import { HomeAssistant } from "../../../../types";
 import { PlantStatusCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -33,6 +34,8 @@ export class HuiPlantStatusCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PlantStatusCardConfig;
 
   public setConfig(config: PlantStatusCardConfig): void {
@@ -58,37 +61,42 @@ export class HuiPlantStatusCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
+              "ui.panel.lovelace.editor.card.config.required"
-          @change="${this._valueChanged}"
+            )})"
-          allow-custom-entity
+            .hass=${this.hass}
-        ></ha-entity-picker>
+            .value=${this._entity}
-        <paper-input
+            .configValue=${"entity"}
-          .label="${this.hass.localize(
+            .includeDomains=${includeDomains}
-            "ui.panel.lovelace.editor.card.generic.name"
+            @change=${this._valueChanged}
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -17,11 +17,13 @@ import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -44,6 +46,8 @@ export class HuiSensorCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: SensorCardConfig;
 
   public setConfig(config: SensorCardConfig): void {
@@ -91,105 +95,99 @@ export class HuiSensorCardEditor extends LitElement
     const graphs = ["line", "none"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._name}
-          .configValue=${"name"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <div class="side-by-side">
-          <ha-icon-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            .includeDomains=${includeDomains}
+            @change=${this._valueChanged}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )}
+            .value=${this._name}
+            .configValue=${"name"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <div class="side-by-side">
+            <paper-dropdown-menu
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.sensor.graph_type"
+              )}
+              .configValue=${"graph"}
+              @value-changed=${this._valueChanged}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${graphs.indexOf(this._graph)}
+              >
+                ${graphs.map((graph) => {
+                  return html`<paper-item>${graph}</paper-item>`;
+                })}
+              </paper-listbox>
+            </paper-dropdown-menu>
+            <paper-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.hours_to_show"
+              )}
+              type="number"
+              .value=${this._hours_to_show}
+              .configValue=${"hours_to_show"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+          </div>
+        </div>
+        <div slot="advanced" class="card-config">
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.sensor.show_more_detail"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._detail === 2}
+              .configValue=${"detail"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.unit"
+            )}
+            .value=${this._unit}
+            .configValue=${"unit"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-icon-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )}
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
-          <paper-dropdown-menu
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.graph_type"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue=${"graph"}
-            @value-changed=${this._valueChanged}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              .selected=${graphs.indexOf(this._graph)}
-            >
-              ${graphs.map((graph) => {
-                return html`<paper-item>${graph}</paper-item>`;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.unit"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._unit}
-            .configValue=${"unit"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-          <ha-formfield
-            label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.show_more_detail"
-            )}
-          >
-            <ha-switch
-              .checked=${this._detail === 2}
-              .configValue=${"detail"}
-              @change=${this._change}
-            ></ha-switch>
-          </ha-formfield>
-        </div>
-        <div class="side-by-side">
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._hours_to_show}
-            .configValue=${"hours_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -4,19 +4,20 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { string, assert, object, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -29,6 +30,8 @@ export class HuiShoppingListEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: ShoppingListCardConfig;
 
   public setConfig(config: ShoppingListCardConfig): void {
@@ -50,33 +53,38 @@ export class HuiShoppingListEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        ${!isComponentLoaded(this.hass, "shopping_list")
+        .hass=${this.hass}
-          ? html`
+        .isAdvanced=${this.isAdvanced}
-              <div class="error">
+      >
-                ${this.hass.localize(
+        <div class="card-config">
-                  "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
+          ${!isComponentLoaded(this.hass, "shopping_list")
-                )}
+            ? html`
-              </div>
+                <div class="error">
-            `
+                  ${this.hass.localize(
-          : ""}
+                    "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
-        <paper-input
+                  )}
-          .label="${this.hass.localize(
+                </div>
-            "ui.panel.lovelace.editor.card.generic.title"
+              `
-          )} (${this.hass.localize(
+            : ""}
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._title}"
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue="${"title"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { ThermostatCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -32,6 +33,8 @@ export class HuiThermostatCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: ThermostatCardConfig;
 
   public setConfig(config: ThermostatCardConfig): void {
@@ -57,37 +60,42 @@ export class HuiThermostatCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            .label="${this.hass.localize(
-          .hass=${this.hass}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .value="${this._entity}"
+            )} (${this.hass.localize(
-          .configValue=${"entity"}
+              "ui.panel.lovelace.editor.card.config.required"
-          .includeDomains=${includeDomains}
+            )})"
-          @change="${this._valueChanged}"
+            .hass=${this.hass}
-          allow-custom-entity
+            .value=${this._entity}
-        ></ha-entity-picker>
+            .configValue=${"entity"}
-        <paper-input
+            .includeDomains=${includeDomains}
-          .label="${this.hass.localize(
+            @change=${this._valueChanged}
-            "ui.panel.lovelace.editor.card.generic.name"
+            allow-custom-entity
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

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

@@ -9,15 +9,16 @@ import {
 } from "lit-element";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import "../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
-import "../../../../components/entity/ha-entity-attribute-picker";
 import { HomeAssistant } from "../../../../types";
 import { WeatherForecastCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -37,6 +38,8 @@ export class HuiWeatherForecastCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: WeatherForecastCardConfig;
 
   public setConfig(config: WeatherForecastCardConfig): void {
@@ -70,31 +73,56 @@ export class HuiWeatherForecastCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.name"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            .includeDomains=${includeDomains}
+            @change=${this._valueChanged}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )}
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_forecast !== false}
+              .configValue=${"show_forecast"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
+        </div>
+        <div slot="advanced" class="card-config">
+          <ha-entity-attribute-picker
+            .hass=${this.hass}
+            .entityId=${this._entity}
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
+            )}
+            .value=${this._secondary_info_attribute}
+            .configValue=${"secondary_info_attribute"}
+            @value-changed=${this._valueChanged}
+          ></ha-entity-attribute-picker>
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
@@ -102,33 +130,7 @@ export class HuiWeatherForecastCardEditor extends LitElement
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-        <div class="side-by-side">
+      </hui-config-element-template>
-          <ha-entity-attribute-picker
-            .hass=${this.hass}
-            .entityId=${this._entity}
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._secondary_info_attribute}
-            .configValue=${"secondary_info_attribute"}
-            @value-changed=${this._valueChanged}
-          ></ha-entity-attribute-picker>
-          <ha-formfield
-            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.weather-forecast.show_forecast"
-            )}
-            .dir=${computeRTLDirection(this.hass)}
-          >
-            <ha-switch
-              .checked=${this._config!.show_forecast !== false}
-              .configValue=${"show_forecast"}
-              @change=${this._valueChanged}
-            ></ha-switch
-          ></ha-formfield>
-        </div>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts

@@ -53,7 +53,7 @@ export class HuiCreateDialogHeaderFooter extends LitElement
             `ui.panel.lovelace.editor.header-footer.choose_header_footer`,
             "type",
             this.hass!.localize(
-              `ui.panel.lovelace.editor.header-footer.${this._params.type}`
+              `ui.panel.lovelace.editor.header-footer.${this._params.type}.name`
             )
           )
         )}

src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
+import { mdiChevronRight } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
@@ -31,56 +31,26 @@ export class HuiHeaderFooterEditor extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div>
+      <div @click=${this._click}>
         <span>
           ${this.hass.localize(
-            `ui.panel.lovelace.editor.header-footer.${this.configValue}`
+            `ui.panel.lovelace.editor.header-footer.${this.configValue}.manage`
-          )}:
+          )}
-          ${!this.config?.type
-            ? this.hass!.localize("ui.panel.lovelace.editor.common.none")
-            : this.hass!.localize(
-                `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
-              )}
         </span>
-      </div>
+        <ha-svg-icon .path=${mdiChevronRight}></ha-svg-icon>
-      <div>
-        ${!this.config?.type
-          ? html`
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.panel.lovelace.editor.common.add"
-                )}
-                class="add-icon"
-                @click=${this._add}
-              >
-                <ha-svg-icon .path=${mdiPlus}></ha-svg-icon>
-              </mwc-icon-button>
-            `
-          : html`
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.panel.lovelace.editor.common.clear"
-                )}
-                class="remove-icon"
-                @click=${this._delete}
-              >
-                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-              </mwc-icon-button>
-              <mwc-icon-button
-                aria-label=${this.hass!.localize(
-                  "ui.panel.lovelace.editor.common.edit"
-                )}
-                class="edit-icon"
-                @click=${this._edit}
-              >
-                <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-              </mwc-icon-button>
-            `}
       </div>
     `;
   }
 
-  private _edit(): void {
+  private _click(): void {
+    if (!this.config?.type) {
+      showCreateHeaderFooterDialog(this, {
+        pickHeaderFooter: (config) => this._elementPicked(config),
+        type: this.configValue,
+      });
+      return;
+    }
+
     fireEvent(this, "edit-detail-element", {
       subElementConfig: {
         elementConfig: this.config,
@@ -89,13 +59,6 @@ export class HuiHeaderFooterEditor extends LitElement {
     });
   }
 
-  private _add(): void {
-    showCreateHeaderFooterDialog(this, {
-      pickHeaderFooter: (config) => this._elementPicked(config),
-      type: this.configValue,
-    });
-  }
-
   private _elementPicked(config: LovelaceHeaderFooterConfig): void {
     fireEvent(this, "value-changed", { value: config });
     fireEvent(this, "edit-detail-element", {
@@ -106,35 +69,20 @@ export class HuiHeaderFooterEditor extends LitElement {
     });
   }
 
-  private _delete(): void {
-    fireEvent(this, "value-changed", { value: "" });
-  }
-
   static get styles(): CSSResult {
     return css`
-      :host {
-        font-size: 16px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        align-items: center;
-        padding-bottom: 12px;
-      }
-
       :host > div {
         display: flex;
         align-items: center;
+        justify-content: space-between;
+        padding-bottom: 12px;
+        min-height: 48px;
+        cursor: pointer;
       }
 
-      mwc-icon-button,
+      ha-svg-icon {
-      .header-footer-icon {
-        --mdc-icon-button-size: 36px;
         color: var(--secondary-text-color);
       }
-
-      .header-footer-icon {
-        padding-right: 8px;
-      }
     `;
   }
 }

src/panels/lovelace/editor/hui-config-element-template.ts

@@ -0,0 +1,46 @@
+import {
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../components/ha-expansion-panel";
+import { HomeAssistant } from "../../../types";
+import { configElementStyle } from "./config-elements/config-elements-style";
+
+@customElement("hui-config-element-template")
+export class HuiConfigElementTemplate extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public isAdvanced? = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <slot></slot>
+      ${this.isAdvanced
+        ? html`
+            <ha-expansion-panel>
+              <span class="title" slot="title">
+                ${this.hass.localize(
+                  `ui.panel.lovelace.editor.common.advanced_options`
+                )}
+              </span>
+              <slot name="advanced"></slot>
+            </ha-expansion-panel>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResult {
+    return configElementStyle;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-config-element-template": HuiConfigElementTemplate;
+  }
+}

src/panels/lovelace/editor/hui-element-editor.ts

@@ -31,7 +31,11 @@ import { GUISupportError } from "./gui-support-error";
 import { EditSubElementEvent, GUIModeChangedEvent } from "./types";
 
 export interface ConfigChangedEvent {
-  config: LovelaceCardConfig | LovelaceRowConfig | LovelaceHeaderFooterConfig;
+  config:
+    | LovelaceCardConfig
+    | LovelaceRowConfig
+    | LovelaceHeaderFooterConfig
+    | undefined;
   error?: string;
   guiModeAvailable?: boolean;
 }
@@ -55,6 +59,8 @@ export abstract class HuiElementEditor<T> extends LitElement {
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
+  @property({ attribute: false }) public isAdvanced?: boolean;
+
   @internalProperty() private _yaml?: string;
 
   @internalProperty() private _config?: T;
@@ -144,10 +150,14 @@ export abstract class HuiElementEditor<T> extends LitElement {
     });
   }
 
-  public toggleMode() {
+  public toggleMode(): void {
     this.GUImode = !this.GUImode;
   }
 
+  public remove(): void {
+    this._configElement?.remove();
+  }
+
   public refreshYamlEditor(focus = false) {
     if (this._configElement?.refreshYamlEditor) {
       this._configElement.refreshYamlEditor(focus);
@@ -237,6 +247,9 @@ export abstract class HuiElementEditor<T> extends LitElement {
     ) {
       this._configElement.lovelace = this.lovelace;
     }
+    if (this._configElement && changedProperties.has("isAdvanced")) {
+      this._configElement.isAdvanced = this.isAdvanced;
+    }
   }
 
   private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
@@ -283,6 +296,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
         }
 
         configElement.hass = this.hass;
+        configElement.isAdvanced = this.isAdvanced;
         if ("lovelace" in configElement) {
           configElement.lovelace = this.lovelace;
         }

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -1,5 +1,6 @@
+import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button";
-import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
+import { mdiChevronRight, mdiDragVerticalVariant } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -19,7 +20,7 @@ import Sortable, {
 } from "sortablejs/modular/sortable.core.esm";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
-import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
+import "../../../components/ha-card";
 import "../../../components/ha-svg-icon";
 import { sortableStyles } from "../../../resources/ha-sortable-style";
 import { HomeAssistant } from "../../../types";
@@ -63,78 +64,72 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     }
 
     return html`
-      <h3>
+      <div class="title">
-        ${this.label ||
+        <span>
-        `${this.hass!.localize(
+          ${this.label ||
-          "ui.panel.lovelace.editor.card.generic.entities"
+          `${this.hass!.localize(
-        )} (${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.entities"
-          "ui.panel.lovelace.editor.card.config.required"
+          )}:`}
-        )})`}
+        </span>
-      </h3>
+        <mwc-button
+          .label=${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.entities.add_row"
+          )}
+          @click=${this._addEntity}
+        ></mwc-button>
+      </div>
       <div class="entities">
         ${guard([this.entities, this._renderEmptySortable], () =>
           this._renderEmptySortable
             ? ""
             : this.entities!.map((entityConf, index) => {
+                const stateObj = this.hass!.states[
+                  (entityConf as EntityConfig).entity
+                ];
                 return html`
-                  <div class="entity">
+                  <ha-card
-                    <ha-svg-icon class="handle" .path=${mdiDrag}></ha-svg-icon>
+                    outlined
-                    ${entityConf.type
+                    class="entity"
-                      ? html`
+                    .index=${index}
-                          <div class="special-row">
+                    @click=${this._editRow}
-                            <div>
+                  >
-                              <span>
+                    <ha-svg-icon
-                                ${this.hass!.localize(
+                      class="handle"
-                                  `ui.panel.lovelace.editor.card.entities.entity_row.${entityConf.type}`
+                      .path=${mdiDragVerticalVariant}
-                                )}
+                    ></ha-svg-icon>
-                              </span>
+                    <div class="info">
-                              <span class="secondary"
+                      <span class="primary">
-                                >${this.hass!.localize(
+                        ${entityConf.type
-                                  "ui.panel.lovelace.editor.card.entities.edit_special_row"
+                          ? html`
-                                )}</span
+                              ${this.hass!.localize(
-                              >
+                                `ui.panel.lovelace.editor.card.entities.entity_row.${entityConf.type}`
-                            </div>
+                              )}
-                          </div>
+                            `
-                        `
+                          : html`
-                      : html`
+                              ${(entityConf as EntityConfig).name ||
-                          <ha-entity-picker
+                              stateObj?.attributes.friendly_name ||
-                            allow-custom-entity
+                              (entityConf as EntityConfig).entity}
-                            hideClearIcon
+                            `}
-                            .hass=${this.hass}
+                      </span>
-                            .value=${(entityConf as EntityConfig).entity}
+                      <span class="secondary">
-                            .index=${index}
+                        ${entityConf.type
-                            @value-changed=${this._valueChanged}
+                          ? html`
-                          ></ha-entity-picker>
+                              ${this.hass!.localize(
-                        `}
+                                "ui.panel.lovelace.editor.card.entities.edit_special_row"
-                    <mwc-icon-button
+                              )}
-                      aria-label=${this.hass!.localize(
+                            `
-                        "ui.components.entity.entity-picker.clear"
+                          : html`${(entityConf as EntityConfig).entity}`}
-                      )}
+                      </span>
-                      class="remove-icon"
+                    </div>
-                      .index=${index}
+                    <ha-svg-icon
-                      @click=${this._removeRow}
-                    >
-                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                    </mwc-icon-button>
-                    <mwc-icon-button
-                      aria-label=${this.hass!.localize(
-                        "ui.components.entity.entity-picker.edit"
-                      )}
                       class="edit-icon"
-                      .index=${index}
+                      .path=${mdiChevronRight}
-                      @click=${this._editRow}
+                    ></ha-svg-icon>
-                    >
+                  </ha-card>
-                      <ha-svg-icon .path=${mdiPencil}></ha-svg-icon>
-                    </mwc-icon-button>
-                  </div>
                 `;
               })
         )}
       </div>
-      <ha-entity-picker
-        .hass=${this.hass}
-        @value-changed=${this._addEntity}
-      ></ha-entity-picker>
     `;
   }
 
@@ -189,16 +184,20 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     });
   }
 
-  private async _addEntity(ev: CustomEvent): Promise<void> {
+  private async _addEntity(): Promise<void> {
-    const value = ev.detail.value;
-    if (value === "") {
-      return;
-    }
     const newConfigEntities = this.entities!.concat({
-      entity: value as string,
+      entity: Object.keys(this.hass!.states)[0],
     });
-    (ev.target as HaEntityPicker).value = "";
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
+
+    const index = newConfigEntities.length - 1;
+    fireEvent(this, "edit-detail-element", {
+      subElementConfig: {
+        index,
+        type: "row",
+        elementConfig: newConfigEntities[index],
+      },
+    });
   }
 
   private _rowMoved(ev: SortableEvent): void {
@@ -213,32 +212,6 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newEntities });
   }
 
-  private _removeRow(ev: CustomEvent): void {
-    const index = (ev.currentTarget as any).index;
-    const newConfigEntities = this.entities!.concat();
-
-    newConfigEntities.splice(index, 1);
-
-    fireEvent(this, "entities-changed", { entities: newConfigEntities });
-  }
-
-  private _valueChanged(ev: CustomEvent): void {
-    const value = ev.detail.value;
-    const index = (ev.target as any).index;
-    const newConfigEntities = this.entities!.concat();
-
-    if (value === "") {
-      newConfigEntities.splice(index, 1);
-    } else {
-      newConfigEntities[index] = {
-        ...newConfigEntities[index],
-        entity: value!,
-      };
-    }
-
-    fireEvent(this, "entities-changed", { entities: newConfigEntities });
-  }
-
   private _editRow(ev: CustomEvent): void {
     const index = (ev.currentTarget as any).index;
     fireEvent(this, "edit-detail-element", {
@@ -254,43 +227,62 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     return [
       sortableStyles,
       css`
-        .entity {
+        .title {
+          font-size: 18px;
           display: flex;
+          justify-content: space-between;
           align-items: center;
         }
 
-        .entity .handle {
+        .entity {
-          padding-right: 8px;
+          display: flex;
-          cursor: move;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12px;
+          margin: 8px 0;
+          cursor: pointer;
         }
 
-        .entity ha-entity-picker {
+        .handle {
-          flex-grow: 1;
+          min-width: 18px;
+          --mdc-icon-size: 18px;
+          padding-right: 8px;
+          cursor: move;
+          color: var(--secondary-text-color);
         }
 
         .special-row {
           height: 60px;
-          font-size: 16px;
           display: flex;
           align-items: center;
           justify-content: space-between;
           flex-grow: 1;
         }
 
-        .special-row div {
+        .info {
           display: flex;
           flex-direction: column;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          flex-grow: 1;
         }
 
-        .remove-icon,
         .edit-icon {
-          --mdc-icon-button-size: 36px;
+          min-width: 24px;
           color: var(--secondary-text-color);
         }
 
+        .primary {
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
         .secondary {
           font-size: 12px;
           color: var(--secondary-text-color);
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
       `,
     ];

src/panels/lovelace/editor/hui-sub-element-editor.ts

@@ -1,6 +1,14 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
-import { mdiArrowLeft } from "@mdi/js";
+import "@material/mwc-list/mwc-list-item";
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import {
+  mdiArrowLeft,
+  mdiCodeBracesBox,
+  mdiDotsVertical,
+  mdiFormSelect,
+  mdiTrashCanOutline,
+} from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -13,6 +21,8 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
+import "../../../components/ha-button-menu";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceRowConfig } from "../entity-rows/types";
@@ -34,6 +44,8 @@ export class HuiSubElementEditor extends LitElement {
 
   @property({ attribute: false }) public config!: SubElementEditorConfig;
 
+  @property({ type: Boolean }) public isAdvancedUser? = false;
+
   @internalProperty() private _guiModeAvailable = true;
 
   @internalProperty() private _guiMode = true;
@@ -55,17 +67,64 @@ export class HuiSubElementEditor extends LitElement {
             )}</span
           >
         </div>
-        <mwc-button
+
+        <ha-button-menu
+          fixed
+          corner="BOTTOM_START"
           slot="secondaryAction"
-          .disabled=${!this._guiModeAvailable}
+          @closed=${(ev) => ev.stopPropagation()}
-          @click=${this._toggleMode}
         >
-          ${this.hass.localize(
+          <mwc-icon-button
-            this._guiMode
+            slot="trigger"
-              ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+            .label=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
-              : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+            .title=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
-          )}
+          >
-        </mwc-button>
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          ${this.isAdvancedUser
+            ? html`
+                <mwc-list-item
+                  graphic="icon"
+                  .label=${this.hass!.localize(
+                    this._guiMode
+                      ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                      : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                  )}
+                  .disabled=${!this._guiModeAvailable}
+                  @request-selected=${this._toggleMode}
+                >
+                  <span
+                    >${this.hass!.localize(
+                      this._guiMode
+                        ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                        : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                    )}</span
+                  >
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${this._guiMode ? mdiCodeBracesBox : mdiFormSelect}
+                  ></ha-svg-icon>
+                </mwc-list-item>
+              `
+            : ""}
+          <mwc-list-item
+            graphic="icon"
+            .label=${this.hass!.localize(
+              "ui.panel.lovelace.editor.common.delete"
+            )}
+            @request-selected=${this._remove}
+          >
+            <span
+              >${this.hass!.localize(
+                "ui.panel.lovelace.editor.common.delete"
+              )}</span
+            >
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiTrashCanOutline}
+            ></ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
       </div>
       ${this.config.type === "row"
         ? html`
@@ -95,10 +154,20 @@ export class HuiSubElementEditor extends LitElement {
     fireEvent(this, "go-back");
   }
 
-  private _toggleMode(): void {
+  private _toggleMode(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
     this._editorElement?.toggleMode();
   }
 
+  private _remove(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    fireEvent(this, "config-changed", { config: undefined });
+  }
+
   private _handleGUIModeChanged(ev: HASSDomEvent<GUIModeChangedEvent>): void {
     ev.stopPropagation();
     this._guiMode = ev.detail.guiMode;

src/panels/lovelace/types.ts

@@ -85,6 +85,7 @@ export interface LovelaceRowEditor extends LovelaceGenericElementEditor {
 export interface LovelaceGenericElementEditor extends HTMLElement {
   hass?: HomeAssistant;
   lovelace?: LovelaceConfig;
+  isAdvanced?: boolean;
   setConfig(config: any): void;
   refreshYamlEditor?: (focus: boolean) => void;
 }

src/translations/en.json

@@ -2424,7 +2424,8 @@
             "edit": "Edit",
             "clear": "Clear",
             "add": "Add",
-            "none": "None"
+            "delete": "Delete",
+            "advanced_options": "Advanced Options"
           },
           "raw_editor": {
             "header": "Edit Configuration",
@@ -2564,12 +2565,14 @@
             },
             "entities": {
               "name": "Entities",
-              "show_header_toggle": "Show Header Toggle?",
+              "show_header_toggle": "Show/Hide a toggle in the header to control all entities in the card",
+              "show_header_toggle_secondary": "Only visible when 2 or more entities can be toggled",
               "toggle": "Toggle entities.",
               "description": "The Entities card is the most common type of card. It groups items together into lists.",
               "special_row": "special row",
               "edit_special_row": "View the details of this row by clicking the edit button",
               "entity_row_editor": "Entity Row Editor",
+              "add_row": "Add Row",
               "secondary_info_values": {
                 "none": "No Secondary Info",
                 "entity-id": "Entity ID",
@@ -2667,9 +2670,9 @@
               "minimum": "Minimum",
               "name": "Name",
               "refresh_interval": "Refresh Interval",
-              "show_icon": "Show Icon?",
+              "show_icon": "Show/Hide the icon",
-              "show_name": "Show Name?",
+              "show_name": "Show/Hide the name of the entity",
-              "show_state": "Show State?",
+              "show_state": "Show/Hide the state of the entity",
               "tap_action": "Tap Action",
               "title": "Title",
               "theme": "Theme",
@@ -2679,12 +2682,12 @@
               "state": "State",
               "secondary_info_attribute": "Secondary Info Attribute",
               "search": "Search",
-              "state_color": "Color icons based on state?"
+              "state_color": "Color the icons based on their current states"
             },
             "map": {
               "name": "Map",
               "geo_location_sources": "Geolocation Sources",
-              "dark_mode": "Dark Mode?",
+              "dark_mode": "Change the map colors to a dark theme",
               "default_zoom": "Default Zoom",
               "hours_to_show": "Hours to Show",
               "source": "Source",
@@ -2709,7 +2712,8 @@
             },
             "picture-entity": {
               "name": "Picture Entity",
-              "description": "The Picture Entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of camera entities."
+              "description": "The Picture Entity card displays an entity in the form of an image. Instead of images from URL, it can also show the picture of camera entities.",
+              "camera_options": "Camera Options"
             },
             "picture-glance": {
               "name": "Picture Glance",
@@ -2722,7 +2726,7 @@
             },
             "sensor": {
               "name": "Sensor",
-              "show_more_detail": "Show more detail",
+              "show_more_detail": "Show/Hide more detail in the line graph",
               "graph_type": "Graph Type",
               "description": "The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time."
             },
@@ -2742,7 +2746,7 @@
             "weather-forecast": {
               "name": "Weather Forecast",
               "description": "The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall.",
-              "show_forecast": "Show Forecast"
+              "show_forecast": "Show/Hide the weather forecast at the bottom of the card"
             }
           },
           "view": {
@@ -2761,8 +2765,14 @@
             "by_card": "By Card"
           },
           "header-footer": {
-            "header": "Header",
+            "header": {
-            "footer": "Footer",
+              "name": "Header",
+              "manage": "Manage header configuration"
+            },
+            "footer": {
+              "name": "Footer",
+              "manage": "Manage footer configuration"
+            },
             "choose_header_footer": "Choose a {type}",
             "types": {
               "graph": {