Wizard

A wizard is a structured page used for breaking sequential workflows into a series of steps. Wizards can be presented in a modal dialog or occupy a full page view. Related design guidelines: Wizard

Examples Props CSS Variables

Examples

Basic

Compact nav

Incrementally enabled steps

Finished

Enabled on form validation

Validate on button press

Progressive steps

Full height and width

Remember last step

In page

Step 1

Props

Wizard properties
Name	Type	Required	Default	Description
isOpen	boolean	No	false	True to show the wizard (not applicable for isInPage)
isInPage	boolean	No	false	True to show the wizard without the modal
isCompactNav	boolean	No	false	If true makes the navigation more compact
width	number \| string	No	null	Custom width of the wizard
height	number \| string	No	null	Custom height of the wizard
title	string	No	''	The wizard title (required unless isInPage is used)
description	React.ReactNode	No	''	The wizard description
onClose	() => void	No	() => undefined as any	Callback function to close the wizard
onGoToStep	( newStep: { id?: string \| number; name: React.ReactNode }, prevStep: { prevId?: string \| number; prevName: React.ReactNode } ) => void	No	null	Callback function when a step in the nav is clicked
className	string	No	''	Additional classes spread to the Wizard
steps	WizardStep[]	Yes		The wizard steps configuration object
startAtStep	number	No	1	The current step the wizard is on (1 or higher)
navAriaLabel	string	No	'Steps'	Aria-label for the Nav
hasBodyPadding	boolean	No	true	Can remove the default padding around the main body content by setting this to false
footer	React.ReactNode	No	null	(Use to control the footer) Passing in a footer component lets you control the buttons yourself
onSave	() => void	No		(Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose
onNext	( newStep: { id?: string \| number; name: React.ReactNode }, prevStep: { prevId?: string \| number; prevName: React.ReactNode } ) => void	No	null	(Unused if footer is controlled) Callback function after Next button is clicked
onBack	( newStep: { id?: string \| number; name: React.ReactNode }, prevStep: { prevId?: string \| number; prevName: React.ReactNode } ) => void	No	null	(Unused if footer is controlled) Callback function after Back button is clicked
nextButtonText	React.ReactNode	No	'Next'	(Unused if footer is controlled) The Next button text
backButtonText	React.ReactNode	No	'Back'	(Unused if footer is controlled) The Back button text
cancelButtonText	React.ReactNode	No	'Cancel'	(Unused if footer is controlled) The Cancel button text
closeButtonAriaLabel	string	No	'Close'	(Unused if footer is controlled) aria-label for the close button
appendTo	HTMLElement \| (() => HTMLElement)	No	null	The parent container to append the modal to. Defaults to document.body

WizardNav properties
Name	Type	Required	Default	Description
children	any	No		children should be WizardNavItem components
aria-label	string	No		Aria-label applied to the nav element
isOpen	boolean	No	false	Whether the nav is expanded
returnList	boolean	No	false	True to return the inner list without the wrapping nav element

WizardNavItem properties
Name	Type	Required	Default	Description
children	React.ReactNode	No	null	Can nest a WizardNav component for substeps
content	React.ReactNode	No	''	The content to display in the nav item
isCurrent	boolean	No	false	Whether the nav item is the currently active item
isDisabled	boolean	No	false	Whether the nav item is disabled
step	number	Yes		The step passed into the onNavItemClick callback
onNavItemClick	(step: number) => any	No	() => undefined	Callback for when the nav item is clicked
navItemComponent	React.ReactNode	No	'a'	Component used to render WizardNavItem

WizardHeader properties
Name	Type	Required	Default	Description
onClose	() => void	No	() => undefined	Callback function called when the X (Close) button is clicked
title	string	Yes		Title of the wizard
description	React.ReactNode	No		Description of the wizard
closeButtonAriaLabel	string	No		Aria-label applied to the X (Close) button
titleId	string	No		id for the title
descriptionId	string	No		id for the description

WizardBody properties
Name	Type	Required	Default	Description
children	any	Yes		Anything that can be rendered in the Wizard body
hasBodyPadding	boolean	No	true	Set to false to remove the default body padding

WizardFooter properties
Name	Type	Required	Default	Description
children	any	Yes		Buttons in the footer

WizardToggle properties
Name	Type	Required	Default	Description
nav	(isWizardNavOpen: boolean) => React.ReactElement	Yes		Function that returns the WizardNav component
steps	WizardStep[]	Yes		The wizard steps
activeStep	WizardStep	Yes		The currently active WizardStep
children	React.ReactNode	Yes		The WizardFooter
hasBodyPadding	boolean	No	true	Set to false to remove body padding
isNavOpen	boolean	Yes		If the nav is open
onNavToggle	(isOpen: boolean) => void	Yes		Callback function for when the nav is toggled
aria-label	string	No	'Wizard Toggle'	The button's aria-label

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	#73bcf7
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.pf-c-wizard__header	--pf-global--link--Color--hover	#73bcf7
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-200 #73bcf7
	.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	600
--pf-c-wizard__nav-link--m-current--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.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	600
--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight --pf-global--FontWeight--bold $pf-global--FontWeight--bold 600
	.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--Transform	translateX(calc(-100% - 0.5rem))
--pf-c-wizard__nav-link--before--Transform translateX(calc(-100% - --pf-global--spacer--sm)) translateX(calc(-100% - $pf-global--spacer--sm)) translateX(calc(-100% - pf-size-prem(8px))) translateX(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--MarginTop	0
	.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--Transform	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__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--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--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-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-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: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.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.pf-m-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.pf-m-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.pf-m-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