HTML

Wizard

ExamplesDocumentationCSS Variables

Examples

Finished

Wizard title

Here is where the description goes

Configuration in progress

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non pulvinar tortor. Maecenas sit amet pellentesque velit, eu eleifend mauris.

In page

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
aria-disabled="true".pf-c-wizard__nav-linkIndicatese 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".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
.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<i>Initiates the toggle icon. 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-full-width.pf-c-wizardModifies the wizard to expand the full width of the viewport.
.pf-m-full-height.pf-c-wizardModifies the wizard to expand the full height of the viewport.
.pf-m-compact-nav.pf-c-wizardModifies wizard nav for a compact width.
.pf-m-in-page.pf-c-wizardModifies wizard for use outside of a modal.
.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__mainModifies the main container body to remove the padding.
.pf-m-hover.pf-c-wizard__nav-linkModifies a step link for the hovered state. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.
.pf-m-focus.pf-c-wizard__nav-linkModifies a step link for the focus state. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.

CSS Variables

--pf-c-wizard__close--FontSizec_wizard__close_FontSize
1.25rem
--pf-c-wizard__close--lg--Rightc_wizard__close_lg_Right
1rem
--pf-c-wizard__close--Rightc_wizard__close_Right
0
--pf-c-wizard__close--Topc_wizard__close_Top
calc(1.5rem - 0.375rem)
--pf-c-wizard__description--Colorc_wizard__description_Color
#ededed
--pf-c-wizard__description--PaddingTopc_wizard__description_PaddingTop
0.5rem
--pf-c-wizard__footer--child--MarginBottomc_wizard__footer_child_MarginBottom
0.5rem
--pf-c-wizard__footer--child--MarginRightc_wizard__footer_child_MarginRight
1rem
--pf-c-wizard__footer--lg--PaddingBottomc_wizard__footer_lg_PaddingBottom
1.5rem
--pf-c-wizard__footer--lg--PaddingLeftc_wizard__footer_lg_PaddingLeft
2rem
--pf-c-wizard__footer--lg--PaddingRightc_wizard__footer_lg_PaddingRight
2rem
--pf-c-wizard__footer--lg--PaddingTopc_wizard__footer_lg_PaddingTop
2rem
--pf-c-wizard__footer--PaddingBottomc_wizard__footer_PaddingBottom
0.5rem
--pf-c-wizard__footer--PaddingLeftc_wizard__footer_PaddingLeft
1rem
--pf-c-wizard__footer--PaddingRightc_wizard__footer_PaddingRight
1rem
--pf-c-wizard__footer--PaddingTopc_wizard__footer_PaddingTop
1rem
--pf-c-wizard__header--BackgroundColorc_wizard__header_BackgroundColor
#151515
--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft
2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight
2rem
--pf-c-wizard__header--PaddingBottomc_wizard__header_PaddingBottom
1.5rem
--pf-c-wizard__header--PaddingLeftc_wizard__header_PaddingLeft
1rem
--pf-c-wizard__header--PaddingRightc_wizard__header_PaddingRight
1rem
--pf-c-wizard__header--PaddingTopc_wizard__header_PaddingTop
1.5rem
--pf-c-wizard__header--ZIndexc_wizard__header_ZIndex
300
--pf-c-wizard__main-body--lg--PaddingBottomc_wizard__main_body_lg_PaddingBottom
2rem
--pf-c-wizard__main-body--lg--PaddingLeftc_wizard__main_body_lg_PaddingLeft
2rem
--pf-c-wizard__main-body--lg--PaddingRightc_wizard__main_body_lg_PaddingRight
2rem
--pf-c-wizard__main-body--lg--PaddingTopc_wizard__main_body_lg_PaddingTop
2rem
--pf-c-wizard__main-body--PaddingBottomc_wizard__main_body_PaddingBottom
1rem
--pf-c-wizard__main-body--PaddingLeftc_wizard__main_body_PaddingLeft
1rem
--pf-c-wizard__main-body--PaddingRightc_wizard__main_body_PaddingRight
1rem
--pf-c-wizard__main-body--PaddingTopc_wizard__main_body_PaddingTop
1rem
--pf-c-wizard__main--ZIndexc_wizard__main_ZIndex
100
--pf-c-wizard__nav--BackgroundColorc_wizard__nav_BackgroundColor
#fff
--pf-c-wizard__nav--BoxShadowc_wizard__nav_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-wizard__nav-item--MarginTopc_wizard__nav_item_MarginTop
1rem
--pf-c-wizard__nav--lg--BoxShadowc_wizard__nav_lg_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-wizard__nav--lg--Widthc_wizard__nav_lg_Width
18.75rem
--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColor
transparent
--pf-c-wizard__nav-link--before--BorderRadiusc_wizard__nav_link_before_BorderRadius
30em
--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color
#737679
--pf-c-wizard__nav-link--before--FontSizec_wizard__nav_link_before_FontSize
0.875rem
--pf-c-wizard__nav-link--before--Heightc_wizard__nav_link_before_Height
1.5rem
--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top
0
--pf-c-wizard__nav-link--before--Transformc_wizard__nav_link_before_Transform
translateX(calc(-100% - 0.5rem))
--pf-c-wizard__nav-link--before--Widthc_wizard__nav_link_before_Width
1.5rem
--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#737679
--pf-c-wizard__nav-link--focus--Colorc_wizard__nav_link_focus_Color
#004080
--pf-c-wizard__nav-link--hover--Colorc_wizard__nav_link_hover_Color
#004080
--pf-c-wizard__nav-link--m-current--before--BackgroundColorc_wizard__nav_link_m_current_before_BackgroundColor
#06c
--pf-c-wizard__nav-link--m-current--before--Colorc_wizard__nav_link_m_current_before_Color
#fff
--pf-c-wizard__nav-link--m-current--Colorc_wizard__nav_link_m_current_Color
#004080
--pf-c-wizard__nav-link--m-disabled--before--BackgroundColorc_wizard__nav_link_m_disabled_before_BackgroundColor
transparent
--pf-c-wizard__nav-link--m-disabled--before--Colorc_wizard__nav_link_m_disabled_before_Color
#737679
--pf-c-wizard__nav-link--m-disabled--Colorc_wizard__nav_link_m_disabled_Color
#737679
--pf-c-wizard__nav-link--TextDecorationc_wizard__nav_link_TextDecoration
underline
--pf-c-wizard__nav-list--lg--PaddingLeftc_wizard__nav_list_lg_PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--lg--PaddingRightc_wizard__nav_list_lg_PaddingRight
2rem
--pf-c-wizard__nav-list--nested--MarginLeftc_wizard__nav_list_nested_MarginLeft
1rem
--pf-c-wizard__nav-list--nested--MarginTopc_wizard__nav_list_nested_MarginTop
1rem
--pf-c-wizard__nav-list--PaddingBottomc_wizard__nav_list_PaddingBottom
2rem
--pf-c-wizard__nav-list--PaddingLeftc_wizard__nav_list_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingRightc_wizard__nav_list_PaddingRight
1rem
--pf-c-wizard__nav-list--PaddingTopc_wizard__nav_list_PaddingTop
2rem
--pf-c-wizard__nav--Widthc_wizard__nav_Width
100%
--pf-c-wizard__nav--ZIndexc_wizard__nav_ZIndex
200
--pf-c-wizard__outer-wrap--BackgroundColorc_wizard__outer_wrap_BackgroundColor
#fff
--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft
0
--pf-c-wizard__title--PaddingRightc_wizard__title_PaddingRight
3rem
--pf-c-wizard__toggle--BackgroundColorc_wizard__toggle_BackgroundColor
#fff
--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-wizard__toggle-icon--LineHeightc_wizard__toggle_icon_LineHeight
1.5
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop
0
--pf-c-wizard__toggle-list-item--MarginBottomc_wizard__toggle_list_item_MarginBottom
0.25rem
--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight
0.5rem
--pf-c-wizard__toggle-list--MarginBottomc_wizard__toggle_list_MarginBottom
calc(0.25rem*-1)
--pf-c-wizard__toggle-list--MarginRightc_wizard__toggle_list_MarginRight
0.5rem
--pf-c-wizard__toggle--m-expanded__toggle-icon--Transformc_wizard__toggle_m_expanded__toggle_icon_Transform
rotate(180deg)
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top
0
--pf-c-wizard__toggle--PaddingBottomc_wizard__toggle_PaddingBottom
1.5rem
--pf-c-wizard__toggle--PaddingLeftc_wizard__toggle_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingRightc_wizard__toggle_PaddingRight
1rem
--pf-c-wizard__toggle--PaddingTopc_wizard__toggle_PaddingTop
1.5rem
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color
#8a8d90
--pf-c-wizard__toggle-separator--MarginLeftc_wizard__toggle_separator_MarginLeft
0.5rem
--pf-c-wizard__toggle--ZIndexc_wizard__toggle_ZIndex
300
--pf-c-wizard--BoxShadowc_wizard_BoxShadow
none
--pf-c-wizard--Heightc_wizard_Height
100%
--pf-c-wizard--lg--Heightc_wizard_lg_Height
47.625rem
--pf-c-wizard--lg--MaxHeightc_wizard_lg_MaxHeight
calc(100% - 3rem*2)
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth
77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Width
calc(100% - 3rem*2)
--pf-c-wizard--m-compact-nav__nav--lg--Widthc_wizard_m_compact_nav__nav_lg_Width
15.625rem
--pf-c-wizard--m-full-height--lg--Heightc_wizard_m_full_height_lg_Height
100%
--pf-c-wizard--m-full-width--lg--MaxWidthc_wizard_m_full_width_lg_MaxWidth
auto
--pf-c-wizard--m-in-page__footer--md--PaddingBottomc_wizard_m_in_page__footer_md_PaddingBottom
1.5rem
--pf-c-wizard--m-in-page__footer--md--PaddingLeftc_wizard_m_in_page__footer_md_PaddingLeft
2rem
--pf-c-wizard--m-in-page__footer--md--PaddingRightc_wizard_m_in_page__footer_md_PaddingRight
2rem
--pf-c-wizard--m-in-page__footer--md--PaddingTopc_wizard_m_in_page__footer_md_PaddingTop
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingBottomc_wizard_m_in_page__main_body_md_PaddingBottom
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingLeftc_wizard_m_in_page__main_body_md_PaddingLeft
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingRightc_wizard_m_in_page__main_body_md_PaddingRight
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingTopc_wizard_m_in_page__main_body_md_PaddingTop
2rem
--pf-c-wizard--m-in-page__nav--lg--BorderRightColorc_wizard_m_in_page__nav_lg_BorderRightColor
#d2d2d2
--pf-c-wizard--m-in-page__nav--lg--BorderRightWidthc_wizard_m_in_page__nav_lg_BorderRightWidth
1px
--pf-c-wizard--m-in-page__nav--lg--BoxShadowc_wizard_m_in_page__nav_lg_BoxShadow
none
--pf-c-wizard--m-in-page__nav--lg--Widthc_wizard_m_in_page__nav_lg_Width
15.625rem
--pf-c-wizard--m-in-page__nav-list--md--PaddingLeftc_wizard_m_in_page__nav_list_md_PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page__toggle--md--PaddingLeftc_wizard_m_in_page__toggle_md_PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page--BoxShadowc_wizard_m_in_page_BoxShadow
none
--pf-c-wizard--m-in-page--Heightc_wizard_m_in_page_Height
100%
--pf-c-wizard--m-in-page--lg--MaxHeightc_wizard_m_in_page_lg_MaxHeight
none
--pf-c-wizard--m-in-page--lg--MaxWidthc_wizard_m_in_page_lg_MaxWidth
none
--pf-c-wizard--m-in-page--Widthc_wizard_m_in_page_Width
auto
--pf-c-wizard--Widthc_wizard_Width
auto