` with class `.slds-progress__item` should also get the class `.slds-has-error`.
+
+
+
+
+ Step 1
+ Step 2
+ Step 3
+ Step 4
+ Step 5
+
+
+
+
+### Multiline Step Titles
+
+The vertical progress indicator also supports multiline step descriptions.
+
+
+
+
+ Step 1
+ Step 2
+
+ Step 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+ Step 4
+ Step 5
+
+
+
diff --git a/ui/components/progress-indicator/vertical/_index.scss b/ui/components/progress-indicator/vertical/_index.scss
new file mode 100644
index 0000000000..f3e19cf75d
--- /dev/null
+++ b/ui/components/progress-indicator/vertical/_index.scss
@@ -0,0 +1,77 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+/**
+ * @name vertical
+ * @selector .slds-progress_vertical
+ * @restrict .slds-progress
+ * @variant
+ */
+.slds-progress_vertical {
+ float: left;
+ height: 100%;
+
+ .slds-progress__item.slds-is-active {
+ font-weight: $font-weight-bold;
+ }
+
+ .slds-progress-bar {
+ top: 0;
+ margin-top: 0;
+ margin-left: calc(#{$spacing-x-small} - #{$progress-bar-height} / 2);
+ }
+
+ .slds-progress__list {
+ flex-direction: column;
+ height: 100%;
+ align-items: left;
+ }
+
+ .slds-progress__item {
+ align-self: left;
+ align-items: center;
+
+ &:last-child {
+ align-items: flex-end;
+ }
+ }
+
+ .slds-progress__marker {
+ margin-right: $spacing-medium;
+ min-width: $square-icon-utility-small;
+ }
+
+ .slds-progress__marker_icon {
+ border-right: 0;
+ border-left: 0;
+ }
+
+ .slds-progress__item.slds-is-completed .slds-progress__marker_icon {
+ margin-left: 1px;
+
+ svg {
+ fill: $progress-bar-color-background-fill;
+ }
+ }
+
+ /**
+ * Turn completed stage checkmark green
+ *
+ * @selector .slds-progress__marker_icon-success
+ * @restrict .slds-progress__marker_icon
+ */
+ .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success {
+
+ svg {
+ fill: $progress-bar-color-background-fill-success;
+ }
+ }
+
+ .slds-progress__item.slds-has-error .slds-progress__marker_icon {
+ margin-left: 1px;
+
+ svg {
+ fill: $color-text-error;
+ }
+ }
+}
diff --git a/ui/components/progress-indicator/vertical/example.jsx b/ui/components/progress-indicator/vertical/example.jsx
new file mode 100644
index 0000000000..bcc63d0403
--- /dev/null
+++ b/ui/components/progress-indicator/vertical/example.jsx
@@ -0,0 +1,186 @@
+// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+import React from 'react';
+import classNames from 'classnames';
+import SvgIcon from '../../../shared/svg-icon';
+import { UtilityIcon } from '../../icons/base/example';
+import { ProgressBar } from '../../progress-bar/base/example';
+
+/// ///////////////////////////////////////////
+// Partial(s)
+/// ///////////////////////////////////////////
+
+export let Progress = props => (
+
+);
+
+export let Step = props => (
+
+ {props.done && !props.error ? (
+
+ ) : props.error ? (
+
+ ) : (
+
+
+ {props.children} {props.active ? '- Active' : null}
+
+
+ )}
+ {props.children}
+
+);
+
+/// ///////////////////////////////////////////
+// Export
+/// ///////////////////////////////////////////
+
+export default (
+
+
+
+);
+
+export let states = [
+ {
+ id: 'next-step',
+ label: 'Next Step',
+ element: (
+
+
+
+ )
+ },
+ {
+ id: 'has-error',
+ label: 'Step - Error',
+ element: (
+
+
+
+ )
+ }
+];
+
+export let examples = [
+ {
+ id: 'shade',
+ label: 'On a gray background',
+ element: (
+
+
+
+ )
+ },
+ {
+ id: 'green-success',
+ label: 'With a green success check',
+ element: (
+
+
+
+ )
+ },
+ {
+ id: 'varying-stage-size',
+ label: 'With varying stage sizes',
+ element: (
+
+
+
+ )
+ }
+];