diff --git a/src/navigation/Tabs.scss b/src/navigation/Tabs.scss
index 1ee29ba..cbd8f7c 100644
--- a/src/navigation/Tabs.scss
+++ b/src/navigation/Tabs.scss
@@ -19,6 +19,9 @@
   --tab-active-indicator-color: var(--seeds-color-primary);
   --tab-panel-padding: var(--seeds-spacer-section);
   --tab-panel-background-color: var(--seeds-bg-color-surface);
+  --tab-panel-border-color: var(--tab-border-color);
+  --tab-panel-border-width: var(--tab-border-width);
+  --tab-vertical-sidebar-width: var(--seeds-s60);
   @custom-media --tab-collapse-breakpoint (--sm-only);
 }
 
@@ -99,14 +102,14 @@
 .tabs-panel {
   padding: var(--tab-panel-padding);
   background-color: var(--tab-panel-background-color);
-  border: var(--tab-border-width) solid var(--tab-border-color);
+  border: var(--tab-panel-border-width) solid var(--tab-panel-border-color);
 
   &:not(.is-active) {
     display: none;
   }
 }
 
-@media (--tab-collapse-breakpoint) {
+@mixin vertical-tabs() {
   .tabs-tablist {
     flex-direction: column;
   }
@@ -136,8 +139,34 @@
       box-shadow: inset calc(var(--tab-active-indicator-width) + var(--tab-border-width)) 0px 0px
         var(--tab-active-indicator-color);
     }
+  }  
+}
+
+.seeds-tabs.vertical-sidebar-layout {
+  @include vertical-tabs();
+
+  --tab-panel-padding: 0;
+  --tab-panel-border-width: 0;
+
+  .tabs-panel {
+    margin-block-start: var(--seeds-spacer-label);
+    border-radius: var(--tab-border-radius);
   }
 
+  @media (--md-and-up) {
+    display: grid;
+    grid-template-columns: var(--tab-vertical-sidebar-width) auto;
+    gap: var(--seeds-spacer-section);
+
+    .tabs-panel {
+      margin-block-start: 0;
+    }
+  }
+}
+
+@media (--tab-collapse-breakpoint) {
+  @include vertical-tabs();
+
   .tabs-panel {
     margin-block-start: var(--seeds-spacer-label);
   }
diff --git a/src/navigation/Tabs.tsx b/src/navigation/Tabs.tsx
index 8d0b0b1..5d08a01 100644
--- a/src/navigation/Tabs.tsx
+++ b/src/navigation/Tabs.tsx
@@ -12,6 +12,8 @@ import {
 export interface TabsProps {
   children: React.ReactNode
   className?: string
+  /** If true, displays tabs and the selected tab panel side-by-side on larger displays */
+  verticalSidebar?: boolean
   defaultFocus?: boolean
   defaultIndex?: number
   disabledTabClassName?: string
@@ -27,6 +29,7 @@ export interface TabsProps {
 const Tabs = (props: TabsProps) => {
   const className = ["seeds-tabs"]
   if (props.className) className.push(props.className)
+  if (props.verticalSidebar) className.push("vertical-sidebar-layout")
   const focusTab = typeof props.focusTabOnClick !== "undefined" ? props.focusTabOnClick : false
 
   return <ReactTabs {...props} focusTabOnClick={focusTab} className={className.join(" ")} />
diff --git a/src/navigation/__stories__/Tabs.docs.mdx b/src/navigation/__stories__/Tabs.docs.mdx
index f91f21f..6cb0eda 100644
--- a/src/navigation/__stories__/Tabs.docs.mdx
+++ b/src/navigation/__stories__/Tabs.docs.mdx
@@ -30,7 +30,7 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 | `--tab-font-weight`            | Font weight                                             | `--seeds-font-weight-semibold` |
 | `--tab-font-weight-sm`         | Font weight on mobile screens                           | `--seeds-font-weight-regular`  |
 | `--tab-background-color`       | <Swatch color="bloom-bg-color-surface" border={true} /> | `--seeds-bg-color-surface`     |
-| `--tab-label-color`            | <Swatch color="bloom-text-color-light" />               | `--seeds-text-color-light`     |
+| `--tab-label-color`            | <Swatch color="bloom-text-color-light" border={true} /> | `--seeds-text-color-light`     |
 | `--tab-padding-inline`         | Horizontal spacing within tab interior                  | `--seeds-s6`                   |
 | `--tab-padding-block`          | Vertical spacing within tab interior                    | `--seeds-s4`                   |
 | `--tab-padding-inline-sm`      | Horizontal spacing on mobile screens                    | `--seeds-s6`                   |
@@ -43,4 +43,7 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 | `--tab-active-indicator-color` | <Swatch color="bloom-color-primary" />                  | `--seeds-color-primary`        |
 | `--tab-panel-padding`          | Spacing within the panel interior                       | `--seeds-spacer-section`       |
 | `--tab-panel-background-color` | <Swatch color="bloom-bg-color-surface" border={true} /> | `--seeds-bg-color-surface`     |
+| `--tab-panel-border-color`     | <Swatch color="bloom-border-color" border={true} />     | `--seeds-border-color`         |
+| `--tab-panel-border-width`     | Tab border radius                                       | `--seeds-border-1`             |
+| `--tab-vertical-sidebar-width` | Width of the sidebar in vertical layout for desktop     | `--seeds-s60`                  |
 | `--tab-collapse-breakpoint`    | Screen size breakpoint for vertical orientation         | `--sm-only`                    |
diff --git a/src/navigation/__stories__/Tabs.stories.tsx b/src/navigation/__stories__/Tabs.stories.tsx
index e90c555..a0ef821 100644
--- a/src/navigation/__stories__/Tabs.stories.tsx
+++ b/src/navigation/__stories__/Tabs.stories.tsx
@@ -1,5 +1,7 @@
 import React from "react"
 import Tabs from "../Tabs"
+import Card from "../../blocks/Card"
+import HeadingGroup from "../../text/HeadingGroup"
 
 import MDXDocs from "./Tabs.docs.mdx"
 
@@ -95,3 +97,56 @@ export const SmallTabs = () => {
     </Tabs>
   )
 }
+
+export const VerticalTabs = () => {
+  return (
+    <Tabs verticalSidebar>
+      <Tabs.TabList>
+        <Tabs.Tab>Title 1</Tabs.Tab>
+        <Tabs.Tab>Title 2</Tabs.Tab>
+      </Tabs.TabList>
+
+      <Tabs.TabPanel>
+        <Card>
+          <Card.Header className="test-card-header">
+            <HeadingGroup
+              size="2xl"
+              heading="Wildflower"
+              subheading="Wildflower (or wild flower)"
+            />
+          </Card.Header>
+
+          <Card.Section>
+            <p>
+              A flower that grows in the wild, meaning it was not intentionally seeded or planted.
+              The term implies that the plant probably is neither a hybrid nor a selected cultivar
+              that is in any way different from the way it appears in the wild as a native plant.
+              even if it is growing where it would not naturally.
+            </p>
+          </Card.Section>
+
+          <Card.Section>
+            <p>
+              The term can refer to the flowering plant as a whole, even when not in bloom, and not
+              just the flower.
+            </p>
+          </Card.Section>
+        </Card>
+      </Tabs.TabPanel>
+      <Tabs.TabPanel>
+        <Card spacing="lg">
+          <Card.Header className="test-card-header">
+            <HeadingGroup size="2xl" heading="lg" subheading="Large Spacing" />
+          </Card.Header>
+
+          <Card.Section>
+            <p>
+              The term can refer to the flowering plant as a whole, even when not in bloom, and not
+              just the flower.
+            </p>
+          </Card.Section>
+        </Card>
+      </Tabs.TabPanel>
+    </Tabs>
+  )
+}