Footer
Footer
Component demo
Interactive example
<ic-footerdescription="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>
Footer details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The alignment of the section containers used within the footer. |
|
|
The screen size breakpoint at which to switch to the small layout. |
|
|
The caption displayed at the bottom of the footer. |
|
|
If |
|
|
The description displayed at the top of the footer. |
|
|
If |
|
The alignment of the section containers used within the footer. |
The screen size breakpoint at which to switch to the small layout. |
The caption displayed at the bottom of the footer. |
If |
The description displayed at the top of the footer. |
If |
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.
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Footer link details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
If |
|
|
The URL that the link points to. |
|
|
The human language of the linked URL. |
|
|
How much of the referrer to send when following the link. |
|
|
The relationship of the linked URL as space-separated link types. |
|
|
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
|
If |
The URL that the link points to. |
The human language of the linked URL. |
How much of the referrer to send when following the link. |
The relationship of the linked URL as space-separated link types. |
The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe). |
Footer link group details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The title of the link group to be displayed. |
|
The title of the link group to be displayed. |
Variants
Grouped links
Interactive example
<ic-footergroup-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"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>
Logo links
Interactive example
<ic-footerdescription="The UK Intelligence Community Design System (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"role="list"><ic-footer-linkhref="#"><svgxmlns="http://www.w3.org/2000/svg"height="48"viewBox="0 0 24 24"width="48"fill="#FFFFFF"><pathd="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="#"><svgxmlns="http://www.w3.org/2000/svg"height="48"viewBox="0 0 24 24"width="48"fill="#FFFFFF"><pathd="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>