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

Attribute	Type	Default	Options	Description
company	string	British Gas		Change the company name in the copyright notice.
hideLogo	boolean	false	true false	Show or hide the British Gas logo.

Slots	Type
section	ns-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"
  },
  "corporation": {
    "spacer": {
      "inside-top": "1.5rem",
      "basketball-court": {
        "inside-top": "1.75rem"
      },
      "hockey-pitch": {
        "inside-top": "2rem"
      }
    }
  },
  "logo-copyright": {
    "spacer": {
      "outside-bottom": "0"
    }
  },
  "ul": {
    "spacer": {
      "inside-left": "0",
      "hockey-pitch": {
        "outside-bottom": "0"
      }
    }
  },
  "li": {
    "spacer": {
      "outside-bottom": "1rem",
      "hockey-pitch": {
        "outside-bottom": "1.25rem"
      }
    },
    "last-child": {
      "spacer": {
        "outside-bottom": "0"
      }
    }
  },
  "social-links": {
    "spacer": {
      "outside-bottom": "0"
    },
    "ul": {
      "spacer": {
        "inside-left": "0"
      }
    },
    "li": {
      "spacer": {
        "outside-bottom": "0",
        "outside-left": "1.25rem"
      },
      "first-child": {
        "spacer": {
          "outside-left": "0"
        }
      }
    }
  }
}

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!