HTML

Wizard

ExamplesDocumentationCSS variables

Examples

Wizard

Wizard
Copied to clipboard

Wizard - nav expanded (mobile)

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

Wizard - finished

Wizard - finished
Copied to clipboard

Wizard - full width/height

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

Wizard - compact nav

Wizard - compact nav
Copied to clipboard

Wizard - in page

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>, <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__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-in-page .pf-c-wizard Modifies wizard for use outside of a modal.
.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_BoxShadownone
--pf-c-wizard--Heightc_wizard_Height100%
--pf-c-wizard--Widthc_wizard_Widthauto
--pf-c-wizard__close--FontSizec_wizard__close_FontSize1.25rem
--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--ZIndexc_wizard__header_ZIndex300
--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight2rem
--pf-c-wizard__main--ZIndexc_wizard__main_ZIndex100
--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_ZIndex200
--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#737679
--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#737679
--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
--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#737679
--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#737679
--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_ZIndex300
--pf-c-wizard__toggle-icon--LineHeightc_wizard__toggle_icon_LineHeight1.5
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop0
--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--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight0.5rem
--pf-c-wizard__toggle--m-expanded__toggle-icon--Transformc_wizard__toggle_m_expanded__toggle_icon_Transformrotate(180deg)
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top0
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color#8a8d90
--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% - (3rem * 2))
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Widthcalc(100% - (3rem * 2))
--pf-c-wizard--m-compact-nav__nav--lg--Widthc_wizard_m_compact_nav__nav_lg_Width15.625rem
--pf-c-wizard--m-full-height--lg--Heightc_wizard_m_full_height_lg_Height100%
--pf-c-wizard--m-full-width--lg--MaxWidthc_wizard_m_full_width_lg_MaxWidthauto
--pf-c-wizard--m-in-page--BoxShadowc_wizard_m_in_page_BoxShadownone
--pf-c-wizard--m-in-page--Heightc_wizard_m_in_page_Height100%
--pf-c-wizard--m-in-page--Widthc_wizard_m_in_page_Widthauto
--pf-c-wizard--m-in-page__footer--md--PaddingBottomc_wizard_m_in_page__footer_md_PaddingBottom1.5rem
--pf-c-wizard--m-in-page__footer--md--PaddingLeftc_wizard_m_in_page__footer_md_PaddingLeft2rem
--pf-c-wizard--m-in-page__footer--md--PaddingRightc_wizard_m_in_page__footer_md_PaddingRight2rem
--pf-c-wizard--m-in-page__footer--md--PaddingTopc_wizard_m_in_page__footer_md_PaddingTop2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingBottomc_wizard_m_in_page__main_body_md_PaddingBottom2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingLeftc_wizard_m_in_page__main_body_md_PaddingLeft2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingRightc_wizard_m_in_page__main_body_md_PaddingRight2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingTopc_wizard_m_in_page__main_body_md_PaddingTop2rem
--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_BorderRightWidth1px
--pf-c-wizard--m-in-page__nav--lg--BoxShadowc_wizard_m_in_page__nav_lg_BoxShadownone
--pf-c-wizard--m-in-page__nav--lg--Widthc_wizard_m_in_page__nav_lg_Width15.625rem
--pf-c-wizard--m-in-page__nav-list--md--PaddingLeftc_wizard_m_in_page__nav_list_md_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page__toggle--md--PaddingLeftc_wizard_m_in_page__toggle_md_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page--lg--MaxHeightc_wizard_m_in_page_lg_MaxHeightnone
--pf-c-wizard--m-in-page--lg--MaxWidthc_wizard_m_in_page_lg_MaxWidthnone