The Footer component is a collection of elements, which are determined to be secondary to the content of the page. The Footer component is typically used on every page of an application. The elements in the Footer are grouped by type or relevance.
The Base Footer is intended to be used at the bottom of every page. The base Footer includes legal links, legal icons or small awards, and a paragraph of legal or other type of copy.
The Base Footer component in spark-core-angular consists of these Angular components and directives:
The component expects you to put content inside that you want to show up as the main paragraph of legal text.
The component also expects two arrays as inputs. The first array should be a list of navigation links and the second array should be a list of badges to display.
<div class="sprk-o-CenteredColumn">
<footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
<p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</p>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
</div>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 3
</a>
</li>
</ul>
</footer>
</div>
<sprk-footer [navLinks]="navLinks" [badges]="badges">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</sprk-footer>
const badges = [ { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/alerts', analytics: 'Test 1', }, { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/icons', analytics: 'Test 2', }, { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/links', analytics: 'Test 3', }, ]; const navLinks = [ { text: 'Link 1', href: '/alerts', analytics: 'Link to Item 1', }, { text: 'Link 2', href: '/icons', }, { text: 'Link 3', href: '/links', }, ];See below for available customization options:
| Input | Type | Description |
|---|---|---|
| splitAt | string | Can be 'tiny', 'small', 'medium', 'large', or 'huge'. Will cause the footer items to switch from a stacked layout to a side by side layout at the chosen 'tiny', 'small', 'medium', 'large', or 'huge' breakpoint. |
| badges | array<object> | This supplies the data for the badges in the footer. Each badge object in the array should have keys of alt (the image alt text), src (the image source), href, and analytics (the value for data-analytics). Each key should have its value of type string. |
| navLinks | array<object> | This supplies the data for the navigation links in the footer. Each link object in the array should have keys of text (the display text), href, and analytics (the value for data-analytics). Each key should have its value of type string. |
| additionalClassesBadges | string | Allows a string of classes to add, in addition to the spark classes. Intended for overrides. |
| additionalClasses | string | Allows a string of classes to add, in addition to the spark classes. Intended for overrides. |
The Base Footer is intended to be used at the bottom of every page. The Base Footer includes legal links, legal icons or small awards, and a paragraph of legal or other type of copy. This version includes the Awards Pattern.
The Base Footer with Awards component is achieved by placing the sprk-award component inside of the sprk-footer component. The sprk-award component needs the additional data attribute of 'optional-slot'. This indicates to the footer component that we would like the Award component to be rendered inside the footer. For information regarding configuration of the sprk-award component, please see the Awards documentation. This component also has the option to include a disclaimer for the Awards.
<div class="sprk-o-CenteredColumn">
<footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Stack__item--equal@xl">
<div class="sprk-o-Stack__item" data-sprk-toggle="container">
<a class="sprk-b-TypeBodyThree sprk-b-Link sprk-b-Link--standalone" data-sprk-toggle="trigger" href="#">
<svg class="sprk-c-Icon sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 448 512">
<use xlink:href="#chevron-down"></use>
</svg>
My Disclaimer
</a>
<p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-HideWhenJs" data-sprk-toggle="content">
This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
</p>
</div>
<p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</p>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
</div>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 3
</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@xl sprk-o-Stack sprk-o-Stack--medium">
<h2 class="sprk-o-Stack__item sprk-b-TypeDisplaySix sprk-u-TextAlign--center">
Award Stacked Pattern Inside Footer
</h2>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
<a class="sprk-o-Stack__item sprk-o-Stack" href="#">
<img
class="sprk-o-Stack__item sprk-o-Stack__item--center drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
alt="Spark placeholder image"
src="../../assets/toolkit/images/spark-placeholder.jpg" />
</a>
<a class="sprk-o-Stack__item sprk-o-Stack" href="#">
<img
class="sprk-o-Stack__item sprk-o-Stack__item--center drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
alt="Spark placeholder image"
src="../../assets/toolkit/images/spark-placeholder.jpg" />
</a>
</div>
</div>
</div>
</footer>
</div>
<sprk-footer splitAt="huge" [navLinks]="navLinks" [badges]="badges" additionalClassesBadges="sprk-u-Width-25" additionalClassesAwardImgOne="sprk-u-Width-35" additionalClassesAwardImgTwo="sprk-u-Width-35" disclaimer="true" disclaimerCopy="this is some copy for the award disclaimer in the footer" disclaimerTitle="Footer Disclaimer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
<sprk-award optional-slot disclaimer="false" title="Spark Award Component" additionalClassesImgOne="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large" additionalClassesImgTwo="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large" imgOneSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgTwoSrc="https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgOneAlt="placeholder!" imgOneHref="https://www.sparkdesignsystem.com/" imgTwoHref="https://www.sparkdesignsystem.com/" imgTwoAlt="placeholder!" analyticsStringImgOne="Foo" analyticsStringImgTwo="Test">
</sprk-award>
</sprk-footer>See below for available customization options:
| Input | Type | Description |
|---|---|---|
| disclaimer | boolean | If set to true, the disclaimer will render. |
| disclaimerTitle | string | This is the text for main disclaimer link that is clickable. |
| disclaimerCopy | string | This is the body of text for the disclaimer copy. |
| analyticsStringDisclaimer | string | Allows a string of classes to add, in addition to the spark classes. Intended for overrides. |
The Base Footer can be used with all or some of the optional elements. The optional items are feedback links, social links and three columns of site links.
The Footer with Optional elements component in spark-core-angular consists of these Angular components and directives:
The component also expects three additional arrays as inputs. The first array should be a list of feedback links (feedbackLinks), the second array should be a list of columns and site links to display (siteLinkCols), and the third should be a list of social links (socialLinks).
<div class="sprk-o-CenteredColumn">
<footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@m">
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
One
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 1</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 2</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 3</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 4</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 5</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 6</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 7</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 8</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 9</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 10</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
Two
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 3
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 4
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 5
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 6
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 7
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 8
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 9
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 10
</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
Three
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 3
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 4
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 5
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 6
</a>
</li>
</ul>
</div>
</div>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#facebook" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#instagram" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#twitter" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#youtube" />
</svg>
</a>
</li>
</ul>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
<use xlink:href="#paper-plane" />
</svg>
Provide Feedback
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
<use xlink:href="#computer-screen" />
</svg>
Share Your Screen
</a>
</li>
</ul>
<p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</p>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
</div>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 3
</a>
</li>
</ul>
</footer>
</div>
<sprk-footer [navLinks]="navLinks" [siteLinkCols]="siteLinkCols" [socialLinks]="socialLinks" [feedbackLinks]="feedbackLinks" splitAt="huge" [badges]="badges" additionalClassesBadges="sprk-u-Width-25">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</sprk-footer>
const socialLinks = [ { href: 'https://www.sparkdesignsystem.com/', icon: 'facebook', analytics: 'Link', }, { href: 'https://www.sparkdesignsystem.com/', icon: 'instagram', analytics: 'Link', }, { href: 'https://www.sparkdesignsystem.com/', icon: 'twitter', analytics: 'Link', }, { href: 'https://www.sparkdesignsystem.com/', icon: 'youtube', analytics: 'Link', }, ]; const feedbackLinks = [ { href: 'https://www.sparkdesignsystem.com/', icon: 'paper-plane', text: 'Provide Feedback', analytics: 'Link to Item 1', }, { href: 'https://www.sparkdesignsystem.com/', icon: 'computer-screen', text: 'Share Your Screen', analytics: 'Link to Item 2', }, ]; const siteLinkCols = [ { heading: 'One', siteLinks : [ { text: 'Link 1', href: '/masthead', linkAnalytics: 'Link to Item 1', }, { text: 'Link 2', href: '/alerts', linkAnalytics: 'Link to Item 2', }, { text: 'Link 3', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 4', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 5', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 6', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 7', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 8', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 9', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 10', href: '/award', linkAnalytics: 'Link to Item 3', }, ], }, { heading: 'Two', siteLinks : [ { text: 'Link 1', href: '/masthead', linkAnalytics: 'Link to Item 1', }, { text: 'Link 2', href: '/alerts', linkAnalytics: 'Link to Item 2', }, { text: 'Link 3', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 4', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 5', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 6', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 7', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 8', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 9', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 10', href: '/award', linkAnalytics: 'Link to Item 3', }, ], }, { heading: 'Three', siteLinks : [ { text: 'Link 1', href: '/alerts', linkAnalytics: 'Link to Item 1', }, { text: 'Link 2', href: '/alerts', linkAnalytics: 'Link to Item 2', }, { text: 'Link 3', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 4', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 5', href: '/award', linkAnalytics: 'Link to Item 3', }, { text: 'Link 6', href: '/award', linkAnalytics: 'Link to Item 3', }, ], }, ]; const badges = [ { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/alerts', analytics: 'Test 1', }, { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/icons', analytics: 'Test 2', }, { alt: 'Placeholder Alt Text.', src: 'https://staging.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg', href: '/links', analytics: 'Test 3', }, ]; const navLinks = [ { text: 'Link 1', href: '/alerts', analytics: 'Link to Item 1', }, { text: 'Link 2', href: '/icons', }, { text: 'Link 3', href: '/links', }, ];See below for available customization options:
| Input | Type | Description |
|---|---|---|
| socialLinks | array<object> | This supplies the data for the social icon links in the footer. Each link object in the array should have keys of icon (the desired icon name), href, and analytics (the value for data-analytics). Each key should have its value of type string. |
| feedbackLinks | array<object> | This supplies the data for the feedback links in the footer. Each link object in the array should have keys of icon (the desired icon name), text (the link text), href, and analytics (the value for data-analytics). Each key should have its value of type string. |
| siteLinkCols | array<object> | This supplies the data for the columns of links in the footer. Each column object in the array should have keys of heading (the heading of the column) and a nested array of the site links (siteLinks) to be in that column. The site link should include keys of text (the text for the link), href, and linkAnalytics (the value for the data-analytics). |
The Base footer with the optional elements can also include the Award pattern.
The Footer with Optional elements and the Awards component uses everything in the Optional variant in addition to the Award component.
<div class="sprk-o-CenteredColumn">
<footer class="sprk-o-Box sprk-o-Stack sprk-o-Stack--large" role="contentinfo">
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@m">
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
One
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 1</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 2</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 3</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 4</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 5</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 6</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 7</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 8</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 9</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">Link 10</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
Two
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 3
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 4
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 5
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 6
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 7
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 8
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 9
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 10
</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@m">
<h2 class="sprk-b-TypeDisplaySix sprk-u-mbs">
Three
</h2>
<ul class="sprk-o-Stack sprk-o-Stack--small sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 3
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 4
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 5
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone" href="#">
Link 6
</a>
</li>
</ul>
</div>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--large sprk-o-Stack__item--equal@xl">
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#facebook" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#instagram" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#twitter" />
</svg>
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l" viewBox="0 0 448 512">
<use xlink:href="#youtube" />
</svg>
</a>
</li>
</ul>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
<use xlink:href="#paper-plane" />
</svg>
Provide Feedback
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--muted" href="#">
<svg class="sprk-c-Icon sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 512 512">
<use xlink:href="#computer-screen" />
</svg>
Share Your Screen
</a>
</li>
</ul>
<div class="sprk-o-Stack__item" data-sprk-toggle="container">
<a class="sprk-b-TypeBodyThree sprk-b-Link sprk-b-Link--standalone" data-sprk-toggle="trigger" href="#">
<svg class="sprk-c-Icon sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 448 512">
<use xlink:href="#chevron-down"></use>
</svg>
My Disclaimer
</a>
<p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-HideWhenJs" data-sprk-toggle="content">
This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
</p>
</div>
<p class="sprk-o-Stack__item sprk-b-TypeBodyTwo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
</p>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@s">
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
<div class="sprk-o-Stack__item">
<a href="#">
<div class="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--small"></div>
<span class="sprk-u-ScreenReaderText">Description of image</span>
</a>
</div>
</div>
<ul class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-o-Stack--split@xs sprk-b-List sprk-b-List--bare">
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 1
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 2
</a>
</li>
<li class="sprk-o-Stack__item">
<a class="sprk-b-Link sprk-b-Link--standalone sprk-b-Link--muted" href="#">
Link 3
</a>
</li>
</ul>
</div>
<div class="sprk-o-Stack__item sprk-o-Stack__item--equal@xl sprk-o-Stack sprk-o-Stack--medium">
<h2 class="sprk-o-Stack__item sprk-b-TypeDisplaySix sprk-u-TextAlign--center">
Award Stacked Pattern Inside Footer
</h2>
<div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium">
<a class="sprk-o-Stack__item sprk-o-Stack" href="#">
<img
class="sprk-o-Stack__item sprk-o-Stack__item--center drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
alt="Spark placeholder image"
src="../../assets/toolkit/images/spark-placeholder.jpg" />
</a>
<a class="sprk-o-Stack__item sprk-o-Stack" href="#">
<img
class="sprk-o-Stack__item sprk-o-Stack__item--center drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large"
alt="Spark placeholder image"
src="../../assets/toolkit/images/spark-placeholder.jpg" />
</a>
</div>
</div>
</div>
</footer>
</div>
<sprk-footer [siteLinkCols]="siteLinkCols" [navLinks]="navLinks" [socialLinks]="socialLinks" [feedbackLinks]="feedbackLinks" splitAt="huge" [badges]="badges" additionalClassesBadges="sprk-u-Width-25" additionalClassesAwardImgOne="sprk-u-Width-35" additionalClassesAwardImgTwo="sprk-u-Width-35" disclaimer="true" disclaimerCopy="This is an example of disclaimer content. The aria-expanded='true' attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content." disclaimerTitle="My Disclaimer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in laoreet ante, non feugiat neque. Suspendisse et ipsum leo. Quisque non consectetur justo.
<sprk-award optional-slot disclaimer="true" title="Award Stacked Pattern Inside Footer" additionalClassesImgOne="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large" additionalClassesImgTwo="drizzle-c-Logo-placeholder drizzle-c-Logo-placeholder--large" imgOneSrc="https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgTwoSrc="https://www.sparkdesignsystem.com/assets/toolkit/images/spark-placeholder.jpg" imgOneAlt="placeholder!" imgOneHref="https://www.sparkdesignsystem.com/" imgTwoHref="https://www.sparkdesignsystem.com/" imgTwoAlt="placeholder!" analyticsStringImgOne="Foo" analyticsStringImgTwo="Test">
</sprk-award>
</sprk-footer>