ba-footer
ba-footer is used to show a footer at the bottom of the page with links, social icons and copyright info
The footer must be the last item on the page. This is because the footer signals the end of the page, letting the user know there is no more content.
Automatically opening links in a new tab can confuse and disorient users. It is better to let the user decide how they want to open the link.
Further reading:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
copyright
|
copyright |
Whether to show any copyright text | string | undefined |
undefined |
countryHref
|
country-href |
Link for the country selector | string | undefined |
'' |
countryIsoCode
|
country-iso-code |
Country code for the flag | string | undefined |
'' |
countryName
|
country-name |
Country name | string | undefined |
'' |
facebook
|
facebook |
Link for Facebook | string | undefined |
undefined |
instagram
|
instagram |
Link for Instagram | string | undefined |
undefined |
language
|
language |
The selected language | string | undefined |
'' |
linkedin
|
linkedin |
Link for LinkedIn | string | undefined |
undefined |
pinterest
|
pinterest |
Link for Pinterest | string | undefined |
undefined |
spotify
|
spotify |
Link for Spotify | string | undefined |
undefined |
tiktok
|
tiktok |
Link for TikTok | string | undefined |
undefined |
twitter
|
twitter |
Link for Twitter | string | undefined |
undefined |
twitterX
|
twitter-x |
Link for X | string | undefined |
undefined |
wechat
|
wechat |
Link for WeChat | string | undefined |
undefined |
weibo
|
weibo |
Link for Weibo | string | undefined |
undefined |
whatsapp
|
whatsapp |
Link for WhatsApp | string | undefined |
undefined |
xiaohongshu
|
xiaohongshu |
Link for Xiaohongshu | string | undefined |
undefined |
youtube
|
youtube |
Link for youtube | string | undefined |
undefined |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | For showing a styled link list | <ba‑footer> |
"logo" |
A logo to show at the bottom of the footer | <ba‑logo>, <svg> |
Permitted ARIA roles
None
Usage
Basic usage
The footer will be used at the bottom of the page beneath any other content.
<ba-footer
facebook="https://www.facebook.com/britishairways"
instagram="https://www.instagram.com/british_airways"
linkedin="https://www.linkedin.com/company/british-airways"
pinterest="https://www.pinterest.com/britishairways"
spotify="https://www.spotify.com/britishairways"
tiktok="https://www.tiktok.com/britishairways"
twitter="https://twitter.com/british_airways"
wechat="https://www.wechat.com/britishairways"
weibo="https://e.weibo.com/britishairways"
whatsapp="https://wa.me/1234567891"
twitterX="https://twitter.com/british_airways"
xiaohongshu="https://www.xiaohongshu.com/britishairways"
youtube="https://www.youtube.com/britishairways"
copyright="British Airways - all rights reserved"
>
<ba-logo name="speedmark-negative-colour" slot="logo"></ba-logo>
</ba-footer>
Styled link list
An example of showing a styled list of links with a heading
<ba-footer
facebook="https://www.facebook.com/britishairways"
instagram="https://www.instagram.com/british_airways"
linkedin="https://www.linkedin.com/company/british-airways"
pinterest="https://www.pinterest.com/britishairways"
spotify="https://www.spotify.com/britishairways"
tiktok="https://www.tiktok.com/britishairways"
twitter="https://twitter.com/british_airways"
wechat="https://www.wechat.com/britishairways"
weibo="https://e.weibo.com/britishairways"
whatsapp="https://wa.me/1234567891"
twitterX="https://twitter.com/british_airways"
xiaohongshu="https://www.xiaohongshu.com/britishairways"
youtube="https://www.youtube.com/britishairways"
copyright="British Airways - all rights reserved"
>
<ba-footer-list heading="Discover">
<a slot="link" href="/">lorem ipsum</a>
<a slot="link" href="/">lorem ipsum</a>
<a slot="link" href="/">lorem ipsum</a>
</ba-footer-list>
<ba-logo name="speedmark-negative-colour" slot="logo"></ba-logo>
</ba-footer>