Skip to content

Small Header

Small Header is a minimal header design for use on standalone landing pages or when a user is required to navigate through a set path (e.g. a sales funnel). For general page layouts, the Header component should be used instead. When combining this component with the Small Footer component, use the Small Header Footer Layout component instead.

This package has been deprecated

The Small Header is now part of the Header component. Please migrate to use the small variant of the Header.

Installation

bash
npm install @nib-components/small-header

Usage

jsx
import SmallHeader from '@nib-components/small-header';

Interactive demo

jsx

Props

PropTypeDefaultDescription
invertbooleanfalseSets the background color of the header. Defaults to the base brand color defined in the Theme or white when true.
lhsnodeContent to appear on the left of the header.
rhsnodeContent to appear on the right of the header.
logoHrefstring/The URL for the logo link.

Considerations

The appropriate usecases for a Small Header:

  • User flows that have a direct navigation path, such as sales funnels.
  • When content being displayed requires a user's focus.
  • For standalone marketing pages that do not require navigation.