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

---
id: Page
section: components
wrapperTag: div
---import './Page.css'

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


```

### Multiple sidebar body elements

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      

        
Custom sidebar content
      
    
    

      
    
    

      

        
Custom sidebar content
      
    
    

      

        
© Copyright
      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

### Sticky horizontal subnav

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
    
  


```

### Sticky breadcrumb

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
    
  


```

### Sticky breadcrumb on medium

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
    
  


```

### Sticky section group

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
    
  


```

### Sticky section bottom

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
      

        

          
PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.
        
      
    
  


```

### Overflow scroll

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

              
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
            
            

              
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
            
            

              
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
            
            

              
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
            
          
        
      
      

        

          
PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.
        
      
    
  


```

### Centered section

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
    
  
  

    

      

        

          

            
Centering page sections
            

              When a width limited page section is wider than the value of
              --pf-v6-c-page--section--m-limit-width--MaxWidth, the section will be centered in the main section.
            
            
All of the page sections on this page are centered.
          
        
      
      

      

        

          

            

              
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
            
          
        
      
      

      

        

          

            

              

                The content in this section is also centered using the
                .pf-v6-u-text-align-center utility class.
              
            
          
        
      
    
  


```

### Context selector in sidebar

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
        
          
        
        Administrator
        
          
            
          
        
      
    
    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

### Context selector expanded in sidebar

```html isFullscreen

  

    
      Skip to content
    
  
  

    

      
        
          
            
          
        
      
      

        
          
        
      
    
    

      

        

          

            

              

                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
                

                  
                    
                      
                    
                  
                
              

              

                
                  
                    
                  
                
              
            
          
        
      
    
  
  

    

      
        
          
        
        Administrator
        
          
            
          
        
      
      

        

          

            

              
                
                  
                    
                  
                  Administrator
                
              
            
            

              
                
                  
                    
                  
                  Developer
                
              
            
            

              
                
                  
                    
                  
                  User
                
              
            
          
        
      
    
    

      
    
  
  

    

      

        

          
        
      
      

        

          

            
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
            
          
        
      
    
  


```

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


```

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


```