The HTML for the demonstration above is rendered using context passed to the component's Thymeleaf template fragment. Learn how to include component templates for Thymeleaf and Ruby in the source and usage section .
Copy the following block to clipboard
<footer class ="usa-footer usa-footer--slim" >
<div class ="grid-container usa-footer__return-to-top" >
<a href ="#" > Return to top</a >
</div >
<div class ="usa-footer__primary-section" >
<div class ="usa-footer__primary-container grid-row" >
<div >
<nav class ="usa-footer__nav padding-0" aria-label ="Footer navigation" >
<ul class ="grid-row grid-gap" >
<li class ="tablet:grid-col-auto margin-0 usa-footer__primary-content" >
<a class ="usa-footer__primary-link" href ="#" > Site map</a >
</li >
<li class ="tablet:grid-col-auto margin-0 usa-footer__primary-content" >
<a class ="usa-footer__primary-link usa-link--external" rel ="noopener nofollow" target ="_blank" href ="https://en.wikipedia.org/wiki/Privacy_policy" > Privacy policy</a >
</li >
<li class ="tablet:grid-col-auto margin-0 usa-footer__primary-content" >
<a class ="usa-footer__primary-link usa-link--external" rel ="noopener nofollow" target ="_blank" href ="https://en.wikipedia.org/wiki/Terms_of_service" > Terms of service</a >
</li >
</ul >
</nav >
</div >
</div >
</div >
<div class ="usa-footer__secondary-section" >
<div class ="grid-container" >
<div class ="usa-footer__logo" >
<a href ="https://codeforamerica.github.io/uswds/" >
<svg xmlns ="http://www.w3.org/2000/svg" class ="display-block tablet:display-none" role ="img" aria-hidden ="true" style ="width: 101px; height: 82px" >
<use href ="#logo-cfa-stacked" >
</use >
</svg >
<svg xmlns ="http://www.w3.org/2000/svg" class ="display-none tablet:display-block" role ="img" aria-hidden ="true" style ="width: 161px; height: 49px" >
<use href ="#logo-cfa-long" >
</use >
</svg >
<span class ="usa-sr-only" > Code for America</span >
</a >
</div >
</div >
</div >
<div >
<div class ="usa-identifier cfa-font-smooth" >
<section class ="usa-identifier__section usa-identifier__section--masthead" aria-label ="Agency identifier" >
<div class ="usa-identifier__container" >
<div class ="usa-identifier__identity" >
<p class ="usa-identifier__identity-domain" > domain.gov</p >
<p class ="usa-identifier__identity-disclaimer" > This service was built by Code for America in partnership with Domain.gov on behalf of the people of the United States of America.</p >
</div >
</div >
</section >
<nav class ="usa-identifier__section usa-identifier__section--required-links" aria-label ="Important links" >
<div class ="usa-identifier__container" >
<ul class ="add-list-reset" >
<li class ="usa-identifier__required-links-item" >
<a class ="usa-identifier__required-link usa-link usa-link--external usa-link--external" rel ="noopener nofollow" target ="_blank" href ="https://codeforamerica.org" > About Code for America</a >
</li >
<li class ="usa-identifier__required-links-item" >
<a class ="usa-identifier__required-link usa-link usa-link--external usa-link--external" rel ="noopener nofollow" target ="_blank" href ="https://codeforamerica.org/about-us/diversity-equity-inclusion" > Diversity, Equity, & Inclusion</a >
</li >
</ul >
</div >
</nav >
<section class ="usa-identifier__section usa-identifier__section--usagov" aria-label ="Domain.gov government information and services" >
<div class ="usa-identifier__container" >
<div class ="usa-identifier__usagov-description" > Looking for government information and services?</div >
<a class ="usa-link usa-link--external" rel ="noopener nofollow" target ="_blank" href ="https://get.gov" > Visit domain.gov</a >
</div >
</section >
</div >
</div >
</footer >
Context is the information necessary to configure and render a component template to HTML. It may include plain text strings, HTML, class names, IDs or other HTML attribute values. The context here is defined as JSON but the root attributes are translated to different variable syntaxes for Thymeleaf and Ruby templates. Learn how to pass these variables to each component template in the source and usage section .
Copy the following block to clipboard
{
"modifier" : "" ,
"returnToTop" : "#" ,
"navigation" : {
"ariaLabel" : "Footer navigation" ,
"items" : [
{
"label" : "Site map" ,
"href" : "#"
} ,
{
"label" : "Privacy policy" ,
"href" : "https://en.wikipedia.org/wiki/Privacy_policy" ,
"target" : "_blank" ,
"rel" : "noopener nofollow" ,
"modifier" : "usa-link--external"
} ,
{
"label" : "Terms of service" ,
"href" : "https://en.wikipedia.org/wiki/Terms_of_service" ,
"target" : "_blank" ,
"rel" : "noopener nofollow" ,
"modifier" : "usa-link--external"
}
]
} ,
"home" : {
"href" : "https://codeforamerica.github.io/uswds/"
} ,
"logo" : {
"alt" : {
"modifier" : "usa-sr-only" ,
"text" : "Code for America"
} ,
"default" : {
"href" : "#logo-cfa-stacked" ,
"style" : "width: 101px; height: 82px"
} ,
"tablet" : {
"href" : "#logo-cfa-long" ,
"style" : "width: 161px; height: 49px"
}
} ,
"identifier" : {
"modifier" : "cfa-font-smooth" ,
"identity" : {
"ariaLabel" : "Agency identifier" ,
"domain" : "domain.gov" ,
"disclaimer" : "This service was built by Code for America in partnership with Domain.gov on behalf of the people of the United States of America."
} ,
"requiredLinks" : {
"ariaLabel" : "Important links" ,
"items" : [
{
"label" : "About Code for America" ,
"href" : "https://codeforamerica.org" ,
"target" : "_blank" ,
"rel" : "noopener nofollow" ,
"modifier" : "usa-link--external"
} ,
{
"label" : "Diversity, Equity, & Inclusion" ,
"href" : "https://codeforamerica.org/about-us/diversity-equity-inclusion" ,
"target" : "_blank" ,
"rel" : "noopener nofollow" ,
"modifier" : "usa-link--external"
}
]
} ,
"governmentSection" : {
"ariaLabel" : "Domain.gov government information and services" ,
"description" : "Looking for government information and services?" ,
"link" : {
"label" : "Visit domain.gov" ,
"href" : "https://get.gov" ,
"target" : "_blank" ,
"rel" : "noopener nofollow" ,
"modifier" : "usa-link--external"
}
}
}
}