Skip to content

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.


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


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

Interactive demo

Page content here.


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.


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.