• Home
• org.mvnpm.at.patternfly
• patternfly
• 6.0.0
• source code
• Masthead.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.Masthead.examples.Masthead.md Maven / Gradle / Ivy

---
id: Masthead
section: components
wrapperTag: div
---## Examples

### 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
            
          
        
      
    
  


```

### With context selector and dropdown

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                
                  Context selector
                  
                    
                      
                    
                  
                
              
              

                
                  Dropdown
                  
                    
                      
                    
                  
                
              
            

            

              
                
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

### With toolbar, filters

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                
                  
                    
                  
                
              
              

                

                  

                    
                      
                        
                      
                      Name
                      
                        
                          
                        
                      
                    
                  
                  

                    

                      

                        
                          
                            
                          
                          
                        
                      
                    
                  
                
              
            

            

              
                
                  
                
              
            
          

          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

### With toggle group and filters

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                
                  
                    
                  
                
              
              

                

                  

                    
                      
                        
                      
                      Name
                      
                        
                          
                        
                      
                    
                  
                  

                    

                      

                        
                          
                            
                          
                          
                        
                      
                    
                  
                
              
            

            

              
                
                  
                
              
            
          

          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

### With expandable search, collapsed

```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
            
          
        
      
    
  


```

### With expandable search, 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
            
          
        
      
    
  


```

### Advanced integration with menu options

```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
            
          
        
      
    
  


```

### Horizontal nav

```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
            
          
        
      
    
  


```

## Mobile examples

### With toggle group, filters, expandable content expanded (mobile)

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                
                  
                    
                  
                
              
            

            

              
                
                  
                
              
            
          

          

            

              

                

                  
                    
                      
                    
                    Name
                    
                      
                        
                      
                    
                  
                
                

                  

                    

                      
                        
                          
                        
                        
                      
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```