HTML

Wizard

ExamplesDocumentationCSS Variables

Examples

Wizard

This Preview can only be accessed in full page mode.
Copied to clipboard

Wizard expanded (mobile)

This Preview can only be accessed in full page mode.
Copied to clipboard

Wizard finished

This Preview can only be accessed in full page mode.
Copied to clipboard

Wizard full width/full height

This Preview can only be accessed in full page mode.
Copied to clipboard

Wizard compact nav

This Preview can only be accessed in full page mode.
Copied to clipboard

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
aria-disabled="true" .pf-c-wizard__nav-link Indicatese 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
tabindex="-1" .pf-c-wizard__nav-link Removes a link from keyboard focus. Required for disabled links with .pf-m-disabled

Usage

Class Applied To Outcome
.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-plain Initiates the close button. Required
.pf-c-wizard__title .pf-c-title.pf-m-3xl Initiates 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> Initiates the main container. Required
.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__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-full-width .pf-c-wizard Modifies the wizard to expand the full width of the viewport.
.pf-m-full-height .pf-c-wizard Modifies the wizard to expand the full height of the viewport.
.pf-m-compact-nav .pf-c-wizard Modifies wizard nav for a compact width.
.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 Modifies the main container body to remove the padding.
.pf-m-hover .pf-c-wizard__nav-link Modifies 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-link Modifies 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--BoxShadowc_wizard_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)
--pf-c-wizard--Heightc_wizard_Height100%
--pf-c-wizard--Widthc_wizard_Width100vw
--pf-c-wizard__close--FontSizec_wizard__close_FontSize1.3125rem
--pf-c-wizard__close--Rightc_wizard__close_Right0
--pf-c-wizard__close--Topc_wizard__close_Topcalc(1.5rem - 0.375rem)
--pf-c-wizard__close--lg--Rightc_wizard__close_lg_Right1rem
--pf-c-wizard__description--Colorc_wizard__description_Color#ededed
--pf-c-wizard__description--PaddingTopc_wizard__description_PaddingTop0.5rem
--pf-c-wizard__footer--PaddingBottomc_wizard__footer_PaddingBottom0.5rem
--pf-c-wizard__footer--PaddingLeftc_wizard__footer_PaddingLeft1rem
--pf-c-wizard__footer--PaddingRightc_wizard__footer_PaddingRight1rem
--pf-c-wizard__footer--PaddingTopc_wizard__footer_PaddingTop1rem
--pf-c-wizard__footer--child--MarginBottomc_wizard__footer_child_MarginBottom0.5rem
--pf-c-wizard__footer--child--MarginRightc_wizard__footer_child_MarginRight1rem
--pf-c-wizard__footer--lg--PaddingBottomc_wizard__footer_lg_PaddingBottom1.5rem
--pf-c-wizard__footer--lg--PaddingLeftc_wizard__footer_lg_PaddingLeft2rem
--pf-c-wizard__footer--lg--PaddingRightc_wizard__footer_lg_PaddingRight2rem
--pf-c-wizard__footer--lg--PaddingTopc_wizard__footer_lg_PaddingTop2rem
--pf-c-wizard__header--BackgroundColorc_wizard__header_BackgroundColor#151515
--pf-c-wizard__header--PaddingBottomc_wizard__header_PaddingBottom1.5rem
--pf-c-wizard__header--PaddingLeftc_wizard__header_PaddingLeft1rem
--pf-c-wizard__header--PaddingRightc_wizard__header_PaddingRight1rem
--pf-c-wizard__header--PaddingTopc_wizard__header_PaddingTop1.5rem
--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight2rem
--pf-c-wizard__main-body--PaddingBottomc_wizard__main_body_PaddingBottom1rem
--pf-c-wizard__main-body--PaddingLeftc_wizard__main_body_PaddingLeft1rem
--pf-c-wizard__main-body--PaddingRightc_wizard__main_body_PaddingRight1rem
--pf-c-wizard__main-body--PaddingTopc_wizard__main_body_PaddingTop1rem
--pf-c-wizard__main-body--lg--PaddingBottomc_wizard__main_body_lg_PaddingBottom2rem
--pf-c-wizard__main-body--lg--PaddingLeftc_wizard__main_body_lg_PaddingLeft2rem
--pf-c-wizard__main-body--lg--PaddingRightc_wizard__main_body_lg_PaddingRight2rem
--pf-c-wizard__main-body--lg--PaddingTopc_wizard__main_body_lg_PaddingTop2rem
--pf-c-wizard__nav--BackgroundColorc_wizard__nav_BackgroundColor#fff
--pf-c-wizard__nav--BoxShadowc_wizard__nav_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-wizard__nav--Widthc_wizard__nav_Width100%
--pf-c-wizard__nav--ZIndexc_wizard__nav_ZIndex100
--pf-c-wizard__nav-item--MarginTopc_wizard__nav_item_MarginTop1rem
--pf-c-wizard__nav--lg--BoxShadowc_wizard__nav_lg_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.07)
--pf-c-wizard__nav--lg--Widthc_wizard__nav_lg_Width18.75rem
--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color#72767b
--pf-c-wizard__nav-link--TextDecorationc_wizard__nav_link_TextDecorationunderline
--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColortransparent
--pf-c-wizard__nav-link--before--BorderRadiusc_wizard__nav_link_before_BorderRadius30em
--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color#72767b
--pf-c-wizard__nav-link--before--FontSizec_wizard__nav_link_before_FontSize0.875rem
--pf-c-wizard__nav-link--before--Heightc_wizard__nav_link_before_Height1.5rem
--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top0.125rem
--pf-c-wizard__nav-link--before--Transformc_wizard__nav_link_before_TransformtranslateX(calc(-100% - 0.5rem))
--pf-c-wizard__nav-link--before--Widthc_wizard__nav_link_before_Width1.5rem
--pf-c-wizard__nav-link--focus--Colorc_wizard__nav_link_focus_Color#06c
--pf-c-wizard__nav-link--hover--Colorc_wizard__nav_link_hover_Color#06c
--pf-c-wizard__nav-link--m-current--Colorc_wizard__nav_link_m_current_Color#06c
--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-disabled--Colorc_wizard__nav_link_m_disabled_Color#72767b
--pf-c-wizard__nav-link--m-disabled--before--BackgroundColorc_wizard__nav_link_m_disabled_before_BackgroundColortransparent
--pf-c-wizard__nav-link--m-disabled--before--Colorc_wizard__nav_link_m_disabled_before_Color#72767b
--pf-c-wizard__nav-list--PaddingBottomc_wizard__nav_list_PaddingBottom2rem
--pf-c-wizard__nav-list--PaddingLeftc_wizard__nav_list_PaddingLeftcalc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingRightc_wizard__nav_list_PaddingRight1rem
--pf-c-wizard__nav-list--PaddingTopc_wizard__nav_list_PaddingTop2rem
--pf-c-wizard__nav-list--lg--PaddingLeftc_wizard__nav_list_lg_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--lg--PaddingRightc_wizard__nav_list_lg_PaddingRight2rem
--pf-c-wizard__nav-list--nested--MarginLeftc_wizard__nav_list_nested_MarginLeft1rem
--pf-c-wizard__nav-list--nested--MarginTopc_wizard__nav_list_nested_MarginTop1rem
--pf-c-wizard__outer-wrap--BackgroundColorc_wizard__outer_wrap_BackgroundColor#fff
--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft0
--pf-c-wizard__title--PaddingRightc_wizard__title_PaddingRight3rem
--pf-c-wizard__toggle--BackgroundColorc_wizard__toggle_BackgroundColor#fff
--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-wizard__toggle--PaddingBottomc_wizard__toggle_PaddingBottom1.5rem
--pf-c-wizard__toggle--PaddingLeftc_wizard__toggle_PaddingLeftcalc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingRightc_wizard__toggle_PaddingRight1rem
--pf-c-wizard__toggle--PaddingTopc_wizard__toggle_PaddingTop1.5rem
--pf-c-wizard__toggle--ZIndexc_wizard__toggle_ZIndex200
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop0.375rem
--pf-c-wizard__toggle-list--MarginBottomc_wizard__toggle_list_MarginBottomcalc(0.25rem * -1)
--pf-c-wizard__toggle-list--MarginRightc_wizard__toggle_list_MarginRight0.5rem
--pf-c-wizard__toggle-list-item--MarginBottomc_wizard__toggle_list_item_MarginBottom0.25rem
--pf-c-wizard__toggle-list-item--first-child--FontSizec_wizard__toggle_list_item_first_child_FontSize1.125rem
--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight0.5rem
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top0.125rem
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color#8b8d8f
--pf-c-wizard__toggle-separator--MarginLeftc_wizard__toggle_separator_MarginLeft0.5rem
--pf-c-wizard--lg--Heightc_wizard_lg_Height47.625rem
--pf-c-wizard--lg--MaxHeightc_wizard_lg_MaxHeightcalc(100% - 2rem)
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Widthcalc(100% - (4rem * 2))