Footer
The footer is placed at the bottom of every page of the website and comes in two varieties: Footer and SlimFooter
The footer contains the logo, links and button links to often used services, as well as links to our social media platforms.
Usage
1 Install
npm install @posten-hedwig/footer2 Icons auth token in environment
Hedwig is using icons from Font Awesome Pro wich requires a licence. The auth token from your licence will need to be added to an environment variable. For Posten and Bring developers, please contact the Hedwig contributors for this token. For other users, a licence can be obtained here
3 Import
import { Footer } from '@posten-hedwig/footer'4 Render
<Footer
logo='posten'
logoHref='#'
logoTitle='Posten Logo'
sections={...}
importantLinks={...}
copyright='Posten Norge AS'
some={...}
/>Footer API
Footer logo
This prop specifies which logo to use for the navbar. 'posten' and 'bring' are available
Footer logoHref
This prop is the link to where the logo is leading to
Footer logoTitle
This prop specifies the alt text for the logo.
Footer sections
This prop specifies the sections for the Footer. Each section consists of a title and an array of links. Can be either links with href, React Router Links or Hedwig Links.
import { Footer } from '@posten-hedwig/footer'
import { Link } from '@posten-hedwig/link'
/*…*/
<Footer
/*…*/
sections={[
{
title: 'Send',
links: [
<Link href='#'>Parcels abroad</Link>,
<Link href='#'>Parcels in Norway</Link>,
<Link href='#'>Letters in Norway</Link>,
<Link href='#'>Return</Link>,
<Link href='#'>Letters abroad</Link>,
<Link href='#'>Addressing and wrapping</Link>,
<Link href='#'>Customs when sending abroad</Link>
]
},
{
title: 'Receive',
links: [
<Link href='#'>On what days does my mail arrive?</Link>,
<Link href='#'>Home delivery</Link>,
<Link href='#'>Pick up yourself</Link>,
<Link href='#'>Customs when receiving</Link>
]
}
]}
/>Footer importantLinks
This prop specifies important links in the Footer. The links can be for cookie information and privacy policy for example
import { Footer } from '@posten-hedwig/footer'
import { Link } from '@posten-hedwig/link'
/*…*/
<Footer
/*…*/
importantLinks={
[
<Link href='#'>Cookies</Link>,
<Link href='#'>Privacy policy</Link>
]
}
/>Footer buttons
This prop specifies Links or buttons for special items in the footer. Will be styled as buttons.
import { Footer } from '@posten-hedwig/footer'
import { Link } from '@posten-hedwig/link'
/*…*/
<Footer
/*…*/
buttons={
[
<button onClick={() => alert('You clicked Cookies')}>Cookies</button>,
<Link href='#'>Privacy policy</Link>
]
}
/>Footer copyright
This prop specifies the name for copyright on this site. Default value "Posten Norge AS"
Footer some
This prop specifies links and brands for social media. Specification: An array of objects looking like this:
{
brand: String,
href: String,
ariaLabel: String,
}or
{
brand: String,
onclick: function,
ariaLabel: String,
}Example
import { Footer } from '@posten-hedwig/footer'
/*…*/
<Footer
/*…*/
some: [
{
brand: 'facebook',
href: '#',
ariaLabel: 'Check out our Facebook page'
},
{
brand: 'instagram',
onclick: () => {
alert('You clicked Instagram')
},
ariaLabel: 'Check out our Instagram page'
},
{
brand: 'mail',
href: 'mailto:hedwig@posten.no'
ariaLabel: 'Send us email'
}
]
/>