- React

To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.

Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains the page’s header toolbar within `<MastheadContent>`.

## Examples

### Basic

### Basic with mixed content

### Display inline

### Display stack

### Display stack, display inline responsive

### Inset

### Custom logo component

In addition to being able to pass a string to the `component` property of `MastheadLogo`, you can provide more fine-tuned customization by passing a callback that returns a component.

## Using router links

Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our custom logo component example and pass a callback to the `component` property of the `MastheadLogo`:

    <MastheadLogo component={(props) => <Link {...props} to="#" />}>
      <Brand ...brandProps />
    </MastheadLogo>

##
CSS variables