Footer

BETA

Component demo

Interactive example

Web component

React

<ic-footer
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
>
<ic-footer-linkslot="link"href="#">
    Accessibility
</ic-footer-link>
<ic-footer-linkslot="link"href="#">
    Styles
</ic-footer-link>
<ic-footer-linkslot="link"href="#">
    Components
</ic-footer-link>
<ic-footer-linkslot="link"href="#">
    Patterns
</ic-footer-link>
</ic-footer>

<IcFooter
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
>
<IcFooterLinkslot="link"href="#">
    Accessibility
</IcFooterLink>
<IcFooterLinkslot="link"href="#">
    Styles
</IcFooterLink>
<IcFooterLinkslot="link"href="#">
    Components
</IcFooterLink>
<IcFooterLinkslot="link"href="#">
    Patterns
</IcFooterLink>
</IcFooter>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property aligned Attribute aligned	The alignment of the section containers used within the footer. type: IcAlignment - "center" \| "full-width" \| "left"	"left"
Property breakpoint Attribute breakpoint	The screen size breakpoint at which to switch to the small layout. type: IcFooterBreakpoints - "extra large" \| "extra small" \| "large" \| "medium" \| "small"	"medium"
Property caption Attribute caption	The caption displayed at the bottom of the footer. type: string
Property copyright Attribute copyright	If`true` , the footer will display the crown copyright at the bottom. type: boolean	true
Property description Attribute description	The description displayed at the top of the footer. type: string
Property groupLinks Attribute group-links	If`true` , the footer will be set up to handle link groups instead of standalone links. type: boolean	false

Property

aligned

Attribute

aligned

The alignment of the section containers used within the footer.

type: IcAlignment - "center" | "full-width" | "left"

Default: "left"

Property

breakpoint

Attribute

breakpoint

The screen size breakpoint at which to switch to the small layout.

type: IcFooterBreakpoints - "extra large" | "extra small" | "large" | "medium" | "small"

Default: "medium"

Property

caption

Attribute

caption

The caption displayed at the bottom of the footer.

type: string

Property

Attribute

Iftrue , the footer will display the crown copyright at the bottom.

type: boolean

Default: true

Property

description

Attribute

description

The description displayed at the top of the footer.

type: string

Property

groupLinks

Attribute

group-links

Iftrue , the footer will be set up to handle link groups instead of standalone links.

type: boolean

Default: false

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Name	Description
Slot caption	Content will be rendered above Crown Copyright.
Slot description	Content will be rendered at the top of the footer.
Slot link	Content will be rendered between description and logos.
Slot logo	Content will be rendered underneath footer links.

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property download Attribute download	If`true` , the user can save the linked URL instead of navigating to it. type: string \| boolean - boolean \| string	false
Property href Attribute href	The URL that the link points to. type: string	null
Property hreflang Attribute hreflang	The human language of the linked URL. type: string
Property referrerpolicy Attribute referrerpolicy	How much of the referrer to send when following the link. type: ReferrerPolicy - "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string
Property target Attribute target	The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). type: string

Property

download

Attribute

download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string

Default: false

Property

href

Attribute

href

The URL that the link points to.

type: string

Default: null

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string

Property

referrerpolicy

Attribute

referrerpolicy

How much of the referrer to send when following the link.

Property

rel

Attribute

rel

The relationship of the linked URL as space-separated link types.

type: string

Property

target

Attribute

target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property groupTitle Attribute group-title	The title of the link group to be displayed. Required type: string

Property

groupTitle

Attribute

group-title

The title of the link group to be displayed.

Required

type: string

Variants

Grouped links

Interactive example

Web component

React

<ic-footer
group-links="true"
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
>
<ic-footer-link-groupslot="link"group-title="Grouped heading">
<ic-footer-linkhref="#">Accessibility</ic-footer-link>
<ic-footer-linkhref="#">Styles</ic-footer-link>
<ic-footer-linkhref="#">Components</ic-footer-link>
<ic-footer-linkhref="#">Patterns</ic-footer-link>
</ic-footer-link-group>
<ic-footer-link-groupslot="link"group-title="Grouped heading">
<ic-footer-linkhref="#">Accessibility</ic-footer-link>
<ic-footer-linkhref="#">Styles</ic-footer-link>
<ic-footer-linkhref="#">Components</ic-footer-link>
<ic-footer-linkhref="#">Patterns</ic-footer-link>
</ic-footer-link-group>
<ic-footer-link-groupslot="link"group-title="Grouped heading">
<ic-footer-linkhref="#">Accessibility</ic-footer-link>
<ic-footer-linkhref="#">Styles</ic-footer-link>
<ic-footer-linkhref="#">Components</ic-footer-link>
<ic-footer-linkhref="#">Patterns</ic-footer-link>
</ic-footer-link-group>
</ic-footer>

<IcFooter
groupLinks
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
>
<IcFooterLinkGroupslot="link"groupTitle="Grouped heading">
<IcFooterLinkhref="#">Accessibility</IcFooterLink>
<IcFooterLinkhref="#">Styles</IcFooterLink>
<IcFooterLinkhref="#">Components</IcFooterLink>
<IcFooterLinkhref="#">Patterns</IcFooterLink>
</IcFooterLinkGroup>
<IcFooterLinkGroupslot="link"groupTitle="Grouped heading">
<IcFooterLinkhref="#">Accessibility</IcFooterLink>
<IcFooterLinkhref="#">Styles</IcFooterLink>
<IcFooterLinkhref="#">Components</IcFooterLink>
<IcFooterLinkhref="#">Patterns</IcFooterLink>
</IcFooterLinkGroup>
<IcFooterLinkGroupslot="link"groupTitle="Grouped heading">
<IcFooterLinkhref="#">Accessibility</IcFooterLink>
<IcFooterLinkhref="#">Styles</IcFooterLink>
<IcFooterLinkhref="#">Components</IcFooterLink>
<IcFooterLinkhref="#">Patterns</IcFooterLink>
</IcFooterLinkGroup>
</IcFooter>

Logo links

Interactive example

Web component

React

<ic-footer description="  description="TheUKIntelligenceCommunityDesignSystem(ICDS)is a joint project by MI6,GCHQ,MI5, and partners.">
<ic-footer-linkslot="link"href="#">Accessibility</ic-footer-link>
<ic-footer-linkslot="link"href="#">Styles</ic-footer-link>
<ic-footer-linkslot="link"href="#">Components</ic-footer-link>
<ic-footer-linkslot="link"href="#">Patterns</ic-footer-link>
<divslot="logo">
<ic-footer-linkhref="#">
<svgxmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 0 24 24"
width="48"
fill="#FFFFFF"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</svg>
</ic-footer-link>
<ic-footer-linkhref="#">
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 0 24 24"
width="48"
fill="#FFFFFF"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</svg>
</ic-footer-link>
</div>
</ic-footer>

<IcFooterdescription="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners.">
<IcFooterLinkslot="link"href="#">Accessibility</IcFooterLink>
<IcFooterLinkslot="link"href="#">Styles</IcFooterLink>
<IcFooterLinkslot="link"href="#">Components</IcFooterLink>
<IcFooterLinkslot="link"href="#">Patterns</IcFooterLink>
<divslot="logo">
<IcFooterLinkhref="#">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 0 24 24"
width="48"
fill="#FFFFFF"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</SlottedSVG>
</IcFooterLink>
<IcFooterLinkhref="#">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 0 24 24"
width="48"
fill="#FFFFFF"
>
<path
d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
fill="currentColor"
/>
</SlottedSVG>
</IcFooterLink>
</div>
</IcFooter>

With React Router

Interactive example

React

<MemoryRouterinitialEntries={["/"]}>
<Routes>
<Routepath="/"element={<IcTypography>This is the accessibility page</IcTypography>}/>
<Routepath="/Styles"element={<IcTypography>This page is about styles</IcTypography>}/>
</Routes>
<IcFooterdescription="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
>
<IcFooterLinkslot="link">
<NavLinkto="#">Accessibility</NavLink>
</IcFooterLink>
<IcFooterLinkslot="link">
<NavLinkto="/Styles">Styles</NavLink>
</IcFooterLink>
<divslot="logo"className={classes.logoContainer}>
      Logo
</div>
</IcFooter>
</MemoryRouter>

Layout example

Adding aminHeight of100vh ensures the footer appears below the page fold.

Interactive example

View example in new window

Web component

React

<divclass='footer-layout-root'>
  <div class="div-container>  
<ic-top-navigationappTitle="ICDS"status="alpha"version="v0.0.7">
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</svg>
</ic-top-navigation>
<main>
<ic-section-container>
<ic-typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          vestibulum venenatis facilisis. Nam tortor felis, auctor vel
          ante quis, tempor interdum libero. In dictum sodales velit, eu
          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id
          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,
          lectus magna interdum risus, vel fringilla libero ex eu dui.
          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit
          nisl, vitae congue ligula rutrum id.
</ic-typography>
</ic-section-container>
</main>
</div>
<ic-footer
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.">
<ic-footer-linkslot="link"href="#">Accessibility</ic-footer-link>
<ic-footer-linkslot="link"href="#">Styles</ic-footer-link>
<ic-footer-linkslot="link"href="#">Components</ic-footer-link>
<ic-footer-linkslot="link"href="#">Patterns</ic-footer-link>
</ic-footer>
</div>

<divclassName='footer-layout-root'>
<divclassName={classes.divContainer}>
<IcTopNavigationappTitle="ICDS"status="alpha"version="v0.0.7">
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
</IcTopNavigation>
<main>
<IcSectionContainer>
<IcTypography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
          vestibulum venenatis facilisis. Nam tortor felis, auctor vel
          ante quis, tempor interdum libero. In dictum sodales velit, eu
          egestas arcu dignissim ac. Aliquam facilisis eros dolor, id
          laoreet orci sagittis ut. Sed tempus, lacus in pretium molestie,
          lectus magna interdum risus, vel fringilla libero ex eu dui.
          Suspendisse ullamcorper vehicula lacinia. Phasellus congue velit
          nisl, vitae congue ligula rutrum id.
</IcTypography>
</IcSectionContainer>
</main>
</div>
<IcFooter
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, GCHQ, MI5, and partners."
caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence.">
<IcFooterLinkslot="link"href="#">Accessibility</IcFooterLink>
<IcFooterLinkslot="link"href="#">Styles</IcFooterLink>
<IcFooterLinkslot="link"href="#">Components</IcFooterLink>
<IcFooterLinkslot="link"href="#">Patterns</IcFooterLink>
</IcFooter>
</div>

Last reviewed 31 May 2024 .

Intelligence Community Design System

Footer

Footer

Component demo

Interactive example

Footer details

Props

Slots

Footer link details

Props

Footer link group details

Props

Variants

Grouped links

Interactive example

Logo links

Interactive example

With React Router

Interactive example

Layout example

Interactive example