Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Footer

Guidance Code Accessibility

Component demo

Interactive example

Accessibility Styles Components Patterns
Web component React
StackBlitz
Show full code 
<ic-footer
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, MI5, GCHQ, and HMGCC, our national security partner, along with other collaborators."
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>

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" | undefined
"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" | undefined
"medium"
Property caption
Attribute caption

The caption displayed at the bottom of the footer.

type: string - string | undefined
Property copyright
Attribute copyright

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

type: boolean - boolean | undefined
true
Property description
Attribute description

The description displayed at the top of the footer.

type: string - string | undefined
Property groupLinks
Attribute group-links

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

type: boolean - boolean | undefined
false
Property aligned
Attribute aligned

The alignment of the section containers used within the footer.

type: IcAlignment - "center" | "full-width" | "left" | undefined
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" | undefined
Default: "medium"
Property caption
Attribute caption

The caption displayed at the bottom of the footer.

type: string - string | undefined
Property copyright
Attribute copyright

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

type: boolean - boolean | undefined
Default: true
Property description
Attribute description

The description displayed at the top of the footer.

type: string - string | undefined
Property groupLinks
Attribute group-links

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

type: boolean - boolean | undefined
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.

Read more about slots .


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.
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

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

type: string | boolean - boolean | string | undefined
false
Property href
Attribute href

The URL that the link points to.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined
Property download
Attribute download

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

type: string | boolean - boolean | string | undefined
Default: false
Property href
Attribute href

The URL that the link points to.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
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" | undefined
Property rel
Attribute rel

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

type: string - string | undefined
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 - string | undefined

Props

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

Name Description Default
Property label
Attribute label

The title of the link group to be displayed.

Required type: string
Property label
Attribute label

The title of the link group to be displayed.

Required type: string

Variants

Interactive example

Accessibility Styles Components Patterns Accessibility Styles Components Patterns Accessibility Styles Components Patterns
Web component React
StackBlitz
Show full code 
<ic-footer
group-links="true"
description="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, MI5, GCHQ, and HMGCC, our national security partner, along with other collaborators."
>
<ic-footer-link-groupslot="link"label="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"label="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"label="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>

Interactive example

Accessibility Styles Components Patterns
Web component React
StackBlitz
Show full code 
<ic-footerdescription="The UK Intelligence Community Design System (ICDS) is a joint project by MI6, MI5, GCHQ, and HMGCC, our national security partner, along with other collaborators.">
<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"role="list">
<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>

With React Router

Interactive example

Accessibility Styles
Logo
React
StackBlitz
Show full code 
<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, MI5, GCHQ, and HMGCC, our national security partner, along with other collaborators."
>
<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
StackBlitz
Show full code 
<divclass="footer-layout-root">
<ic-skip-linktarget="main"></ic-skip-link>
<divclass="div-container">
<ic-top-navigationapp-title="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>
<mainid="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, MI5, GCHQ, and HMGCC, our national security partner, along with other collaborators."
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>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions