Skip to content

Progress stepper

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

Examples

Basic

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

Basic with 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

Vertical, horizontal responsive

  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

Center aligned with 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

Center aligned, vertical

  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

Vertical with 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

Compact

  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, vertical

  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, vertical responsive

  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, vertical, centered

  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, centered

  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

Basic with an issue

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

Basic with a failure

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

Basic with Patternfly icons

  1. Successful completion
  2. In process
  3. Pending

With help text

  4. Fourth step

Documentation

Overview

The progress stepper is intended to show progress through a finite number of discrete steps.

Add a modifier class to the progress stepper to change the orientation or alignment: .pf-m-center, .pf-m-vertical, or .pf-m-compact.

Steps can be modified with .pf-m-success, .pf-m-warning, .pf-m-danger, .pf-m-info, .pf-m-custom, and .pf-m-in-progress-alt to change their color. Use modifiers .pf-m-pending and .pf-m-current to indicate progress through the steps.

Accessibility

Attribute
Applied to
Outcome
aria-label="[State of the step]"
.pf-v6-c-progress-stepper__step
Provides an accessible label for the step.
aria-hidden="true"
.pf-v6-c-progress-stepper__step-icon <i>
Hides icon for assistive technologies. Required

Usage

Class
Applied to
Outcome
.pf-v6-c-progress-stepper
<ol>
Applies default progress stepper styling. Required
.pf-v6-c-progress-stepper__step
<li>
Defines each step of the progress stepper. Required
.progress-stepper__step-connector
<div>
Creates the connecting line between steps Required
.progress-stepper__step-icon
<span>
Creates the step node and contains the icon designating the type of step. This element is required, but may be empty if no icon is used for the step. Required
.progress-stepper__step-main
<div>
Contains the main text content of the step. This element is required, but may be empty if title and description are not used. Required
.progress-stepper__step-title
<div>, <button>
Contains the title of the step. Note: the step title is a <button> when it has .pf-m-help-text and is used to trigger a popover with help text.
.progress-stepper__step-description
<div>
Contains the description of the step.
.pf-m-center
.pf-v6-c-progress-stepper
Modifies to center each step.
.pf-m-vertical{-on-[breakpoint]}
.pf-v6-c-progress-stepper
Modifies progress stepper vertical layout at optional breakpoint.
.pf-m-horizontal{-on-[breakpoint]}
.pf-v6-c-progress-stepper
Modifies progress stepper horizontal layout at optional breakpoint.
.pf-m-compact
.pf-v6-c-progress-stepper
Modifies for compact styling.
.pf-m-success
.pf-v6-c-progress-stepper__step
Modifies for success styling.
.pf-m-warning
.pf-v6-c-progress-stepper__step
Modifies for warning styling.
.pf-m-danger
.pf-v6-c-progress-stepper__step
Modifies for danger styling.
.pf-m-info
.pf-v6-c-progress-stepper__step
Modifies for info styling.
.pf-m-custom
.pf-v6-c-progress-stepper__step
Modifies for custom styling.
.pf-m-current
.pf-v6-c-progress-stepper__step
Modifies styling for the current step.
.pf-m-pending
.pf-v6-c-progress-stepper__step
Modifies styling for pending steps.
.pf-m-help-text
.pf-v6-c-progress-stepper__step-title
Modifies styling for steps that have help text.

CSS variables

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

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines