ha-card migration Step #1 Configuration (#3161)

* Improvements to ha-card. Better paper-card compatibility * Remove named slots * Tweak distance between header and contents * Further css tweaking * Convert config dashboard to ha-card * Convert cloud configuration to ha-card. * Convert integrations configuration to ha-card. * Convert user configuration to ha-card. * Convert core configuration to ha-card * Convert person, entity and area config to ha-card * Convert automation and script editor to ha-card * Convert customization editor to ha-card
2025-07-27 19:26:36 +00:00 · 2019-05-07 18:26:56 +02:00 · 2019-05-07 18:26:56 +02:00 · 0e044acaa9
commit 0e044acaa9
parent 1223766523
33 changed files with 246 additions and 266 deletions
--- a/src/panels/config/area_registry/ha-config-area-registry.ts
+++ b/src/panels/config/area_registry/ha-config-area-registry.ts
@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";

 import { HomeAssistant } from "../../../types";
@ -19,6 +18,7 @@ import {
  deleteAreaRegistryEntry,
  createAreaRegistryEntry,
 } from "../../../data/area_registry";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import compare from "../../../common/string/compare";
@ -72,7 +72,7 @@ class HaConfigAreaRegistry extends LitElement {
              )}
            </a>
          </span>
-          <paper-card>
+          <ha-card>
            ${this._items.map((entry) => {
              return html`
                <paper-item @click=${this._openEditEntry} .entry=${entry}>
@ -96,7 +96,7 @@ class HaConfigAreaRegistry extends LitElement {
                  </div>
                `
              : html``}
-          </paper-card>
+          </ha-card>
        </ha-config-section>
      </hass-subpage>

@ -178,10 +178,10 @@ All devices in this area will become unassigned.`)
      a {
        color: var(--primary-color);
      }
-      paper-card {
-        display: block;
+      ha-card {
        max-width: 600px;
        margin: 16px auto;
+        overflow: hidden;
      }
      .empty {
        text-align: center;
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@ -226,6 +226,9 @@ class HaAutomationEditor extends LitElement {
    return [
      haStyle,
      css`
+        ha-card {
+          overflow: hidden;
+        }
        .errors {
          padding: 20px;
          font-weight: bold;
@ -234,15 +237,12 @@ class HaAutomationEditor extends LitElement {
        .content {
          padding-bottom: 20px;
        }
-        paper-card {
-          display: block;
-        }
        .triggers,
        .script {
          margin-top: -16px;
        }
-        .triggers paper-card,
-        .script paper-card {
+        .triggers ha-card,
+        .script ha-card {
          margin-top: 16px;
        }
        .add-card mwc-button {
--- a/src/panels/config/automation/ha-automation-picker.js
+++ b/src/panels/config/automation/ha-automation-picker.js
@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@ -8,6 +7,7 @@ import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/ha-paper-icon-button-arrow-prev";
 import "../../../layouts/ha-app-layout";

@ -32,6 +32,10 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
          display: block;
        }

+        ha-card {
+          overflow: hidden;
+        }
+
        paper-item {
          cursor: pointer;
        }
@ -91,7 +95,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
            </p>
          </div>

-          <paper-card
+          <ha-card
            heading="[[localize('ui.panel.config.automation.picker.pick_automation')]]"
          >
            <template is="dom-if" if="[[!automations.length]]">
@ -110,7 +114,7 @@ class HaAutomationPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                <ha-icon-next></ha-icon-next>
              </paper-item>
            </template>
-          </paper-card>
+          </ha-card>
        </ha-config-section>

        <paper-fab
--- a/src/panels/config/cloud/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/cloud-alexa-pref.ts
@ -7,11 +7,12 @@ import {
  css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";

+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@ -36,7 +37,7 @@ export class CloudAlexaPref extends LitElement {
    const enabled = this.cloudStatus!.prefs.alexa_enabled;

    return html`
-      <paper-card heading="Alexa">
+      <ha-card header="Alexa">
        <paper-toggle-button
          .checked="${enabled}"
          @change="${this._toggleChanged}"
@ -73,7 +74,7 @@ export class CloudAlexaPref extends LitElement {
              `
            : ""}
        </div>
-      </paper-card>
+      </ha-card>
    `;
  }

@ -92,10 +93,11 @@ export class CloudAlexaPref extends LitElement {
      a {
        color: var(--primary-color);
      }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
        position: absolute;
        right: 8px;
-        top: 16px;
+        top: 32px;
      }
    `;
  }
--- a/src/panels/config/cloud/cloud-google-pref.ts
+++ b/src/panels/config/cloud/cloud-google-pref.ts
@ -7,12 +7,13 @@ import {
  css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 import "../../../components/buttons/ha-call-api-button";

+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import "./cloud-exposed-entities";
@ -41,7 +42,7 @@ export class CloudGooglePref extends LitElement {
    } = this.cloudStatus.prefs;

    return html`
-      <paper-card heading="Google Assistant">
+      <ha-card header="Google Assistant">
        <paper-toggle-button
          id="google_enabled"
          .checked="${google_enabled}"
@ -105,7 +106,7 @@ export class CloudGooglePref extends LitElement {
            >Sync devices</ha-call-api-button
          >
        </div>
-      </paper-card>
+      </ha-card>
    `;
  }

@ -137,10 +138,11 @@ export class CloudGooglePref extends LitElement {
      a {
        color: var(--primary-color);
      }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
        position: absolute;
        right: 8px;
-        top: 16px;
+        top: 32px;
      }
      ha-call-api-button {
        color: var(--primary-color);
--- a/src/panels/config/cloud/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/cloud-remote-pref.ts
@ -8,12 +8,13 @@ import {
  css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item-body";
 // tslint:disable-next-line
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";

+import "../../../components/ha-card";
+
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 import {
@ -48,16 +49,16 @@ export class CloudRemotePref extends LitElement {

    if (!remote_certificate) {
      return html`
-        <paper-card heading="Remote Control">
+        <ha-card header="Remote Control">
          <div class="preparing">
            Remote access is being prepared. We will notify you when it's ready.
          </div>
-        </paper-card>
+        </ha-card>
      `;
    }

    return html`
-      <paper-card heading="Remote Control">
+      <ha-card header="Remote Control">
        <paper-toggle-button
          .checked="${remote_connected}"
          @change="${this._toggleChanged}"
@ -83,7 +84,7 @@ export class CloudRemotePref extends LitElement {
              `
            : ""}
        </div>
-      </paper-card>
+      </ha-card>
    `;
  }

@ -111,19 +112,17 @@ export class CloudRemotePref extends LitElement {

  static get styles(): CSSResult {
    return css`
-      paper-card {
-        display: block;
-      }
      .preparing {
        padding: 0 16px 16px;
      }
      a {
        color: var(--primary-color);
      }
-      paper-card > paper-toggle-button {
+      ha-card > paper-toggle-button {
+        margin: -4px 0;
        position: absolute;
        right: 8px;
-        top: 16px;
+        top: 32px;
      }
      .card-actions {
        display: flex;
--- a/src/panels/config/cloud/cloud-webhooks.ts
+++ b/src/panels/config/cloud/cloud-webhooks.ts
@ -51,19 +51,17 @@ export class CloudWebhooks extends LitElement {
    return html`
      ${this.renderStyle()}
      <ha-card header="Webhooks">
-        <div class="body">
+        <div class="card-content">
          Anything that is configured to be triggered by a webhook can be given
          a publicly accessible URL to allow you to send data back to Home
          Assistant from anywhere, without exposing your instance to the
-          internet.
-        </div>
+          internet. ${this._renderBody()}

-        ${this._renderBody()}
-
-        <div class="footer">
-          <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
-            Learn more about creating webhook-powered automations.
-          </a>
+          <div class="footer">
+            <a href="https://www.nabucasa.com/config/webhooks" target="_blank">
+              Learn more about creating webhook-powered automations.
+            </a>
+          </div>
        </div>
      </ha-card>
    `;
@ -194,15 +192,12 @@ export class CloudWebhooks extends LitElement {
  private renderStyle() {
    return html`
      <style>
-        .body {
-          padding: 0 16px 8px;
-        }
        .body-text {
-          padding: 0 16px;
+          padding: 8px 0;
        }
        .webhook {
          display: flex;
-          padding: 4px 16px;
+          padding: 4px 0;
        }
        .progress {
          margin-right: 16px;
@ -211,7 +206,7 @@ export class CloudWebhooks extends LitElement {
          justify-content: center;
        }
        .footer {
-          padding: 16px;
+          padding-top: 16px;
        }
        .body-text a,
        .footer a {
--- a/src/panels/config/cloud/ha-config-cloud-account.js
+++ b/src/panels/config/cloud/ha-config-cloud-account.js
@ -1,10 +1,10 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-api-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@ -41,9 +41,6 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
          padding-bottom: 24px;
          direction: ltr;
        }
-        paper-card {
-          display: block;
-        }
        .account-row {
          display: flex;
          padding: 0 16px;
@ -82,7 +79,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
              </p>
            </div>

-            <paper-card heading="Nabu Casa Account">
+            <ha-card header="Nabu Casa Account">
              <div class="account-row">
                <paper-item-body two-line="">
                  [[cloudStatus.email]]
@ -105,7 +102,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                  >Sign out</mwc-button
                >
              </div>
-            </paper-card>
+            </ha-card>
          </ha-config-section>

          <ha-config-section is-wide="[[isWide]]">
--- a/src/panels/config/cloud/ha-config-cloud-forgot-password.js
+++ b/src/panels/config/cloud/ha-config-cloud-forgot-password.js
@ -1,8 +1,8 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@ -20,8 +20,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
          direction: ltr;
        }

-        paper-card {
-          display: block;
+        ha-card {
          max-width: 600px;
          margin: 0 auto;
          margin-top: 24px;
@ -47,9 +46,8 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
      </style>
      <hass-subpage header="Forgot Password">
        <div class="content">
-          <paper-card>
+          <ha-card header="Forgot your password">
            <div class="card-content">
-              <h1>Forgot your password?</h1>
              <p>
                Enter your email address and we will send you a link to reset
                your password.
@ -72,7 +70,7 @@ class HaConfigCloudForgotPassword extends EventsMixin(PolymerElement) {
                >Send reset email</ha-progress-button
              >
            </div>
-          </paper-card>
+          </ha-card>
        </div>
      </hass-subpage>
    `;
--- a/src/panels/config/cloud/ha-config-cloud-login.js
+++ b/src/panels/config/cloud/ha-config-cloud-login.js
@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item-body";
@ -8,6 +7,7 @@ import "@polymer/paper-ripple/paper-ripple";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@ -34,14 +34,14 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
        [slot="introduction"] a {
          color: var(--primary-color);
        }
-        paper-card {
-          display: block;
-        }
        paper-item {
          cursor: pointer;
        }
-        paper-card:last-child {
-          margin-top: 24px;
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card .card-header {
+          margin-bottom: -8px;
        }
        h1 {
          @apply --paper-font-headline;
@ -97,7 +97,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
              </p>
            </div>

-            <paper-card hidden$="[[!flashMessage]]">
+            <ha-card hidden$="[[!flashMessage]]">
              <div class="card-content flash-msg">
                [[flashMessage]]
                <paper-icon-button icon="hass:close" on-click="_dismissFlash"
@ -105,11 +105,10 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                >
                <paper-ripple id="flashRipple" noink=""></paper-ripple>
              </div>
-            </paper-card>
+            </ha-card>

-            <paper-card>
+            <ha-card header="Sign in">
              <div class="card-content">
-                <h1>Sign In</h1>
                <div class="error" hidden$="[[!_error]]">[[_error]]</div>
                <paper-input
                  label="Email"
@ -142,9 +141,9 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                  forgot password?
                </button>
              </div>
-            </paper-card>
+            </ha-card>

-            <paper-card>
+            <ha-card>
              <paper-item on-click="_handleRegister">
                <paper-item-body two-line="">
                  Start your free 1 month trial
@ -152,7 +151,7 @@ class HaConfigCloudLogin extends NavigateMixin(EventsMixin(PolymerElement)) {
                </paper-item-body>
                <ha-icon-next></ha-icon-next>
              </paper-item>
-            </paper-card>
+            </ha-card>
          </ha-config-section>
        </div>
      </hass-subpage>
--- a/src/panels/config/cloud/ha-config-cloud-register.js
+++ b/src/panels/config/cloud/ha-config-cloud-register.js
@ -1,8 +1,8 @@
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/buttons/ha-progress-button";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@ -29,15 +29,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
      a {
        color: var(--primary-color);
      }
-      paper-card {
-        display: block;
-      }
      paper-item {
        cursor: pointer;
      }
-      paper-card:last-child {
-        margin-top: 24px;
-      }
      h1 {
        @apply --paper-font-headline;
        margin: 0;
@ -84,10 +78,9 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
            </p>
          </div>

-          <paper-card>
+          <ha-card header="Create Account">
            <div class="card-content">
              <div class="header">
-                <h1>Create Account</h1>
                <div class="error" hidden$="[[!_error]]">[[_error]]</div>
              </div>
              <paper-input autofocus="" id="email" label="Email address" type="email" value="{{email}}" on-keydown="_keyDown" error-message="Invalid email"></paper-input>
@ -97,7 +90,7 @@ class HaConfigCloudRegister extends EventsMixin(PolymerElement) {
              <ha-progress-button on-click="_handleRegister" progress="[[_requestInProgress]]">Start trial</ha-progress-button>
              <button class="link" hidden="[[_requestInProgress]]" on-click="_handleResendVerifyEmail">Resend confirmation email</button>
            </div>
-          </paper-card>
+          </ha-card>
        </ha-config-section>
      </div>
    </hass-subpage>
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@ -1,9 +1,9 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../resources/ha-style";

@ -57,8 +57,8 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
          >[[localize('ui.panel.config.core.section.core.introduction')]]</span
        >

-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.validation.heading')]]"
        >
          <div class="card-content">
            [[localize('ui.panel.config.core.section.core.validation.introduction')]]
@ -91,10 +91,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
              <div id="configLog" class="validate-log">[[validateLog]]</div>
            </template>
          </div>
-        </paper-card>
+        </ha-card>

-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.reloading.heading')]]"
        >
          <div class="card-content">
            [[localize('ui.panel.config.core.section.core.reloading.introduction')]]
@ -128,10 +128,10 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
              >[[localize('ui.panel.config.core.section.core.reloading.script')]]
            </ha-call-service-button>
          </div>
-        </paper-card>
+        </ha-card>

-        <paper-card
-          heading="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
+        <ha-card
+          header="[[localize('ui.panel.config.core.section.core.server_management.heading')]]"
        >
          <div class="card-content">
            [[localize('ui.panel.config.core.section.core.server_management.introduction')]]
@ -152,7 +152,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
              >[[localize('ui.panel.config.core.section.core.server_management.stop')]]
            </ha-call-service-button>
          </div>
-        </paper-card>
+        </ha-card>
      </ha-config-section>
    `;
  }
--- a/src/panels/config/dashboard/ha-config-dashboard.js
+++ b/src/panels/config/dashboard/ha-config-dashboard.js
@ -2,12 +2,12 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/ha-menu-button";
 import "../../../components/ha-icon-next";

@ -25,12 +25,12 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
  static get template() {
    return html`
    <style include="iron-flex ha-style">
+      ha-card {
+        overflow: hidden;
+      }
      .content {
        padding-bottom: 32px;
      }
-      paper-card {
-        display: block;
-      }
      a {
        text-decoration: none;
        color: var(--primary-text-color);
@ -51,7 +51,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
          <span slot="introduction">[[localize('ui.panel.config.introduction')]]</span>

          <template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
-            <paper-card>
+            <ha-card>
              <a href='/config/cloud' tabindex="-1">
                <paper-item>
                  <paper-item-body two-line="">
@ -69,11 +69,11 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                  </paper-item-body>
                  <ha-icon-next></ha-icon-next>
                </paper-item>
-              </paper-card>
+              </ha-card>
            </a>
          </template>

-          <paper-card>
+          <ha-card>
            <a href='/config/integrations/dashboard' tabindex="-1">
              <paper-item>
                <paper-item-body two-line>
@ -97,7 +97,7 @@ class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) {
                <ha-icon-next></ha-icon-next>
              </paper-item>
            </a>
-          </paper-card>
+          </ha-card>

          <ha-config-navigation hass="[[hass]]"></ha-config-navigation>
        </ha-config-section>
--- a/src/panels/config/dashboard/ha-config-navigation.js
+++ b/src/panels/config/dashboard/ha-config-navigation.js
@ -1,5 +1,4 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@ -10,6 +9,7 @@ import LocalizeMixin from "../../../mixins/localize-mixin";

 import isComponentLoaded from "../../../common/config/is_component_loaded";

+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";

 const CORE_PAGES = ["core", "customize", "entity_registry", "area_registry"];
@ -21,14 +21,14 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
  static get template() {
    return html`
      <style include="iron-flex">
-        paper-card {
-          display: block;
+        ha-card {
+          overflow: hidden;
        }
        paper-item {
          cursor: pointer;
        }
      </style>
-      <paper-card>
+      <ha-card>
        <template is="dom-repeat" items="[[pages]]">
          <template is="dom-if" if="[[_computeLoaded(hass, item)]]">
            <paper-item on-click="_navigate">
@ -40,7 +40,7 @@ class HaConfigNavigation extends LocalizeMixin(NavigateMixin(PolymerElement)) {
            </paper-item>
          </template>
        </template>
-      </paper-card>
+      </ha-card>
    `;
  }

--- a/src/panels/config/entity_registry/ha-config-entity-registry.ts
+++ b/src/panels/config/entity_registry/ha-config-entity-registry.ts
@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";

 import { HomeAssistant } from "../../../types";
 import {
@ -20,6 +19,7 @@ import {
 } from "../../../data/entity_registry";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
+import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import compare from "../../../common/string/compare";
 import domainIcon from "../../../common/entity/domain_icon";
@ -77,7 +77,7 @@ class HaConfigEntityRegistry extends LitElement {
              )}
            </a>
          </span>
-          <paper-card>
+          <ha-card>
            ${this._items.map((entry) => {
              const state = this.hass!.states[entry.entity_id];
              return html`
@ -103,7 +103,7 @@ class HaConfigEntityRegistry extends LitElement {
                </paper-icon-item>
              `;
            })}
-          </paper-card>
+          </ha-card>
        </ha-config-section>
      </hass-subpage>
    `;
@ -162,9 +162,9 @@ Deleting an entry will not remove the entity from Home Assistant. To do this, yo
      a {
        color: var(--primary-color);
      }
-      paper-card {
-        display: block;
+      ha-card {
        direction: ltr;
+        overflow: hidden;
      }
      paper-icon-item {
        cursor: pointer;
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@ -1,11 +1,11 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import "../../components/ha-card";

 import computeStateName from "../../common/entity/compute_state_name";

@ -13,8 +13,7 @@ class HaEntityConfig extends PolymerElement {
  static get template() {
    return html`
      <style include="iron-flex ha-style">
-        paper-card {
-          display: block;
+        ha-card {
          direction: ltr;
        }

@ -38,7 +37,7 @@ class HaEntityConfig extends PolymerElement {
          @apply --layout-justified;
        }
      </style>
-      <paper-card>
+      <ha-card>
        <div class="card-content">
          <div class="device-picker">
            <paper-dropdown-menu
@ -89,7 +88,7 @@ class HaEntityConfig extends PolymerElement {
            >
          </template>
        </div>
-      </paper-card>
+      </ha-card>
    `;
  }

--- a/src/panels/config/integrations/ha-ce-entities-card.js
+++ b/src/panels/config/integrations/ha-ce-entities-card.js
@ -1,9 +1,9 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";

 import EventsMixin from "../../../mixins/events-mixin";
@ -19,7 +19,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
  static get template() {
    return html`
      <style>
-        paper-card {
+        ha-card {
          flex: 1 0 100%;
          padding-bottom: 8px;
        }
@ -29,7 +29,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
          padding-bottom: 4px;
        }
      </style>
-      <paper-card heading="[[heading]]">
+      <ha-card header="[[heading]]">
        <template is="dom-repeat" items="[[entities]]" as="entity">
          <paper-icon-item on-click="_openMoreInfo">
            <state-badge
@ -42,7 +42,7 @@ class HaCeEntitiesCard extends LocalizeMixIn(EventsMixin(PolymerElement)) {
            </paper-item-body>
          </paper-icon-item>
        </template>
-      </paper-card>
+      </ha-card>
    `;
  }

--- a/src/panels/config/integrations/ha-config-entries-dashboard.js
+++ b/src/panels/config/integrations/ha-config-entries-dashboard.js
@ -2,13 +2,13 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
 import "@material/mwc-button";
 import "@polymer/paper-fab/paper-fab";
-import "@polymer/paper-card/paper-card";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../components/entity/ha-state-icon";
 import "../../../layouts/hass-subpage";
 import "../../../resources/ha-style";
@ -34,13 +34,13 @@ class HaConfigManagerDashboard extends LocalizeMixin(
  static get template() {
    return html`
      <style include="iron-flex ha-style">
+        ha-card {
+          overflow: hidden;
+        }
        mwc-button {
          top: 3px;
          margin-right: -0.57em;
        }
-        paper-card:last-child {
-          margin-top: 12px;
-        }
        .config-entry-row {
          display: flex;
          padding: 0 16px;
@ -84,7 +84,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
            <span slot="header"
              >[[localize('ui.panel.config.integrations.discovered')]]</span
            >
-            <paper-card>
+            <ha-card>
              <template is="dom-repeat" items="[[progress]]">
                <div class="config-entry-row">
                  <paper-item-body>
@ -95,7 +95,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                  >
                </div>
              </template>
-            </paper-card>
+            </ha-card>
          </ha-config-section>
        </template>

@ -103,7 +103,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
          <span slot="header"
            >[[localize('ui.panel.config.integrations.configured')]]</span
          >
-          <paper-card>
+          <ha-card>
            <template is="dom-if" if="[[!entries.length]]">
              <div class="config-entry-row">
                <paper-item-body two-line>
@ -140,7 +140,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                </paper-item>
              </a>
            </template>
-          </paper-card>
+          </ha-card>
        </ha-config-section>

        <paper-fab
--- a/src/panels/config/integrations/ha-config-entry-page.js
+++ b/src/panels/config/integrations/ha-config-entry-page.js
@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

--- a/src/panels/config/integrations/ha-device-card.js
+++ b/src/panels/config/integrations/ha-device-card.js
@ -1,12 +1,12 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";

 import EventsMixin from "../../../mixins/events-mixin";
@ -33,7 +33,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
          max-height: 225px;
          overflow: auto;
        }
-        paper-card {
+        ha-card {
          flex: 1 0 100%;
          padding-bottom: 10px;
          min-width: 0;
@ -61,7 +61,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
          color: var(--secondary-text-color);
        }
      </style>
-      <paper-card heading="[[device.name]]">
+      <ha-card header="[[device.name]]">
        <div class="card-content">
          <!--
            <h1>[[configEntry.title]] ([[_computeIntegrationTitle(localize, configEntry.domain)]])</h1>
@ -125,7 +125,7 @@ class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
            </paper-icon-item>
          </template>
        </div>
-      </paper-card>
+      </ha-card>
    `;
  }

--- a/src/panels/config/js/automation.js
+++ b/src/panels/config/js/automation.js
@ -1,8 +1,8 @@
 import { h, Component } from "preact";

-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";

 import Trigger from "./trigger/index";
 import Condition from "./condition/index";
@ -50,7 +50,7 @@ export default class Automation extends Component {
          <span slot="introduction">
            {localize("ui.panel.config.automation.editor.introduction")}
          </span>
-          <paper-card>
+          <ha-card>
            <div class="card-content">
              <paper-input
                label={localize("ui.panel.config.automation.editor.alias")}
@ -59,7 +59,7 @@ export default class Automation extends Component {
                onvalue-changed={this.onChange}
              />
            </div>
-          </paper-card>
+          </ha-card>
        </ha-config-section>

        <ha-config-section is-wide={isWide}>
--- a/src/panels/config/js/condition/condition_row.js
+++ b/src/panels/config/js/condition/condition_row.js
@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-item/paper-item";
+import "../../../../components/ha-card";

 import ConditionEdit from "./condition_edit";

@ -29,36 +29,36 @@ export default class ConditionRow extends Component {

  render(props) {
    return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.conditions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
        <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.conditions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
          <ConditionEdit {...props} />
        </div>
-      </paper-card>
+      </ha-card>
    );
  }
 }
--- a/src/panels/config/js/condition/index.js
+++ b/src/panels/config/js/condition/index.js
@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";

 import ConditionRow from "./condition_row";

@ -44,13 +44,13 @@ export default class Condition extends Component {
            localize={localize}
          />
        ))}
-        <paper-card>
+        <ha-card>
          <div class="card-actions add-card">
            <mwc-button onTap={this.addCondition}>
              {localize("ui.panel.config.automation.editor.conditions.add")}
            </mwc-button>
          </div>
-        </paper-card>
+        </ha-card>
      </div>
    );
  }
--- a/src/panels/config/js/script.js
+++ b/src/panels/config/js/script.js
@ -1,8 +1,8 @@
 import { h, Component } from "preact";

-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "../ha-config-section";
+import "../../../components/ha-card";

 import Script from "./script/index";

@ -36,7 +36,7 @@ export default class ScriptEditor extends Component {
          <span slot="introduction">
            Use scripts to execute a sequence of actions.
          </span>
-          <paper-card>
+          <ha-card>
            <div class="card-content">
              <paper-input
                label="Name"
@ -45,7 +45,7 @@ export default class ScriptEditor extends Component {
                onvalue-changed={this.onChange}
              />
            </div>
-          </paper-card>
+          </ha-card>
        </ha-config-section>

        <ha-config-section is-wide={isWide}>
--- a/src/panels/config/js/script/action_row.js
+++ b/src/panels/config/js/script/action_row.js
@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";

 import ActionEdit from "./action_edit";

@ -29,36 +29,36 @@ export default class Action extends Component {

  render(props) {
    return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
        <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.actions.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
          <ActionEdit {...props} />
        </div>
-      </paper-card>
+      </ha-card>
    );
  }
 }
--- a/src/panels/config/js/script/index.js
+++ b/src/panels/config/js/script/index.js
@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";

 import ActionRow from "./action_row";

@ -44,13 +44,13 @@ export default class Script extends Component {
            localize={localize}
          />
        ))}
-        <paper-card>
+        <ha-card>
          <div class="card-actions add-card">
            <mwc-button onTap={this.addAction}>
              {localize("ui.panel.config.automation.editor.actions.add")}
            </mwc-button>
          </div>
-        </paper-card>
+        </ha-card>
      </div>
    );
  }
--- a/src/panels/config/js/trigger/index.js
+++ b/src/panels/config/js/trigger/index.js
@ -1,6 +1,6 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@material/mwc-button";
+import "../../../../components/ha-card";

 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
@ -45,13 +45,13 @@ export default class Trigger extends Component {
            localize={localize}
          />
        ))}
-        <paper-card>
+        <ha-card>
          <div class="card-actions add-card">
            <mwc-button onTap={this.addTrigger}>
              {localize("ui.panel.config.automation.editor.triggers.add")}
            </mwc-button>
          </div>
-        </paper-card>
+        </ha-card>
      </div>
    );
  }
--- a/src/panels/config/js/trigger/trigger_row.js
+++ b/src/panels/config/js/trigger/trigger_row.js
@ -1,9 +1,9 @@
 import { h, Component } from "preact";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
+import "../../../../components/ha-card";

 import TriggerEdit from "./trigger_edit";

@ -29,36 +29,36 @@ export default class TriggerRow extends Component {

  render(props) {
    return (
-      <paper-card>
-        <div class="card-menu">
-          <paper-menu-button
-            no-animations
-            horizontal-align="right"
-            horizontal-offset="-5"
-            vertical-offset="-5"
-          >
-            <paper-icon-button
-              icon="hass:dots-vertical"
-              slot="dropdown-trigger"
-            />
-            <paper-listbox slot="dropdown-content">
-              <paper-item disabled>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.duplicate"
-                )}
-              </paper-item>
-              <paper-item onTap={this.onDelete}>
-                {props.localize(
-                  "ui.panel.config.automation.editor.triggers.delete"
-                )}
-              </paper-item>
-            </paper-listbox>
-          </paper-menu-button>
-        </div>
+      <ha-card>
        <div class="card-content">
+          <div class="card-menu">
+            <paper-menu-button
+              no-animations
+              horizontal-align="right"
+              horizontal-offset="-5"
+              vertical-offset="-5"
+            >
+              <paper-icon-button
+                icon="hass:dots-vertical"
+                slot="dropdown-trigger"
+              />
+              <paper-listbox slot="dropdown-content">
+                <paper-item disabled>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.duplicate"
+                  )}
+                </paper-item>
+                <paper-item onTap={this.onDelete}>
+                  {props.localize(
+                    "ui.panel.config.automation.editor.triggers.delete"
+                  )}
+                </paper-item>
+              </paper-listbox>
+            </paper-menu-button>
+          </div>
          <TriggerEdit {...props} />
        </div>
-      </paper-card>
+      </ha-card>
    );
  }
 }
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@ -8,7 +8,6 @@ import {
 } from "lit-element";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";

 import { HomeAssistant } from "../../../types";
@ -19,6 +18,7 @@ import {
  deletePerson,
  createPerson,
 } from "../../../data/person";
+import "../../../components/ha-card";
 import "../../../layouts/hass-subpage";
 import "../../../layouts/hass-loading-screen";
 import compare from "../../../common/string/compare";
@ -70,7 +70,7 @@ class HaConfigPerson extends LitElement {
                `
              : ""}
          </span>
-          <paper-card class="storage">
+          <ha-card class="storage">
            ${this._storageItems.map((entry) => {
              return html`
                <paper-item @click=${this._openEditEntry} .entry=${entry}>
@ -90,10 +90,10 @@ class HaConfigPerson extends LitElement {
                  </div>
                `
              : html``}
-          </paper-card>
+          </ha-card>
          ${this._configItems.length > 0
            ? html`
-                <paper-card heading="Configuration.yaml persons">
+                <ha-card header="Configuration.yaml persons">
                  ${this._configItems.map((entry) => {
                    return html`
                      <paper-item>
@ -103,7 +103,7 @@ class HaConfigPerson extends LitElement {
                      </paper-item>
                    `;
                  })}
-                </paper-card>
+                </ha-card>
              `
            : ""}
        </ha-config-section>
@ -205,10 +205,10 @@ All devices belonging to this person will become unassigned.`)
      a {
        color: var(--primary-color);
      }
-      paper-card {
-        display: block;
+      ha-card {
        max-width: 600px;
        margin: 16px auto;
+        overflow: hidden;
      }
      .empty {
        text-align: center;
@ -218,7 +218,7 @@ All devices belonging to this person will become unassigned.`)
        padding-top: 4px;
        padding-bottom: 4px;
      }
-      paper-card.storage paper-item {
+      ha-card.storage paper-item {
        cursor: pointer;
      }
      paper-fab {
--- a/src/panels/config/script/ha-script-editor.js
+++ b/src/panels/config/script/ha-script-editor.js
@ -39,15 +39,12 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
        .content {
          padding-bottom: 20px;
        }
-        paper-card {
-          display: block;
-        }
        .triggers,
        .script {
          margin-top: -16px;
        }
-        .triggers paper-card,
-        .script paper-card {
+        .triggers ha-card,
+        .script ha-card {
          margin-top: 16px;
        }
        .add-card mwc-button {
--- a/src/panels/config/script/ha-script-picker.js
+++ b/src/panels/config/script/ha-script-picker.js
@ -1,6 +1,5 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@ -11,6 +10,7 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { computeRTL } from "../../../common/util/compute_rtl";

 import "../../../layouts/ha-app-layout";
+import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-paper-icon-button-arrow-prev";

@ -32,6 +32,10 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
          display: block;
        }

+        ha-card {
+          overflow: hidden;
+        }
+
        paper-item {
          cursor: pointer;
        }
@ -88,7 +92,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
            to make sure that you have configured Home Assistant correctly.
          </div>

-          <paper-card heading="Pick script to edit">
+          <ha-card header="Pick script to edit">
            <template is="dom-if" if="[[!scripts.length]]">
              <div class="card-content">
                <p>We couldn't find any editable scripts.</p>
@ -103,7 +107,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
                <ha-icon-next></ha-icon-next>
              </paper-item>
            </template>
-          </paper-card>
+          </ha-card>
        </ha-config-section>

        <paper-fab
--- a/src/panels/config/users/ha-config-user-picker.js
+++ b/src/panels/config/users/ha-config-user-picker.js
@ -1,12 +1,12 @@
 import "@polymer/paper-fab/paper-fab";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";

 import "../../../layouts/hass-subpage";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-card";

 import LocalizeMixin from "../../../mixins/localize-mixin";
 import NavigateMixin from "../../../mixins/navigate-mixin";
@ -47,10 +47,10 @@ class HaUserPicker extends EventsMixin(
          left: 24px;
        }

-        paper-card {
-          display: block;
+        ha-card {
          max-width: 600px;
          margin: 16px auto;
+          overflow: hidden;
        }
        a {
          text-decoration: none;
@ -59,7 +59,7 @@ class HaUserPicker extends EventsMixin(
      </style>

      <hass-subpage header="[[localize('ui.panel.config.users.picker.title')]]">
-        <paper-card>
+        <ha-card>
          <template is="dom-repeat" items="[[users]]" as="user">
            <a href="[[_computeUrl(user)]]">
              <paper-item>
@ -76,7 +76,7 @@ class HaUserPicker extends EventsMixin(
              </paper-item>
            </a>
          </template>
-        </paper-card>
+        </ha-card>

        <paper-fab
          is-wide$="[[isWide]]"
--- a/src/panels/config/users/ha-user-editor.ts
+++ b/src/panels/config/users/ha-user-editor.ts
@ -176,23 +176,15 @@ class HaUserEditor extends LitElement {
    return [
      haStyle,
      css`
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
        ha-card {
-          display: block;
          max-width: 600px;
          margin: 0 auto 16px;
        }
-        ha-card:first-child {
-          margin-top: 16px;
-        }
-        ha-card:last-child {
-          margin-bottom: 16px;
-        }
-        .card-content {
-          padding: 0 16px 16px;
-        }
-        .card-actions {
-          padding: 0 8px;
-        }
        hass-subpage ha-card:first-of-type {
          direction: ltr;
        }