Skip to main content



Required links and information that need to be repeated on every page.

NOTE: This is the UI component for producing a customised footer. If you are looking for the default British Gas footer which contains the links please use nsx-footer.

The last component on the page, this holds links and copyright notices that are legally required. It also holds information about the company.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Always have the footer at the bottom of the page.Make your own footer if you are part of the customer facing website.
Keep the footer outside the main element

Considerations of best practice#

  • If you are using the footer add a id with the value footer to work with skip links


View example on Storybook

Component placement#

The ns-footer component can only be used as a child of the <main> element


companycompanystringBritish GasChange the company name in the copyright notice.
hide-logohideLogobooleanfalsetrue falseShow or hide the British Gas logo.

Specification notes#

Section slot#

  • Should use the ns-card with type nav.


  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.