Patternfly Logo

Examples

Basic

Finished

Documentation

Accessibility

AttributeApplied toOutcome
aria-expanded="true".pf-c-wizard__toggleIndicates that the steps menu is visible. Required
aria-expanded="false".pf-c-wizard__toggleIndicates that the steps menu is hidden. Required
aria-label="close".pf-c-wizard__toggle-iconGives the close button an accessible name. Required
aria-hidden="true".pf-c-wizard__toggle-icon, .pf-c-wizard__toggle-dividerHides the icon from assistive technologies. Required
aria-label="Steps".pf-c-wizard__navGives the steps nav element an accessible name. Required
disabledbutton.pf-c-wizard__nav-linkIndicates that the element is disabled. Required when a nav item is disabled
aria-disabled="true"a.pf-c-wizard__nav-linkIndicates that the element is disabled. Required for disabled links with .pf-m-disabled
aria-current="page".pf-c-wizard__nav-linkIndicates the current page link. Can only occur once on page. Required for the current link
tabindex="-1"a.pf-c-wizard__nav-linkRemoves a link from keyboard focus. Required for disabled links with .pf-m-disabled

Usage

ClassApplied toOutcome
.pf-c-wizard<div>Initiates the wizard component. Required
.pf-c-wizard__header<header>Initiates the header. Required when the wizard is in a modal. Not recommended to use when the wizard is placed on a page.
.pf-c-wizard__close.pf-c-button.pf-m-plainInitiates the close button. Required
.pf-c-wizard__title.pf-c-title.pf-m-3xlInitiates the title. Required
.pf-c-wizard__description<p>Initiates the description.
.pf-c-wizard__toggle<button>Initiates the mobile steps menu toggle button. Required
.pf-c-wizard__toggle-list<ol>Initiates the toggle list. Required
.pf-c-wizard__toggle-list-item<li>Initiates a toggle list item. Required
.pf-c-wizard__toggle-num<span>Initiates the step number. Required
.pf-c-wizard__toggle-separator<i>Initiates the separator between steps.
.pf-c-wizard__toggle-icon<span>Initiates the toggle icon wrapper. Required
.pf-c-wizard__outer-wrap<div>Initiates the outer wrapper. Required
.pf-c-wizard__inner-wrap<div>Initiates the inner wrapper. Required
.pf-c-wizard__nav<nav>Initiates the steps nav. Required
.pf-c-wizard__nav-list<ol>Initiates a list of steps. Required
.pf-c-wizard__nav-item<li>Initiates a step list item. Required
.pf-c-wizard__nav-link<a>Initiates a step link. Required
.pf-c-wizard__main<main>, <div>Initiates the main container. Required Note: use the <main> element when when there are no other <main> elements on the page.
.pf-c-wizard__main-body<div>Initiates the main container body section. Required
.pf-c-wizard__footer<footer>Initiates the footer. Required
.pf-m-expanded.pf-c-wizard__toggle, .pf-c-wizard__navModifies the mobile steps toggle and steps menu for the expanded state.
.pf-m-finished.pf-c-wizardModifies the wizard for the finished state.
.pf-m-current.pf-c-wizard__nav-linkModifies a step link for the current state. Required
.pf-m-disabled.pf-c-wizard__nav-linkModifies a step link for the disabled state.
.pf-m-no-padding.pf-c-wizard__main-bodyModifies the main container body to remove the padding.

CSS variables

.pf-c-wizard__header--pf-global--Color--100
#fff
.pf-c-wizard__header--pf-global--Color--200
#f0f0f0
.pf-c-wizard__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-wizard__header--pf-global--primary-color--100
#73bcf7
.pf-c-wizard__header--pf-global--link--Color
#73bcf7
.pf-c-wizard__header--pf-global--link--Color--hover
#73bcf7
.pf-c-wizard__header--pf-global--BackgroundColor--100
#151515
.pf-c-wizard__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-wizard--pf-c-wizard--Height
100%
.pf-c-wizard--pf-c-modal-box--c-wizard--FlexBasis
47.625rem
.pf-c-wizard--pf-c-wizard__header--BackgroundColor
#151515
.pf-c-wizard--pf-c-wizard__header--ZIndex
300
.pf-c-wizard--pf-c-wizard__header--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__close--Top
calc(1.5rem - 0.375rem)
.pf-c-wizard--pf-c-wizard__close--Right
0
.pf-c-wizard--pf-c-wizard__close--xl--Right
1.5rem
.pf-c-wizard--pf-c-wizard__close--FontSize
1.25rem
.pf-c-wizard--pf-c-wizard__title--PaddingRight
3rem
.pf-c-wizard--pf-c-wizard__description--PaddingTop
0.5rem
.pf-c-wizard--pf-c-wizard__description--Color
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--TextDecoration
none
.pf-c-wizard--pf-c-wizard__nav-link--hover--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--focus--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--FontWeight
700
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight
700
.pf-c-wizard--pf-c-wizard__nav-link--before--Width
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Height
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard--pf-c-wizard__nav-link--before--BackgroundColor
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--before--BorderRadius
30em
.pf-c-wizard--pf-c-wizard__nav-link--before--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--before--FontSize
0.875rem
.pf-c-wizard--pf-c-wizard__nav-link--before--TranslateX
calc(-100% - 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--BackgroundColor
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--Color
#fff
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor
transparent
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__toggle--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__toggle--ZIndex
300
.pf-c-wizard--pf-c-wizard__toggle--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__toggle--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomWidth
1px
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomColor
#d2d2d2
.pf-c-wizard--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle-num--before--Top
0
.pf-c-wizard--pf-c-wizard__toggle-list-item--not-last-child--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list-item--MarginBottom
0.25rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginBottom
calc(0.25rem * -1)
.pf-c-wizard--pf-c-wizard__toggle-separator--MarginLeft
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-separator--Color
#8a8d90
.pf-c-wizard--pf-c-wizard__toggle-icon--LineHeight
1.5
.pf-c-wizard--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate
180deg
.pf-c-wizard--pf-c-wizard__nav--ZIndex
200
.pf-c-wizard--pf-c-wizard__nav--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__nav--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__nav--Width
100%
.pf-c-wizard--pf-c-wizard__nav--lg--Width
15.625rem
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightWidth
1px
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightColor
#d2d2d2
.pf-c-wizard--pf-c-wizard__nav-list--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingLeft
calc(1.5rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginLeft
1rem
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__nav-item--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__outer-wrap--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__outer-wrap--lg--PaddingLeft
100%
.pf-c-wizard--pf-c-wizard__main--ZIndex
100
.pf-c-wizard--pf-c-wizard__main-body--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginRight
1rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginBottom
0.5rem
.pf-c-wizard.pf-m-finished--pf-c-wizard__outer-wrap--lg--PaddingLeft
0
.pf-c-wizard__toggle.pf-m-expanded--pf-c-wizard__toggle--BoxShadow
none
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--BackgroundColor
#06c
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Color
#fff
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link.pf-m-current--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:disabled--pf-c-wizard__nav-link--Color
#6a6e73
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--BackgroundColor
transparent
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--Color
#6a6e73

View source on GitHub