Progress stepper

A progress stepper displays a timeline of tasks in a workflow and tracks a user's progress through the workflow.

Examples

Progress steppers have default icons associated with the variant property, and may be overriden and customized using the icon property.

Basic

  1. First step
  2. Second step
  3. Third step

With step descriptions

  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This is the last thing to happen

With alignment


  1. First step
    This is the first thing to happen
  2. Second step
    This is the second thing to happen
  3. Third step
    This 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.


  1. First step
  2. Second step
  3. Third step

With an issue

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step

With a failure

  1. First step
  2. Second step
  3. Third step
  4. Fourth step
  5. Fifth step

With custom icons

  1. Successful completion
  2. In process
  3. Pending

With help popover

To add a popover to a progress step, set the popoverRender properties on the ProgressStep component.

  1. Fourth step

Props

ProgressStepper

*required
NameTypeDefaultDescription
aria-labelstringAdds an accessible label to the progress stepper.
childrenReact.ReactNodeContent rendered inside the progress stepper.
classNamestringAdditional classes applied to the progress stepper container.
isCenterAlignedbooleanFlag indicating the progress stepper should be centered.
isCompactbooleanFlag indicating the progress stepper should be rendered compactly.
isVerticalbooleanFlag indicating the progress stepper has a vertical layout.

ProgressStep

*required
NameTypeDefaultDescription
aria-labelstringAccessible label for the progress step. Should communicate all information being communicated by the progress step's icon, including the variant and the completed status.
childrenReact.ReactNodeContent rendered inside the progress step.
classNamestringAdditional classes applied to the progress step container.
descriptionReact.ReactNodeDescription text of a progress step.
iconReact.ReactNodeCustom icon of a progress step. Will override default icons provided by the variant.
isCurrentbooleanFlag indicating the progress step is the current step.
popoverRender(stepRef: React.RefObject<any>) => React.ReactNodeForwards the step ref to rendered function. Use this prop to add a popover to the step.
titleIdstringID 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

Expand or collapse columnSelectorVariableValue
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--GridAutoFlow
row
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns
auto 1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetInlineStart
calc(1.5rem / 2)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Width
auto
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Height
100%
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndWidth
1px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderInlineEndColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndWidth
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--BorderBlockEndColor
transparent
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-connector--before--Transform
translateX(-50%)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart
0px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockEnd
2rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact--GridTemplateColumns
1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--PaddingBlockEnd
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact__step-connector--GridRow
auto
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginBlockStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-compact__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-vertical--m-center__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow
column
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns
initial
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart
calc(1.5rem / 2)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Width
100%
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Height
auto
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndWidth
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderInlineEndColor
unset
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndWidth
1px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--Transform
translateY(-50%)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockStart
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineEnd
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginBlockEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal--m-compact--GridTemplateColumns
repeat(auto-fill, 1.75rem)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--PaddingBlockEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-horizontal--m-compact__step-connector--GridRow
2
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact--GridAutoFlow
row
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-main--MarginBlockEnd
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-connector--MinWidth
1.75rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-icon--Width
1.125rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-icon--FontSize
0.75rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-title--FontSize
1rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-title--FontWeight
500
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__pficon--MarginBlockStart
2px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__fa-exclamation-triangle--MarginBlockStart
-3px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-connector--before--InsetInlineStart
50%
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center--GridTemplateColumns
1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-connector--JustifyContent
center
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-main--MarginInlineEnd
0.25rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-main--MarginInlineStart
0.25rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-main--TextAlign
center
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-description--MarginInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-description--MarginInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--GridTemplateRows
auto 1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--JustifyContent
flex-start
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--ZIndex
100
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--Width
1.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--Height
1.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--FontSize
0.875rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--BorderWidth
1px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-icon--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-current__step-icon--Color
(In light theme) #0066cc
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-info__step-icon--Color
(In light theme) #5e40be
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-success__step-icon--Color
(In light theme) #3d7317
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-warning__step-icon--Color
(In light theme) #dca614
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-danger__step-icon--Color
(In light theme) #b1380b
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-custom__step-icon--Color
(In light theme) #147878
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__pficon--MarginBlockStart
3px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart
-2px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--Color
(In light theme) #151515
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--TextAlign
start
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--FontSize
1rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--FontWeight
400
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight
500
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-current__step-title--Color
(In light theme) #151515
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-pending__step-title--Color
(In light theme) #4d4d4d
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-danger__step-title--Color
(In light theme) #b1380b
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine
underline
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle
dashed
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset
0.25rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationLine
underline
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--hover--TextDecorationStyle
dashed
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color
(In light theme) #004d99
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step--m-danger__step-title--m-help-text--hover--Color
(In light theme) #731f00
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-description--MarginBlockStart
0.25rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-description--FontSize
0.75rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-description--Color
(In light theme) #4d4d4d
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-description--TextAlign
start
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--GridAutoFlow
row
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--GridTemplateColumns
auto 1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart
calc(1.5rem / 2)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--Width
auto
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--Height
100%
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth
1px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor
transparent
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-connector--before--Transform
translateX(-50%)
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-main--MarginBlockStart
0px
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-main--MarginBlockEnd
2rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper__step-main--MarginInlineStart
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact--GridTemplateColumns
1fr
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-connector--GridRow
auto
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd
0.5rem
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-connector--before--Content
none
.pf-v6-c-progress-stepper--pf-v6-c-progress-stepper--m-center__step-main--before--Content
""
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-connector--JustifyContent
center
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-main--MarginInlineEnd
0.25rem
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-main--MarginInlineStart
0.25rem
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper--step-main--TextAlign
center, auto
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-title--TextAlign
undefined, auto
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-description--MarginInlineEnd
0
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-description--MarginInlineStart
0
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper__step-description--TextAlign
undefined, auto
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper.pf-m-center--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step-main--MarginBlockStart
0
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step-main--MarginBlockEnd
0.5rem
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step-icon--Width
1.125rem
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step-icon--FontSize
0.75rem
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step-title--FontSize
1rem
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__step--m-current__step-title--FontWeight
500
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__pficon--MarginBlockStart
2px
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper__fa-exclamation-triangle--MarginBlockStart
-3px
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper--m-vertical__step-main--MarginBlockStart
0
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper.pf-m-compact--pf-v6-c-progress-stepper--m-vertical__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper__step.pf-m-current--pf-v6-c-progress-stepper__step-title--FontWeight
500
.pf-v6-c-progress-stepper__step.pf-m-current--pf-v6-c-progress-stepper__step-title--Color
(In light theme) #151515
.pf-v6-c-progress-stepper__step.pf-m-current--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #0066cc
.pf-v6-c-progress-stepper__step.pf-m-pending--pf-v6-c-progress-stepper__step-title--Color
(In light theme) #4d4d4d
.pf-v6-c-progress-stepper__step.pf-m-success--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #3d7317
.pf-v6-c-progress-stepper__step.pf-m-danger--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #b1380b
.pf-v6-c-progress-stepper__step.pf-m-danger--pf-v6-c-progress-stepper__step-title--Color
(In light theme) #b1380b
.pf-v6-c-progress-stepper__step.pf-m-danger--pf-v6-c-progress-stepper__step-title--m-help-text--hover--Color
(In light theme) #731f00
.pf-v6-c-progress-stepper__step.pf-m-warning--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #dca614
.pf-v6-c-progress-stepper__step.pf-m-info--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #5e40be
.pf-v6-c-progress-stepper__step.pf-m-custom--pf-v6-c-progress-stepper__step-icon--Color
(In light theme) #147878
.pf-v6-c-progress-stepper__step:last-child--pf-v6-c-progress-stepper__step-main--MarginBlockEnd
0
.pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus)--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine
underline
.pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus)--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle
dashed
.pf-v6-c-progress-stepper__step-title.pf-m-help-text:is(:hover, :focus)--pf-v6-c-progress-stepper__step-title--Color
(In light theme) #004d99
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--GridAutoFlow
column
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--GridTemplateColumns
initial
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart
calc(1.5rem / 2)
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart
0
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--Width
100%
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--Height
auto
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth
0
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor
unset
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth
1px
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-connector--before--Transform
translateY(-50%)
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-main--MarginBlockStart
0.5rem
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-main--MarginInlineEnd
0.5rem
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-main--MarginBlockEnd
0
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper__step-main--MarginInlineStart
0
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--m-compact--GridTemplateColumns
repeat(auto-fill, 1.75rem)
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--m-compact__step-connector--GridRow
2
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd
0
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--m-center__step-connector--before--Content
""
.pf-v6-c-progress-stepper.pf-m-horizontal--pf-v6-c-progress-stepper--m-center__step-main--before--Content
none
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--GridAutoFlow
row
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--GridTemplateColumns
auto 1fr
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart
0
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--InsetInlineStart
calc(1.5rem / 2)
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--Width
auto
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--Height
100%
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndWidth
1px
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--BorderInlineEndColor
(In light theme) #c7c7c7
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndWidth
0
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--BorderBlockEndColor
transparent
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-connector--before--Transform
translateX(-50%)
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-main--MarginBlockStart
0px
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-main--MarginInlineEnd
0
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-main--MarginBlockEnd
2rem
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper__step-main--MarginInlineStart
0.5rem
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--m-compact--GridTemplateColumns
1fr
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--m-compact__step-connector--GridRow
auto
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--m-compact__step-connector--PaddingBlockEnd
0.5rem
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--m-center__step-connector--before--Content
none
.pf-v6-c-progress-stepper.pf-m-vertical--pf-v6-c-progress-stepper--m-center__step-main--before--Content
""