Helsinki Design System | Footer

DraftAccessible

The Footer component is located at the bottom of the page below the main body content. It provides a place for secondary navigation, site-wide actions, and additional information.

Usage
Code
Accessibility
Customisation

Code

Code examples

Default

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok, Logo, logoFi } from 'hds-react';

() => (
  <Footer title="Helsinki Design System">
    <Footer.Navigation>
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
    </Footer.Navigation>
    <Footer.Utilities
      soMeLinks={[
        <Footer.Link title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,
        <Footer.Link title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,
        <Footer.Link title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,
        <Footer.Link title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,
        <Footer.Link title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,
      ]}
    >
      <Footer.Link label="Contact us" />
      <Footer.Link label="Give feedback" />
    </Footer.Utilities>
    <Footer.Base
      copyrightHolder="Copyright"
      copyrightText="All rights reserved"
      backToTopLabel="Back to top"
      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
      logoHref="https://hel.fi"
      onLogoClick={(event) => event.preventDefault()}
    >
      <Footer.Link label="Link" />
      <Footer.Link label="Link" />
      <Footer.Link label="Link" />
    </Footer.Base>
  </Footer>
)

import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok, Logo, logoFi } from 'hds-react';

() => (
  <Footer title="Helsinki Design System">
    <Footer.Navigation>
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
      <Footer.Link label="Item" />
    </Footer.Navigation>
    <Footer.Utilities
      soMeLinks={[
        <Footer.Link title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,
        <Footer.Link title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,
        <Footer.Link title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,
        <Footer.Link title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,
        <Footer.Link title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,
      ]}
    >
      <Footer.Link label="Contact us" />
      <Footer.Link label="Give feedback" />
    </Footer.Utilities>
    <Footer.Base
      copyrightHolder="Copyright"
      copyrightText="All rights reserved"
      backToTopLabel="Back to top"
      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
      logoHref="https://hel.fi"
      onLogoClick={(event) => event.preventDefault()}
    >
      <Footer.Link label="Link" />
      <Footer.Link label="Link" />
      <Footer.Link label="Link" />
    </Footer.Base>
  </Footer>
)

Color variations

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Footer, Logo, logoFi, logoFiDark } from 'hds-react';

() => (
  <>
    <Footer title="Helsinki Design System">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
      <Footer.Base
        copyrightHolder="Copyright"
        copyrightText="All rights reserved"
        backToTopLabel="Back to top"
        logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
      >
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
      </Footer.Base>
    </Footer>
    <br />
    <Footer title="Helsinki Design System" theme="dark">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
      <Footer.Base
        copyrightHolder="Copyright"
        copyrightText="All rights reserved"
        backToTopLabel="Back to top"
        logo={<Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />}
      >
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
      </Footer.Base>
    </Footer>
  </>
)

import { Footer, Logo, logoFi, logoFiDark } from 'hds-react';

() => (
  <>
    <Footer title="Helsinki Design System">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
      <Footer.Base
        copyrightHolder="Copyright"
        copyrightText="All rights reserved"
        backToTopLabel="Back to top"
        logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
      >
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
      </Footer.Base>
    </Footer>
    <br />
    <Footer title="Helsinki Design System" theme="dark">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
      <Footer.Base
        copyrightHolder="Copyright"
        copyrightText="All rights reserved"
        backToTopLabel="Back to top"
        logo={<Logo src={logoFiDark} size="medium" alt="Helsingin kaupunki" />}
      >
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
        <Footer.Link label="Link" />
      </Footer.Base>
    </Footer>
  </>
)

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Footer } from 'hds-react';

() => (
  <>
    <Footer title="Default">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
    </Footer>
    <br />
    <br />
    <Footer title="Sitemap">
      <Footer.Navigation>
        {[1, 2, 3, 4].map((key) => (
          <Footer.NavigationGroup key={key}>
            <Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
          </Footer.NavigationGroup>
        ))}
      </Footer.Navigation>
    </Footer>
    <br />
    <Footer title="Hidden" />
  </>
)

import { Footer } from 'hds-react';

() => (
  <>
    <Footer title="Default">
      <Footer.Navigation>
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
        <Footer.Link label="Item" />
      </Footer.Navigation>
    </Footer>
    <br />
    <br />
    <Footer title="Sitemap">
      <Footer.Navigation>
        {[1, 2, 3, 4].map((key) => (
          <Footer.NavigationGroup key={key}>
            <Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
            <Footer.Link label="Sub item" />
          </Footer.NavigationGroup>
        ))}
      </Footer.Navigation>
    </Footer>
    <br />
    <Footer title="Hidden" />
  </>
)

Utility section variations

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from 'hds-react';

() => (
  <>
    <Footer title="Default">
      <Footer.Utilities
        soMeLinks={[
          <Footer.Link
            title="Helsingin kaupungin Facebook-tili"
            ariaLabel="Helsingin kaupungin Facebook-tili"
            external
            openInNewTab
            icon={<IconFacebook aria-hidden />}
            href="https://facebook.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Twitter-tili"
            ariaLabel="Helsingin kaupungin Twitter-tili"
            external
            openInNewTab
            icon={<IconTwitter aria-hidden />}
            href="https://twitter.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Instagram-tili"
            ariaLabel="Helsingin kaupungin Instagram-tili"
            external
            openInNewTab
            icon={<IconInstagram aria-hidden />}
            href="https://instagram.com"
          />,
          <Link
            title="Helsingin kaupungin Youtube-tili"
            ariaLabel="Helsingin kaupungin Youtube-tili"
            external
            openInNewTab
            icon={<IconYoutube aria-hidden />}
            href="https://youtube.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Tiktok-tili"
            ariaLabel="Helsingin kaupungin Tiktok-tili"
            external
            openInNewTab
            icon={<IconTiktok aria-hidden />}
            href="https://tiktok.com"
          />,
        ]}
      >
        <Footer.Link onClick={(e) => e.preventDefault()} label="Contact us" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="Give feedback" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="Support" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="About" />
      </Footer.Utilities>
    </Footer>
    <br />
    <br />
    <Footer title="Utility groups">
      <Footer.Utilities>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
      </Footer.Utilities>
    </Footer>
  </>
)

import { Footer, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from 'hds-react';

() => (
  <>
    <Footer title="Default">
      <Footer.Utilities
        soMeLinks={[
          <Footer.Link
            title="Helsingin kaupungin Facebook-tili"
            ariaLabel="Helsingin kaupungin Facebook-tili"
            external
            openInNewTab
            icon={<IconFacebook aria-hidden />}
            href="https://facebook.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Twitter-tili"
            ariaLabel="Helsingin kaupungin Twitter-tili"
            external
            openInNewTab
            icon={<IconTwitter aria-hidden />}
            href="https://twitter.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Instagram-tili"
            ariaLabel="Helsingin kaupungin Instagram-tili"
            external
            openInNewTab
            icon={<IconInstagram aria-hidden />}
            href="https://instagram.com"
          />,
          <Link
            title="Helsingin kaupungin Youtube-tili"
            ariaLabel="Helsingin kaupungin Youtube-tili"
            external
            openInNewTab
            icon={<IconYoutube aria-hidden />}
            href="https://youtube.com"
          />,
          <Footer.Link
            title="Helsingin kaupungin Tiktok-tili"
            ariaLabel="Helsingin kaupungin Tiktok-tili"
            external
            openInNewTab
            icon={<IconTiktok aria-hidden />}
            href="https://tiktok.com"
          />,
        ]}
      >
        <Footer.Link onClick={(e) => e.preventDefault()} label="Contact us" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="Give feedback" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="Support" />
        <Footer.Link onClick={(e) => e.preventDefault()} label="About" />
      </Footer.Utilities>
    </Footer>
    <br />
    <br />
    <Footer title="Utility groups">
      <Footer.Utilities>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
        <Footer.UtilityGroup headingLink={<Footer.GroupHeading onClick={(e) => e.preventDefault()} label="Group" />}>
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
          <Footer.Link label="Link" />
        </Footer.UtilityGroup>
      </Footer.Utilities>
    </Footer>
  </>
)

Custom Link

The Footer.Link component has the as prop which you can use to use your own navigation link instead of our Footer.Link, which uses HDS Link underneath. You can pass it as an element as={<CustomLink />} or as a component as={CustomLink}.

React

Editable code examplePress Enter to start editing. Press Esc to stop editing.

import { Footer, Logo, logoFi, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from 'hds-react';
import { Link } from 'gatsby';

() => (
  <Footer title="Helsinki Design System">
    <Footer.Navigation>
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
    </Footer.Navigation>
    <Footer.Utilities
      soMeLinks={[
        <Footer.Link as={Link} title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,
      ]}
    >
      <Footer.Link as={Link} label="Contact us" />
      <Footer.Link as={Link} label="Give feedback" />
    </Footer.Utilities>
    <Footer.Base
      copyrightHolder="Copyright"
      copyrightText="All rights reserved"
      backToTopLabel="Back to top"
      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
    >
      <Footer.Link as={Link} label="Link" />
      <Footer.Link as={Link} label="Link" />
      <Footer.Link as={Link} label="Link" />
    </Footer.Base>
  </Footer>
)

import { Footer, Logo, logoFi, IconFacebook, IconTwitter, IconInstagram, IconYoutube, IconTiktok } from 'hds-react';
import { Link } from 'gatsby';

() => (
  <Footer title="Helsinki Design System">
    <Footer.Navigation>
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
      <Footer.Link as={Link} label="Item" />
    </Footer.Navigation>
    <Footer.Utilities
      soMeLinks={[
        <Footer.Link as={Link} title="Helsingin kaupungin Facebook-tili" icon={<IconFacebook />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Twitter-tili" icon={<IconTwitter />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Instagram-tili" icon={<IconInstagram />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Youtube-tili" icon={<IconYoutube />} />,
        <Footer.Link as={Link} title="Helsingin kaupungin Tiktok-tili" icon={<IconTiktok />} />,
      ]}
    >
      <Footer.Link as={Link} label="Contact us" />
      <Footer.Link as={Link} label="Give feedback" />
    </Footer.Utilities>
    <Footer.Base
      copyrightHolder="Copyright"
      copyrightText="All rights reserved"
      backToTopLabel="Back to top"
      logo={<Logo src={logoFi} size="medium" alt="Helsingin kaupunki" />}
    >
      <Footer.Link as={Link} label="Link" />
      <Footer.Link as={Link} label="Link" />
      <Footer.Link as={Link} label="Link" />
    </Footer.Base>
  </Footer>
)

Packages

Package	Included	Storybook link	Source link
HDS React	Yes	View in Storybook	View source
HDS Core	No	-	-

Properties

**Table 1**: Footer properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing footer.	`string`	-
`className`	Additional class names to apply.	`string`	-
`footerProps`	Additional props for the `<footer` element.	`Object`	-
`korosType`	Koros type to use in the footer.	`KorosType`	`"basic"`
`theme`	Footer theme.	`"light` `"dark"` `FooterCustomTheme`	`"light"`
`title`	Service name.	`string`	-

This component also accepts all nativefooter element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

**Table 2**: Footer.Navigation properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the navigation.	`string`	-
`role`	ARIA role to describe the contents.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

**Table 3**: Footer.Link properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the link.	`string`	-
`as`	Element or component to use instead of the default HDS Link.	`Element`	`Link`
`external`	Boolean indicating whether the link will lead user to external domain.	`boolean`	`false`
`href`	Hypertext Reference of the link.	`string`	-
`icon`	Icon which will display on the left side of the label.	`ReactNode`	-
`label`	Label for the link.	`string`	-
`openInNewTab`	Boolean indicating whether the link will open in new tab.	`boolean`	`false`
`openInNewTabAriaLabel`	Aria-label for opening link in a new tab.	`string`	-
`openInExternalDomainAriaLabel`	Aria-label for opening link in an external domain.	`string`	-

This component also accepts all nativea element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

**Table 4**: Footer.NavigationGroup properties
Property	Description	Values	Default value
`className`	Additional classNames for the element.	`string`	-
`id`	ID for the element.	`string`	-
`headingLink`	Footer.GroupHeading component to display at the top of the group. On smaller screens only this will be displayed.	`Footer.GroupHeading`	-

This component also accepts all nativediv element props.

**Table 5**: Footer.GroupHeading properties
Property	Description	Values	Default value
`as`	Element or component to use instead of the default native link or `<span>` when `href` is omitted.	`Element`	`a` `span`
`href`	Hypertext Reference of the link. If omitted, heading will be a `<span>`element instead of `<a>`.	`string`	-
`id`	ID for the element.	`string`	-
`label`	Label for the heading.	`string`	-

This component also accepts all nativea element props.

**Table 6**: Footer.Utilities properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the utilities.	`string`	-
`soMeLinks`	Array of Footer.NavigationLinks to display in the social media section.	`[Footer.NavigationLink]`	-
`soMeSectionProps`	Additional props for the native `<section>` element which hold the `soMeLinks`.	`Object`	-
`role`	ARIA role to describe the contents.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

**Table 7**: Footer.UtilityGroup properties
Property	Description	Values	Default value
`className`	Additional classNames for the element.	`string`	-
`id`	ID for the element.	`string`	-
`headingLink`	Footer.GroupHeading component to display at the top of the group.	`Footer.GroupHeading`	-

This component also accepts all nativediv element props.

**Table 8**: Footer.Custom properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the custom area.	`string`	-
`className`	Additional classNames for the element.	`string`	-
`id`	ID for the element.	`string`	-
`role`	ARIA role to describe the contents.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

**Table 9**: Footer.Base properties
Property	Description	Values	Default value
`ariaLabel`	Aria-label for describing the element.	`string`	-
`backToTopLabel`	Label for the "Back to top" button.	`string` `ReactNode`	-
`copyrightHolder`	Text to be displayed next to the copyright symbol.	`string` `ReactNode`	-
`copyrightText`	Text to be displayed after the copyright holder text.	`string` `ReactNode`	-
`logoHref`	Link for the logo.	`string`	-
`logo`	Logo component to use.	`Logo`	-
`onBackToTopClick`	Callback fired when the "Back to top" button is clicked.	`function`	-
`onLogoClick`	Callback fired when the logo is clicked.	`function`	-
`role`	ARIA role to describe the contents.	`string`	-
`showBackToTopButton`	Boolean for whether the "Back to top" button should be shown.	`boolean`	-
`year`	The year for copyright text. This can be useful in automated tests.	`string`	-

This component also accepts all nativediv element props.

Following component properties override their native counterparts:

ariaLabel overrides the aria-label

Footer

Code

Code examples

Default

Color variations

Color variations

Navigation section variations

Utility section variations

Custom Link

Packages

Properties