diff --git a/css/src/components/index.scss b/css/src/components/index.scss
index 2db92a557..37d992d3c 100644
--- a/css/src/components/index.scss
+++ b/css/src/components/index.scss
@@ -13,6 +13,7 @@
@import './notification.scss';
@import './icon.scss';
@import './image.scss';
+@import './pivot-stack.scss';
@import './popover.scss';
@import './pagination.scss';
@import './table.scss';
diff --git a/css/src/components/pivot-stack.scss b/css/src/components/pivot-stack.scss
new file mode 100644
index 000000000..989b3ef39
--- /dev/null
+++ b/css/src/components/pivot-stack.scss
@@ -0,0 +1,170 @@
+@use 'sass:math';
+
+$ps-height: 44px !default;
+$ps-font-size-large: $font-size-6 !default;
+$ps-font-size-desktop: $font-size-7 !default;
+$ps-font-size-mobile: $font-size-8 !default;
+
+$ps-horizontal-spacing: $spacer-3 !default;
+$ps-submenu-button-padding: $spacer-3 $spacer-5 !default;
+
+$ps-button-color: $text !default;
+$ps-button-hover-background-color: $body-background-medium !default;
+
+$ps-button-tag-margin: math.div($font-size-9, 3) !default;
+
+$ps-hover-bottom-thickness: math.div($spacer-2, 2) !default;
+$ps-border-bottom-style-hover: 2px solid $primary !default;
+
+.pivot-stack {
+ display: flex;
+ position: relative;
+ align-items: stretch;
+ justify-content: space-between;
+ box-sizing: border-box;
+ width: 100%;
+ height: $ps-height;
+ min-height: $ps-height;
+ padding-#{$user-left}: 0;
+ padding-#{$user-right}: 0;
+}
+
+.pivot-stack-nav {
+ display: none;
+ @include tablet {
+ display: flex;
+ }
+
+ align-items: stretch;
+}
+
+.pivot-stack-nav-list {
+ display: flex;
+ align-items: stretch;
+}
+
+// TODO: add styling for "pressed" state
+
+.pivot-stack-button {
+ @include unselectable;
+
+ display: flex;
+ flex-grow: 0;
+ flex-shrink: 0;
+ align-items: center;
+ align-self: stretch;
+ justify-content: center;
+ min-width: 54px;
+ padding: 0 $ps-horizontal-spacing;
+ border: none; // override button default
+ outline-offset: -1 * $focus-width !important; // inset focus outline.
+ background-color: transparent; // override button default
+ color: $ps-button-color;
+ font-size: $ps-font-size-mobile;
+ line-height: normal;
+ text-decoration: none !important;
+ white-space: nowrap;
+ cursor: pointer;
+
+ > .icon:first-child {
+ margin-right: $spacer-2;
+ }
+
+ > .icon:last-child {
+ margin-left: $spacer-2;
+ }
+
+ .dropdown-menu &,
+ .pivot-stack-mobile-nav & {
+ justify-content: flex-start;
+ }
+
+ .pivot-stack-mobile-nav & {
+ padding: $ps-horizontal-spacing * 2;
+ }
+
+ &:visited {
+ color: $ps-button-color;
+ }
+
+ &.dropdown-trigger[aria-expanded='true'] {
+ background-color: $ps-button-hover-background-color;
+ }
+
+ .dropdown-menu & {
+ padding: $ps-submenu-button-padding;
+ }
+
+ :active &,
+ .is-active:not([aria-expanded='true']) &,
+ .focus-visible:not([aria-expanded='true']) & {
+ position: relative;
+ font-weight: $weight-semibold;
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 0;
+ bottom: -#{$ps-hover-bottom-thickness};
+ left: 0;
+ margin: 0 $ps-horizontal-spacing;
+ border-bottom: $ps-border-bottom-style-hover;
+ content: '';
+ }
+ }
+
+ &.is-large {
+ font-size: $ps-font-size-large;
+ }
+}
+
+.pivot-stack-item {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+
+ &.has-spacing {
+ margin: 0 $ps-horizontal-spacing;
+ }
+
+ &.is-category {
+ margin: 0 $ps-horizontal-spacing;
+
+ > .pivot-stack-button {
+ .tag {
+ margin-bottom: $ps-button-tag-margin;
+ }
+ }
+
+ > .is-title {
+ padding-left: $ps-horizontal-spacing;
+ }
+
+ &::before {
+ display: inline-block;
+ height: $spacer-7;
+ border-left: 2px solid $text-subtle;
+ content: '';
+ margin-#{$user-left}: $ps-horizontal-spacing;
+ margin-#{$user-right}: 2 * $ps-horizontal-spacing;
+ }
+ }
+
+ &:hover {
+ background-color: $ps-button-hover-background-color;
+
+ &.is-active {
+ position: relative;
+
+ &::after {
+ display: block;
+ position: absolute;
+ right: 0;
+ bottom: -#{$ps-hover-bottom-thickness};
+ left: 0;
+ border-bottom: $ps-border-bottom-style-hover;
+ content: '';
+ }
+ }
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 504afcc30..617a9ea42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,7 +29,7 @@
},
"css": {
"name": "@microsoft/atlas-css",
- "version": "3.30.0",
+ "version": "3.31.0",
"license": "MIT",
"devDependencies": {
"@microsoft/stylelint-config-atlas": "4.0.2",
@@ -96,7 +96,7 @@
},
"integration": {
"name": "@microsoft/atlas-integration",
- "version": "1.3.0",
+ "version": "1.4.0",
"license": "ISC",
"devDependencies": {
"@axe-core/playwright": "^4.6.1",
@@ -11328,10 +11328,10 @@
},
"plugins/parcel-transformer-markdown-html": {
"name": "@microsoft/parcel-transformer-markdown-html",
- "version": "2.6.0",
+ "version": "2.6.1",
"license": "MIT",
"dependencies": {
- "@microsoft/atlas-css": "^3.30.0",
+ "@microsoft/atlas-css": "^3.31.0",
"@parcel/plugin": "^2.8.3",
"@parcel/utils": "^2.8.3",
"front-matter": "^4.0.2",
@@ -11359,13 +11359,13 @@
},
"site": {
"name": "@microsoft/atlas-site",
- "version": "0.36.0",
+ "version": "0.37.0",
"license": "MIT",
"dependencies": {
"@microsoft/atlas-js": "^1.5.5"
},
"devDependencies": {
- "@microsoft/atlas-css": "^3.30.0",
+ "@microsoft/atlas-css": "^3.31.0",
"@microsoft/parcel-transformer-markdown-html": "^2.6.0",
"@parcel/transformer-sass": "^2.8.3",
"@typescript-eslint/eslint-plugin": "^5.58.0",
@@ -12280,7 +12280,7 @@
"@microsoft/atlas-site": {
"version": "file:site",
"requires": {
- "@microsoft/atlas-css": "^3.30.0",
+ "@microsoft/atlas-css": "^3.31.0",
"@microsoft/atlas-js": "^1.5.5",
"@microsoft/parcel-transformer-markdown-html": "^2.6.0",
"@parcel/transformer-sass": "^2.8.3",
@@ -12312,7 +12312,7 @@
"@microsoft/parcel-transformer-markdown-html": {
"version": "file:plugins/parcel-transformer-markdown-html",
"requires": {
- "@microsoft/atlas-css": "^3.30.0",
+ "@microsoft/atlas-css": "^3.31.0",
"@parcel/plugin": "^2.8.3",
"@parcel/utils": "^2.8.3",
"front-matter": "^4.0.2",
diff --git a/site/src/components/pivot-stack.md b/site/src/components/pivot-stack.md
new file mode 100644
index 000000000..a207deddf
--- /dev/null
+++ b/site/src/components/pivot-stack.md
@@ -0,0 +1,169 @@
+---
+title: Pivot Stack
+description: Pivot Stack component in the Atlas Design System
+template: standard
+figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fnode-id%3D2373%253A7743%26t%3DsDMM7LXwbJhYa2fx-1
+classType: Component
+classPrefixes:
+ - pivot-stack
+---
+
+# Pivot Stack
+
+Pivot Stack is a layout component that provides a tabbed interface to display multiple views of a page.
+
+## Usage
+
+Here is an example of a standard pivot stack usage.
+
+```html
+
+```
+
+### With icons
+
+Pivot stack buttons can be decorated with custom icons for a more elaborate representation. Here is an example.
+
+```html
+
+
+ With trailing icons
+
+
+```
+
+### With larger buttons
+
+Another variant of the Pivot stack is with bigger buttons. All you need to do is add the `is-large` class to the pivot stack button element. Here is an example.
+
+```html
+
+
+```