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
<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 >
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" : "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"
}
}
}