Skip to content
Mesh
6.6.4

Small Footer

Small Footer is a minimal footer 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 Footer component should be used instead. When combining this component with the Small Header component, use the Small Header Footer Layout component instead.

This package has been deprecated

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

Installation

bash
npm install @nib-components/small-footer

Usage

jsx
import SmallFooter from '@nib-components/small-footer';

Interactive demo

jsx

Props

PropTypeDefaultDescription
variationstringarhiThe variation of the footer for different business areas. One of arhi, nz, shareholders, international, foundation.
configobjectA configuration object to define the contents of the footer.

Custom configuration example

The following configuration renders the footer below:

jsx
{
id: 'small-footer-custom',
copyrightText: 'Copyright details',
phoneNumber: '1800 123 456', // can also be an array, e.g. ['1800 123 456', '+61 02 1234 5678']
links: [
{
id: 'ga-footer-link',
title: 'Link 1',
url: '#',
targetBlank: true
},
{
id: 'ga-footer-link',
title: 'Link 2',
url: '#'
}
]
}

Considerations

The appropriate usecases for a Small Footer:

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