Skip to main content

ns-footer

Introduction#

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

Usage#

View example on Storybook

Component placement#

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

Specification#

AttributeTypeDefaultOptionsDescription
companystringBritish GasChange the company name in the copyright notice.
hideLogobooleanfalsetrue falseShow or hide the British Gas logo.
SlotsType
sectionns-card

Specification notes#

Section slot#

  • Should use the ns-card with type nav.

Design Tokens

You can change the branded look and feel of the ns-footer by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "theme": "blue",
  "heading": {
    "typography": "heading-3"
  }
}

Feedback#

  • 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

💩 🎉 🦄 You can also contact the team on Slack on the #product-nucleus channel!

Edit this page