package.docs.components.Masthead.examples.masthead.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: 'Masthead'
section: components
cssPrefix: pf-v6-c-masthead
---## Examples

### Basic

```html

  
    
      
    
    
      
        
      
    
  
  
    Content
  


```

### Basic with mixed content

```html

  
    
      
    
    
      
        
      
    
  
  
    
    
    
  


```

### Display inline

```html

  
    
      
    
    
      
        
      
    
  
  
    Content
  


```

### Display stack

```html

  
    
      
    
    
      
        
      
    
  
  
    Content
  


```

### Display stack, display inline responsive

```html

  
    
      
    
    
      
        
      
    
  
  
    Content
  


```

### Insets

```html

  
    
      
    
    
      
        
      
    
  
  
    Content
  


```

## Documentation

### Usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-masthead` | `` | Initiates the masthead component. **Required** |
| `.pf-v6-c-masthead__main` | `` | Initiates the masthead main component. **Required** |
| `.pf-v6-c-masthead__toggle` | `` | Initiates the masthead toggle component. |
| `.pf-v6-c-masthead__brand` | `` | Initiates the masthead content component. |
| `.pf-v6-c-masthead__logo` | `, ` | Initiates the masthead content component. |
| `.pf-v6-c-masthead__content` | `` | Initiates the masthead content component. |
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |