diff --git a/labs/layout/supportingpane/internal/_supporting-pane.scss b/labs/layout/supportingpane/internal/_supporting-pane.scss
new file mode 100644
index 0000000000..f6ee7f0cca
--- /dev/null
+++ b/labs/layout/supportingpane/internal/_supporting-pane.scss
@@ -0,0 +1,37 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use 'sass:list';
+// go/keep-sorted end
+
+@mixin styles() {
+ .host {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ width: 100%;
+ }
+
+ slot {
+ width: 100%;
+ height: 100%;
+ }
+
+ :host([variant='expanded']) {
+ flex-direction: row;
+ }
+
+ :host([variant='expanded']) slot[name='supporting'] {
+ max-width: var(--md-supporting-pane-width, 360px);
+ margin-left: 24px;
+ }
+
+ :host([variant='compact']) slot[name='supporting'] {
+ max-height: calc(100% / 2);
+ position: absolute;
+ bottom: 0;
+ }
+}
diff --git a/labs/layout/supportingpane/internal/supporting-pane-styles.scss b/labs/layout/supportingpane/internal/supporting-pane-styles.scss
new file mode 100644
index 0000000000..231e96566e
--- /dev/null
+++ b/labs/layout/supportingpane/internal/supporting-pane-styles.scss
@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './supporting-pane';
+// go/keep-sorted end
+
+@include supporting-pane.styles;
diff --git a/labs/layout/supportingpane/internal/supporting-pane.ts b/labs/layout/supportingpane/internal/supporting-pane.ts
new file mode 100644
index 0000000000..ef5fb08b68
--- /dev/null
+++ b/labs/layout/supportingpane/internal/supporting-pane.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators';
+
+/**
+ * The Supporting Pane Layout.
+ */
+export class SupportingPane extends LitElement {
+ @property({ type: String, reflect: true })
+ variant: 'compact' | 'medium' | 'expanded' = 'expanded';
+ protected override render() {
+ return html`
+
+
+ `;
+ }
+}
diff --git a/labs/layout/supportingpane/supporting-pane.ts b/labs/layout/supportingpane/supporting-pane.ts
new file mode 100644
index 0000000000..e943937593
--- /dev/null
+++ b/labs/layout/supportingpane/supporting-pane.ts
@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { customElement } from 'lit/decorators.js';
+
+import { SupportingPane } from './internal/supporting-pane.js';
+import { styles } from './internal/supporting-pane-styles.css.js';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'md-supporting-pane': MDSupportingPane;
+ }
+}
+
+/**
+ * @final
+ * @suppress {visibility}
+ */
+@customElement('md-supporting-pane')
+export class MDSupportingPane extends SupportingPane {
+ static override styles = [styles];
+}