• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• Wizard.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

package.docs.demos.Wizard.examples.Wizard.md Maven / Gradle / Ivy

---
id: Wizard
section: components
wrapperTag: div
---## Demos

### Basic

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


  

    

      

        

          

            
              
                
              
            
          
          

            
Wizard title
          
          
Here is where the description goes
        
        
          
            
              2
              Configuration
              
            
            Substep B
          
          
            
          
        
        

          

            
            

              

                

                  

                    

                        Field 1 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 2 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 3 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 4 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 5 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 6 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 7 *
                    
                    

                      
                        
                      
                    
                  
                
              
            
          
          
        
      
    
  


```

### Nav expanded (mobile)

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


  

    

      

        

          

            
              
                
              
            
          
          

            
Wizard title
          
          
Here is where the description goes
        
        
          
            
              2
              Configuration
              
            
            Substep B
          
          
            
          
        
        

          

            
            

              

                

                  

                    

                        Field 1 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 2 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 3 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 4 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 5 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 6 *
                    
                    

                      
                        
                      
                    
                  
                  

                    

                        Field 7 *
                    
                    

                      
                        
                      
                    
                  
                
              
            
          
          
        
      
    
  


```

### With drawer, closed

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


  

    

      

        

          

            
              
                
              
            
          
          

            
Wizard title
          
          
Here is where the description goes
        
        
          
            
              2
              Configuration
              
            
            Substep B
          
          
            
          
        
        

          

            
            

              

                

                  

                    

                      
                        Open drawer
                      
                      

                        

                          

                              Field 1 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 2 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 3 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 4 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 5 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 6 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 7 *
                          
                          

                            
                              
                            
                          
                        
                      
                    
                  
                  
                
                
              
            
          
        
      
    
  


```

### With drawer, expanded

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


  

    

      

        

          

            
              
                
              
            
          
          

            
Wizard title
          
          
Here is where the description goes
        
        
          
            
              2
              Configuration
              
            
            Substep B
          
          
            
          
        
        

          

            
            

              

                

                  

                    

                      
                        Open drawer
                      
                      

                        

                          

                              Field 1 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 2 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 3 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 4 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 5 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 6 *
                          
                          

                            
                              
                            
                          
                        
                        

                          

                              Field 7 *
                          
                          

                            
                              
                            
                          
                        
                      
                    
                  
                  

                    

                      

                        
Register with Red Hat connector
                        

                          

                            
                              
                                
                              
                            
                          
                        
                      
                    
                    

                      

                        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.

                        
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.

                        

                          Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
                          Vestibulum facilisis ante eros, eget volutpat risus lobortis non.
                        
                        
                          
                            Learn about Red Hat connector
                            
                          
                        
                      
                    
                  
                
                
              
            
          
        
      
    
  


```

### With drawer and informational step

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          

            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
            

              
This is a card
            
          
        
      
    
  


  

    

      

        

          

            
              
                
              
            
          
          

            
Wizard title
          
          
Here is where the description goes
        
        
          
            
              2
              Configuration
              
            
            Substep B
          
          
            
          
        
        

          

            
            

              

                

                  

                    

                      
                        Open drawer
                      
                      

                        
Information step content
                        

                          Wizard description goes here. If you need more assistance,
                          
                            see more information
                          
                          in the side drawer.
                        
                      
                    
                  
                  
                
                
              
            
          
        
      
    
  


```

### In page

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          
            
              
                2
                Configuration
                
              
              Substep B
            
            
              
            
          
          

            

              
              

                

                  

                    

                      

                          Field 1 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 2 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 3 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 4 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 5 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 6 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 7 *
                      
                      

                        
                          
                        
                      
                    
                  
                
              
            
            
          
        
      
    
  


```

### In page nav expanded (mobile)

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          
            
              
                2
                Configuration
                
              
              Substep B
            
            
              
            
          
          

            

              
              

                

                  

                    

                      

                          Field 1 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 2 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 3 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 4 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 5 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 6 *
                      
                      

                        
                          
                        
                      
                    
                    

                      

                          Field 7 *
                      
                      

                        
                          
                        
                      
                    
                  
                
              
            
            
          
        
      
    
  


```

### With drawer, in page

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          
            
              
                2
                Configuration
                
              
              Substep B
            
            
              
            
          
          

            

              
              

                

                  

                    

                      

                        

                          

                            

                                Field 1 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 2 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 3 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 4 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 5 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 6 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 7 *
                            
                            

                              
                                
                              
                            
                          
                        
                      
                    
                    
                  
                
              
            
            
          
        
      
    
  


```

### With drawer, in page, expanded

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
Main title
            
This is a full page demo.
          
        
      
      

        

          
            
              
                2
                Configuration
                
              
              Substep B
            
            
              
            
          
          

            

              
              

                

                  

                    

                      

                        

                          

                            

                                Field 1 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 2 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 3 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 4 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 5 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 6 *
                            
                            

                              
                                
                              
                            
                          
                          

                            

                                Field 7 *
                            
                            

                              
                                
                              
                            
                          
                        
                      
                    
                    

                      

                        

                          
Register with Red Hat connector
                          

                            

                              
                                
                                  
                                
                              
                            
                          
                        
                      
                      

                        

                          
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.
                          
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.
                          

                            Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
                            Vestibulum facilisis ante eros, eget volutpat risus lobortis non.
                          
                          
                            
                              Learn about Red Hat connector
                              
                            
                          
                        
                      
                    
                  
                
              
            
            
          
        
      
    
  


```