Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
Examples
Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.
With step descriptions
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
With alignment
- First stepThis is the first thing to happen
- Second stepThis is the second thing to happen
- Third stepThis is the last thing to happen
Compact
Compact progress steppers will only display the current step's title, and will not display any steps' description texts.
- First step
- Second step
- Third step
With help popover
To add a popover to a progress step, set the popoverRender properties on the ProgressStep component.
- Fourth step
Props
ProgressStepper
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the progress stepper. | |
| className | string | Additional classes applied to the progress stepper container. | |
| isCenterAligned | boolean | Flag indicating the progress stepper should be centered. | |
| isCompact | boolean | Flag indicating the progress stepper should be rendered compactly. | |
| isVertical | boolean | Flag indicating the progress stepper has a vertical layout. |
ProgressStep
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Accessible label for the progress step. Should communicate all information being communicated by the progress step's icon, including the variant and the completed status. | |
| children | React.ReactNode | Content rendered inside the progress step. | |
| className | string | Additional classes applied to the progress step container. | |
| description | string | Description text of a progress step. | |
| icon | React.ReactNode | Custom icon of a progress step. Will override default icons provided by the variant. | |
| isCurrent | boolean | Flag indicating the progress step is the current step. | |
| popoverRender | (stepRef: React.RefObject<any>) => React.ReactNode | Forwards the step ref to rendered function. Use this prop to add a popover to the step. | |
| titleId | string | ID of the title of the progress step. | |
| variant | 'default' | 'success' | 'info' | 'pending' | 'warning' | 'danger' | Variant of the progress step. Each variant has a default icon. |
CSS variables
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--GridAutoFlow | row | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--GridTemplateColumns | auto 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--Top | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--Left | calc(1.75rem / 2) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--Width | auto | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--Height | 100% | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightWidth | 2px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--BorderRightColor | #d2d2d2 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomWidth | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--BorderBottomColor | transparent | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-connector--before--Transform | translateX(-50%) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-main--MarginTop | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-main--MarginBottom | 2rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical__step-main--MarginLeft | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns | 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBottom | 0.5rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow | auto | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-compact__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-vertical--m-center__step-main--MarginLeft | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal--GridAutoFlow | column | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal--GridTemplateColumns | initial | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--Top | calc(1.75rem / 2) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--Left | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--Width | 100% | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--Height | auto | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightWidth | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderRightColor | unset | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomWidth | 2px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--BorderBottomColor | #d2d2d2 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-connector--before--Transform | translateY(-50%) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-main--MarginTop | 0.5rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-main--MarginRight | 0.5rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-main--MarginBottom | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal__step-main--MarginLeft | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBottom | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow | 2 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact--GridAutoFlow | row | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-main--MarginTop | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-main--MarginBottom | 0.5rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-connector--MinWidth | 1.75rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-icon--Width | 1.125rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-icon--FontSize | 0.625rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-title--FontSize | 0.875rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-title--FontWeight | 400 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__pficon--MarginTop | 2px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginTop | -3px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-connector--before--Left | 50% | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center--GridTemplateColumns | 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-connector--JustifyContent | center | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-main--MarginRight | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-main--MarginLeft | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-title--TextAlign | center | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-description--TextAlign | center | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-description--MarginRight | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-description--MarginLeft | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--GridTemplateRows | auto 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--JustifyContent | start | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--ZIndex | 100 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--Width | 1.75rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--Height | 1.75rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--FontSize | 1.125rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--Color | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--BackgroundColor | #fafafa | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--BorderWidth | 2px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-icon--BorderColor | #d2d2d2 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__pficon--MarginTop | 3px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop | -5px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--Color | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--TextAlign | left | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--FontSize | 1rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--FontWeight | 400 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-current__step-title--FontWeight | 700 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-current__step-title--Color | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-pending__step-title--Color | #6a6e73 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--Color | #c9190b | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #8a8d90 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--TextDecorationThickness | 1px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--hover--Color | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-title--m-help-text--focus--Color | #151515 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color | #a30000 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--Color | #a30000 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--TextDecorationColor | #c9190b | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--TextDecorationColor | #a30000 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step--m-danger__step-title--m-help-text--focus--TextDecorationColor | #a30000 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-description--MarginTop | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-description--FontSize | 0.875rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-description--Color | #6a6e73 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-description--TextAlign | left | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--GridAutoFlow | row | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--Top | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--Left | calc(1.75rem / 2) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--Width | auto | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--Height | 100% | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--BorderRightWidth | 2px | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--BorderRightColor | #d2d2d2 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--BorderBottomWidth | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--BorderBottomColor | transparent | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-main--MarginTop | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-main--MarginBottom | 2rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0.5rem | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-c-progress-stepper | --pf-c-progress-stepper--m-center__step-main--before--Content | "" | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-connector--JustifyContent | center | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-main--MarginRight | 0.25rem | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-title--TextAlign | center | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-description--MarginRight | 0 | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-description--MarginLeft | 0 | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper__step-description--TextAlign | center | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper.pf-m-center | --pf-c-progress-stepper--m-vertical__step-main--MarginLeft | 0 | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step-main--MarginTop | 0 | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step-main--MarginBottom | 0.5rem | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step-icon--Width | 1.125rem | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step-icon--FontSize | 0.625rem | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step-title--FontSize | 0.875rem | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__step--m-current__step-title--FontWeight | 400 | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__pficon--MarginTop | 2px | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper__fa-exclamation-triangle--MarginTop | -3px | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper--m-vertical__step-main--MarginLeft | undefined | ||
| .pf-c-progress-stepper.pf-m-compact | --pf-c-progress-stepper--m-vertical__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper__step.pf-m-current | --pf-c-progress-stepper__step-title--FontWeight | 700 | ||
| .pf-c-progress-stepper__step.pf-m-current | --pf-c-progress-stepper__step-title--Color | #151515 | ||
| .pf-c-progress-stepper__step.pf-m-pending | --pf-c-progress-stepper__step-title--Color | #6a6e73 | ||
| .pf-c-progress-stepper__step.pf-m-success | --pf-c-progress-stepper__step-icon--Color | #3e8635 | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-icon--Color | #c9190b | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--Color | #c9190b | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--m-help-text--hover--Color | #a30000 | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--m-help-text--focus--Color | #a30000 | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #c9190b | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--m-help-text--hover--TextDecorationColor | #a30000 | ||
| .pf-c-progress-stepper__step.pf-m-danger | --pf-c-progress-stepper__step-title--m-help-text--focus--TextDecorationColor | #a30000 | ||
| .pf-c-progress-stepper__step.pf-m-warning | --pf-c-progress-stepper__step-icon--Color | #f0ab00 | ||
| .pf-c-progress-stepper__step.pf-m-info | --pf-c-progress-stepper__step-icon--Color | #2b9af3 | ||
| .pf-c-progress-stepper__step:last-child | --pf-c-progress-stepper__step-main--MarginBottom | 0 | ||
| .pf-c-progress-stepper__step-title.pf-m-help-text:hover | --pf-c-progress-stepper__step-title--Color | #151515 | ||
| .pf-c-progress-stepper__step-title.pf-m-help-text:hover | --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #151515 | ||
| .pf-c-progress-stepper__step-title.pf-m-help-text:focus | --pf-c-progress-stepper__step-title--Color | #151515 | ||
| .pf-c-progress-stepper__step-title.pf-m-help-text:focus | --pf-c-progress-stepper__step-title--m-help-text--TextDecorationColor | #151515 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--GridAutoFlow | column | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--GridTemplateColumns | initial | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--Top | calc(1.75rem / 2) | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--Left | 0 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--Width | 100% | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--Height | auto | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--BorderRightWidth | 0 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--BorderRightColor | unset | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--BorderBottomWidth | 2px | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--BorderBottomColor | #d2d2d2 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-connector--before--Transform | translateY(-50%) | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-main--MarginTop | 0.5rem | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-main--MarginRight | 0.5rem | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-main--MarginBottom | 0 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper__step-main--MarginLeft | 0 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--m-compact--GridTemplateColumns | repeat(auto-fill, 1.75rem) | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--m-compact__step-connector--GridRow | 2 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0 | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--m-center__step-connector--before--Content | "" | ||
| .pf-c-progress-stepper.pf-m-horizontal | --pf-c-progress-stepper--m-center__step-main--before--Content | none | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--GridAutoFlow | row | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--GridTemplateColumns | auto 1fr | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--Top | 0 | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--Left | calc(1.75rem / 2) | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--Width | auto | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--Height | 100% | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--BorderRightWidth | 2px | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--BorderRightColor | #d2d2d2 | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--BorderBottomWidth | 0 | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--BorderBottomColor | transparent | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-connector--before--Transform | translateX(-50%) | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-main--MarginTop | 0.25rem | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-main--MarginRight | 0 | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-main--MarginBottom | 2rem | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper__step-main--MarginLeft | 0.25rem | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--m-compact--GridTemplateColumns | 1fr | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--m-compact__step-connector--GridRow | auto | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--m-compact__step-connector--PaddingBottom | 0.5rem | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--m-center__step-connector--before--Content | none | ||
| .pf-c-progress-stepper.pf-m-vertical | --pf-c-progress-stepper--m-center__step-main--before--Content | "" | ||
View source on GitHub
