ns-footer
#
IntroductionRequired 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 valuefooter
to work with skip links
#
Usage#
Component placementThe ns-footer component can only be used as a child of the <main>
element
#
SpecificationAttribute | 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 typenav
.
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!