Design Tokens for Mesh have just been released!
Skip to content
Mesh
Stable

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.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash
npm install @nib-components/footer

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

Usage

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

Interactive demo

Footer

jsx

SmallFooter

jsx

Props

Footer

PropTypeDefaultDescription
variationstringarhiChoose from one of several pre-made Footer configurations: arhi, nz, shareholders, international, foundation, providers, or gu.
configobjectProvide a custom configuration when one of the existing variations does not suit your use case. See below for more details.
isCorporatebooleanfalseUse the corporate phone number from the variation config, if it exists. Otherwise use default.
hidePhoneNumberbooleanfalseWhether or not to hide the phone number in the small footer.
nzShieldednodeA Shielded component to be added to the footer. For nz variations only.
forceHideAcknowledgementOfCountrybooleanfalseAn override to hide the AcknowledgementOfCountry, no matter the config, variation or brand.

The shape of the Footer config object is as follows:

jsx
const config = {
  contact: {
    phoneNumber: '...',
    corporatePhoneNumber: '...',
    contactLinks: [
      /* .. */
    ]
  },
  columns: [
    /* ... */
  ],
  smallFooterConfig: {
    /* See below for details */
  }
};

If you decide to build your own config, we recommend using the FooterConfig type as a guide. You may also wish to use one of the variations as a jumping off point.

Note The variation prop will be ignored when config is supplied.

SmallFooter

PropTypeDefaultDescription
variationstringarhiWhich version of the footer to use. One of arhi, nz, shareholders, international, foundation, gu, providers.
isCorporatebooleanfalseUse the corporate phone number from the variation config, if it exists. Otherwise use default.
configobjectCustom config to populate the SmallFooter. The shape of the object can be seen below.
forceHideAcknowledgementOfCountrybooleanfalseAn override to hide the AcknowledgementOfCountry, no matter the config, variation or brand.

The shape of the SmallFooter config object is as follows:

jsx
const config = {
  copyrightText: `Copyright © ${new Date().getFullYear()} nib health funds limited ABN 83 000 124 381`,
  phoneNumber: '123 456'
  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: '/docs/online-terms',
      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',
    }
  ]
};

Related components

Edit this page