Skip to content
Mesh
7.0.1

Small Header Footer Layout

Small Header Footer Layout provides a minimal layout containing both Small Header and Small Footer components. This component is best used for standalone pages or when a user is required to navigate through a set path (e.g. a sales funnel).

This package has been deprecated

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

Installation

bash
npm install @nib-components/small-header-footer-layout

Usage

jsx
import SmallHeaderFooterLayout from '@nib-components/small-header-footer-layout';

Interactive demo

Page content here.
jsx

Props

PropTypeDefaultDescription
children (required)nodeThe content of your app.
variationstringarhiWhich version of the header and footer to use. One of arhi, nz, shareholders, international, foundation.
invertHeaderbooleanfalsePasses down to the invert prop of the SmallHeader component.
lhsnodePasses down to the lhs prop of the SmallHeader component.
rhsnodePasses down to the rhs prop of the SmallHeader component.
logoHrefstring/Passes down to the logoHref prop of the SmallHeader component.
flexbooleanfalseWhether the GrowLayout.Content should use CSS flex.
footerConfigobjectPasses down to the config prop of the SmallFooter component. Used in place of the variation prop.

Considerations

Appropriate uses for Small Header Footer Layout:

  • 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.