Skip to content
Mesh
8.1.0

Footer

The Footer component is our primary page footer. This should be used on all pages except for focused content and sales funnel pages which should use the Small Footer component. When combining this component with the Header component, use the Header Footer Layout component instead.

Installation

bash
npm install @nib-components/footer

Note: You will also need to install the peerDependencies @nib-components/button and @nib-components/theme.

Usage

jsx
import Footer, {SmallFooter} from '@nib-components/footer';

Interactive demo

jsx

SmallFooter

jsx

Props

PropTypeDefaultDescription
variationstringarhiWhich version of the footer to use. One of arhi, nz, shareholders, international, foundation.
nzShieldednodeA Shielded component to be added to the footer. For nz variations only.

SmallFooter

PropTypeDefaultDescription
variationstringarhiWhich version of the footer to use. One of arhi, nz, shareholders, international, foundation.
configobjectCustom config to populate the SmallFooter. The shape of the object can be seen below.

The shape of the config object is as follows:

jsx
const config = {
copyrightText: 'nib health funds limited ABN 83 000 124 381',
links: [
{
id: 'ga-footer-fund-rules',
title: 'Fund Rules',
url: '/health-information/content/assets/pdf/nib-fund-rules.pdf',
},
{
id: 'ga-footer-terms',
title: 'Terms & Conditions',
url: '/legal/terms-and-conditions',
targetBlank: true // sets target="_blank" on the link if true
},
{
id: 'ga-footer-privacy',
title: 'Privacy Policy',
url: '/legal/privacy-policy',
},
{
id: 'ga-footer-code-conduct'
title: 'Code of Conduct',
url: '/legal#codeofconduct',
}
]
};