Wizard

A wizard provides a guided workflow that offers a path to complete a task, create an object or objects, or finish a series of steps for some other outcome. Wizards should incite trust in the user and guide them through an otherwise overwhelming experience.

A newer React implementation of the wizard will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Examples

Basic

Nav expanded (mobile)

With drawer

Expandable collapsed

Expandable expanded

Finished

Documentation

Accessibility

Attribute	Applied to	Outcome
`aria-expanded="true"`	`.pf-c-wizard__toggle`	Indicates that the steps menu is visible. Required
`aria-expanded="false"`	`.pf-c-wizard__toggle`	Indicates that the steps menu is hidden. Required
`aria-label="close"`	`.pf-c-wizard__toggle-icon`	Gives the close button an accessible name. Required
`aria-hidden="true"`	`.pf-c-wizard__toggle-icon`, `.pf-c-wizard__toggle-divider`	Hides the icon from assistive technologies. Required
`aria-label="Steps"`	`.pf-c-wizard__nav`	Gives the steps nav element an accessible name. Required
`disabled`	`button.pf-c-wizard__nav-link`	Indicates that the element is disabled. Required when a nav item is disabled
`aria-disabled="true"`	`a.pf-c-wizard__nav-link`	Indicates that the element is disabled. Required for disabled links with `.pf-m-disabled`
`aria-current="page"`	`.pf-c-wizard__nav-link`	Indicates the current page link. Can only occur once on page. Required for the current link
`aria-expanded="true"`	`.pf-c-wizard__nav-link`	Indicates that the link subnav is visible. Required
`aria-expanded="false"`	`.pf-c-wizard__nav-link`	Indicates that the link subnav is hidden. Required
`tabindex="-1"`	`a.pf-c-wizard__nav-link`	Removes a link from keyboard focus. Required for disabled links with `.pf-m-disabled`
`tabindex="0"`	`.pf-c-wizard__main`	If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`.

Usage

Class	Applied to	Outcome
`.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-plain`	Initiates the close button. Required
`.pf-c-wizard__title`	`.pf-c-title.pf-m-3xl`	Initiates the title. Required
`.pf-c-wizard__description`	`<div>`, `<p>`	Initiates the description.
`.pf-c-wizard__toggle`	`<button>`	Initiates the mobile steps menu toggle button. Required
`.pf-c-wizard__toggle-list`	`<span>`	Initiates the toggle list. Required
`.pf-c-wizard__toggle-list-item`	`<span>`	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__nav-link-text`	`<span>`	Initiates the link text container. Required when nav item is expandable
`.pf-c-wizard__nav-link-toggle`	`<span>`	Initiates the toggle container. Required when nav item is expandable
`.pf-c-wizard__nav-link-toggle-icon`	`<span>`	Initiates the toggle icon container. Required when nav item is expandable
`.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-c-wizard__footer-cancel`	`<div>`	Initiates the cancel button. Required
`.pf-m-expanded`	`.pf-c-wizard__toggle`, `.pf-c-wizard__nav`	Modifies the mobile steps toggle and steps menu for the expanded state.
`.pf-m-finished`	`.pf-c-wizard`	Modifies the wizard for the finished state.
`.pf-m-expandable`	`.pf-c-wizard__nav-item`	Modifies a nav item for the expandable state.
`.pf-m-expanded`	`.pf-c-wizard__nav-item`	Modifies a nav item for the expanded state.
`.pf-m-current`	`.pf-c-wizard__nav-link`	Modifies a step link for the current state. Required
`.pf-m-disabled`	`.pf-c-wizard__nav-link`	Modifies a step link for the disabled state.
`.pf-m-no-padding`	`.pf-c-wizard__main-body`	Modifies the main container body to remove the padding.

CSS variables


	.pf-c-wizard__header	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-wizard__header	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-wizard__header	--pf-global--link--Color	#2b9af3
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-wizard__header	--pf-global--link--Color--hover	#2b9af3
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-wizard__header	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-wizard__header .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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__header--BackgroundColor --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__header--ZIndex	300
--pf-c-wizard__header--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-wizard	--pf-c-wizard__header--PaddingTop	1.5rem
--pf-c-wizard__header--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingRight	1rem
--pf-c-wizard__header--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingBottom	1.5rem
--pf-c-wizard__header--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingLeft	1rem
--pf-c-wizard__header--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--lg--PaddingRight	1rem
--pf-c-wizard__header--lg--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--lg--PaddingLeft	1rem
--pf-c-wizard__header--lg--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--xl--PaddingRight	1.5rem
--pf-c-wizard__header--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--xl--PaddingLeft	1.5rem
--pf-c-wizard__header--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__close--Top	calc(1.5rem - 0.375rem)
--pf-c-wizard__close--Top calc(--pf-global--spacer--lg - --pf-global--spacer--form-element) calc($pf-global--spacer--lg - $pf-global--spacer--form-element) calc(pf-size-prem(24px) - pf-size-prem(6px)) 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__close--xl--Right --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__close--FontSize	1.25rem
--pf-c-wizard__close--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-wizard	--pf-c-wizard__title--PaddingRight	3rem
--pf-c-wizard__title--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-wizard	--pf-c-wizard__description--PaddingTop	0.5rem
--pf-c-wizard__description--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__description--Color	#f0f0f0
--pf-c-wizard__description--Color --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard	--pf-c-wizard__nav-link--Color	#151515
--pf-c-wizard__nav-link--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--TextDecoration	none
--pf-c-wizard__nav-link--TextDecoration --pf-global--link--TextDecoration $pf-global--link--TextDecoration none
	.pf-c-wizard	--pf-c-wizard__nav-link--hover--Color	#06c
--pf-c-wizard__nav-link--hover--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--focus--Color	#06c
--pf-c-wizard__nav-link--focus--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--Color	#06c
--pf-c-wizard__nav-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--FontWeight	400
--pf-c-wizard__nav-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-wizard	--pf-c-wizard__nav-link--m-disabled--Color	#6a6e73
--pf-c-wizard__nav-link--m-disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight	400
--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--PaddingRight	0.5rem
--pf-c-wizard__nav-link-toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--PaddingLeft	0.5rem
--pf-c-wizard__nav-link-toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--Color	#6a6e73
--pf-c-wizard__nav-link-toggle--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color	#151515
--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color	#151515
--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle-icon--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-wizard__nav-link-toggle-icon--Transition --pf-global--Transition $pf-global--Transition all 250ms cubic-bezier(.42, 0, .58, 1)
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle-icon--Rotate	0
	.pf-c-wizard	--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate	90deg
	.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__nav-link--before--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard	--pf-c-wizard__nav-link--before--BorderRadius	30em
--pf-c-wizard__nav-link--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-wizard	--pf-c-wizard__nav-link--before--Color	#151515
--pf-c-wizard__nav-link--before--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--before--FontSize	0.875rem
--pf-c-wizard__nav-link--before--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-wizard	--pf-c-wizard__nav-link--before--TranslateX	calc(-100% - 0.5rem)
--pf-c-wizard__nav-link--before--TranslateX calc(-100% - --pf-global--spacer--sm) calc(-100% - $pf-global--spacer--sm) calc(-100% - pf-size-prem(8px)) calc(-100% - 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--before--BackgroundColor	#06c
--pf-c-wizard__nav-link--m-current--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--before--Color	#fff
--pf-c-wizard__nav-link--m-current--before--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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__nav-link--m-disabled--before--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__toggle--BackgroundColor	#fff
--pf-c-wizard__toggle--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__toggle--ZIndex	300
--pf-c-wizard__toggle--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 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__toggle--BoxShadow --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 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__toggle--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingRight	1rem
--pf-c-wizard__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingBottom	1.5rem
--pf-c-wizard__toggle--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingLeft	calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingLeft calc(--pf-global--spacer--md + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--md + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(16px) + 1.5rem + pf-size-prem(8px)) calc(1rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__toggle--m-expanded--BorderBottomWidth	1px
--pf-c-wizard__toggle--m-expanded--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-wizard	--pf-c-wizard__toggle--m-expanded--BorderBottomColor	#d2d2d2
--pf-c-wizard__toggle--m-expanded--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-wizard	--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft	calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft calc(--pf-global--spacer--xl + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--xl + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(32px) + 1.5rem + pf-size-prem(8px)) 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__toggle-list-item--not-last-child--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-list-item--MarginBottom	0.25rem
--pf-c-wizard__toggle-list-item--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-wizard	--pf-c-wizard__toggle-list--MarginRight	0.5rem
--pf-c-wizard__toggle-list--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-list--MarginBottom	calc(0.25rem * -1)
--pf-c-wizard__toggle-list--MarginBottom calc(--pf-c-wizard__toggle-list-item--MarginBottom * -1) calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-wizard	--pf-c-wizard__toggle-separator--MarginLeft	0.5rem
--pf-c-wizard__toggle-separator--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-separator--Color	#8a8d90
--pf-c-wizard__toggle-separator--Color --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-wizard	--pf-c-wizard__toggle-icon--LineHeight	1.5
--pf-c-wizard__toggle-icon--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 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__nav--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-wizard	--pf-c-wizard__nav--BackgroundColor	#fff
--pf-c-wizard__nav--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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__nav--BoxShadow --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 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__nav--lg--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-wizard	--pf-c-wizard__nav--lg--BorderRightColor	#d2d2d2
--pf-c-wizard__nav--lg--BorderRightColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingTop	1.5rem
--pf-c-wizard__nav-list--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingRight	1rem
--pf-c-wizard__nav-list--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingBottom	1.5rem
--pf-c-wizard__nav-list--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingLeft	calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingLeft calc(--pf-global--spacer--md + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--md + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(16px) + 1.5rem + pf-size-prem(8px)) calc(1rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingTop	1rem
--pf-c-wizard__nav-list--lg--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingRight	1rem
--pf-c-wizard__nav-list--lg--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingBottom	1rem
--pf-c-wizard__nav-list--lg--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingTop	1.5rem
--pf-c-wizard__nav-list--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingRight	1.5rem
--pf-c-wizard__nav-list--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingBottom	1.5rem
--pf-c-wizard__nav-list--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingLeft	calc(1.5rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--xl--PaddingLeft calc(--pf-global--spacer--lg + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--lg + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(24px) + 1.5rem + pf-size-prem(8px)) calc(1.5rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-list--nested--MarginLeft	1rem
--pf-c-wizard__nav-list--nested--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--nested--MarginTop	1rem
--pf-c-wizard__nav-list--nested--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-item--MarginTop	1rem
--pf-c-wizard__nav-item--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__outer-wrap--BackgroundColor	#fff
--pf-c-wizard__outer-wrap--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__outer-wrap--lg--PaddingLeft	100%
--pf-c-wizard__outer-wrap--lg--PaddingLeft --pf-c-wizard__nav--Width 100%
	.pf-c-wizard	--pf-c-wizard__outer-wrap--MinHeight	15.625rem
	.pf-c-wizard	--pf-c-wizard__main--ZIndex	100
--pf-c-wizard__main--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingTop	1rem
--pf-c-wizard__main-body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingRight	1rem
--pf-c-wizard__main-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingBottom	1rem
--pf-c-wizard__main-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingLeft	1rem
--pf-c-wizard__main-body--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingTop	1.5rem
--pf-c-wizard__main-body--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingRight	1.5rem
--pf-c-wizard__main-body--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingBottom	1.5rem
--pf-c-wizard__main-body--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingLeft	1.5rem
--pf-c-wizard__main-body--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--BackgroundColor	#fff
--pf-c-wizard__footer--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__footer--ZIndex	200
--pf-c-wizard__footer--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-wizard	--pf-c-wizard__footer--PaddingTop	1rem
--pf-c-wizard__footer--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingRight	1rem
--pf-c-wizard__footer--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingBottom	0.5rem
--pf-c-wizard__footer--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingLeft	1rem
--pf-c-wizard__footer--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingTop	1.5rem
--pf-c-wizard__footer--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingRight	1.5rem
--pf-c-wizard__footer--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingBottom	1rem
--pf-c-wizard__footer--xl--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingLeft	1.5rem
--pf-c-wizard__footer--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--BoxShadow	0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-c-wizard__footer--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
	.pf-c-wizard	--pf-c-wizard__footer--child--MarginRight	1rem
--pf-c-wizard__footer--child--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--child--MarginBottom	0.5rem
--pf-c-wizard__footer--child--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__footer-cancel--MarginLeft	calc(3rem - 1rem)
--pf-c-wizard__footer-cancel--MarginLeft calc(--pf-global--spacer--2xl - --pf-c-wizard__footer--child--MarginRight) calc($pf-global--spacer--2xl - --pf-global--spacer--md) calc($pf-global--spacer--2xl - $pf-global--spacer--md) calc(pf-size-prem(48px) - pf-size-prem(16px)) calc(3rem - 1rem)
	.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__nav-link--before--Top --pf-c-wizard__toggle-num--before--Top 0
	.pf-c-wizard__toggle-num	--pf-c-wizard__nav-link--before--BackgroundColor	#06c
--pf-c-wizard__nav-link--before--BackgroundColor --pf-c-wizard__nav-link--m-current--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__toggle-num	--pf-c-wizard__nav-link--before--Color	#fff
--pf-c-wizard__nav-link--before--Color --pf-c-wizard__nav-link--m-current--before--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link	--pf-c-wizard__nav-link-toggle-icon--Rotate	90deg
--pf-c-wizard__nav-link-toggle-icon--Rotate --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate 90deg
	.pf-c-wizard__nav-link:hover	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--hover--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:hover	--pf-c-wizard__nav-link-toggle--Color	#151515
--pf-c-wizard__nav-link-toggle--Color --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard__nav-link:focus	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--focus--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:focus	--pf-c-wizard__nav-link-toggle--Color	#151515
--pf-c-wizard__nav-link-toggle--Color --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard__nav-link.pf-m-current	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:disabled	--pf-c-wizard__nav-link--Color	#6a6e73
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--m-disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard__nav-link:disabled::before	--pf-c-wizard__nav-link--before--BackgroundColor	transparent
--pf-c-wizard__nav-link--before--BackgroundColor --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor transparent
	.pf-c-wizard__nav-link:disabled::before	--pf-c-wizard__nav-link--before--Color	#6a6e73
--pf-c-wizard__nav-link--before--Color --pf-c-wizard__nav-link--m-disabled--before--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines