Skip Navigation
Within Foundations

Interactive Elements

On This Page:

Related Information

Buttons/Links

To learn more about Census.gov button color design, please visit the Button Color Usage page.

General
Desktop/Tablet - Primary

 

Captions
Focus
Hover
 
 
Mobile

 

Captions
Focus
Hover
 
 
Desktop/Tablet - Secondary

 

Captions
Focus
Hover
 
 
Mobile

 

Captions
Focus
Hover

Call To Action
Desktop/Tablet/Mobile

Call to Action 

Call to Action 

Call to Action 

 

Captions
Focus
Hover

 
Links in Body Text

links

links

links

 

Captions
Focus
Hover
 
Example

The U.S. Census Bureau conducts more than 130 surveys and programs each year. A survey is a method of collecting and analyzing social, economic, and geographic data. It provides information about the conditions of the United States, states, and counties. Surveys include our three censuses that occur….lorem ipsum. A program is lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at volutpat mauris, venenatis venenatis turpis. Aliquam porttitor vestibulum libero eu auctor.

Pagination

Default Page Selection

Focus

<ul class="uscb-layout-row uscb-layout-align-center-center">
<li>
<a href="" class="uscb-text-img-button">
<svg class="uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
<svg class="uscb-pagination-end uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li>
<a href="" class="uscb-text-img-button">
<svg class="uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li><a href="" class="uscb-pagination-item">8</a></li>
<li><a href="" class="uscb-pagination-item">9</a></li>
<li><a href="" class="uscb-pagination-item uscb-pagination-active">10</a></li>
<li><a href="" class="uscb-pagination-item">11</a></li>
<li><a href="" class="uscb-pagination-item">12</a></li>
<li>
<a class="uscb-text-img-button">
<svg class="uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li>
<a class="uscb-text-img-button uscb-layout-row">
<svg class="uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
<svg class="uscb-pagination-end uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
</ul>

Top of Section

Tabs

Year Selection

Focus

<ul role="menu" class="uscb-tabs uscb-layout-row uscb-layout-align-space-between">
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2017 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2016 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2015 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2014 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2013 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2012 </a></li>
<li role="none" class="uscb-tab uscb-layout-row uscb-layout-align-center-center"><a role="menuitem" class="uscb-tabs-link"> 2011 </a></li>
<li role="none" class="uscb-tab-menu uscb-layout-column uscb-layout-align-center-center uscb-position-relative">
<a role="menuitem" class="uscb-primary-link uscb-layout-row uscb-layout-align-center-center"> more <span class="uscb-icon-button uscb-layout-row uscb-layout-align-center-center uscb-icon-button uscb-layout-row uscb-layout-align-center-center"><img src={downChevron} alt="" /></span> </a>
<ul role="menu" class="uscb-tab-dropdown-content" >
<li role="none"><a role="menuitem" href="#">2010</a></li>
<li role="none"><a role="menuitem" href="#">2009</a></li>
<li role="none"><a role="menuitem" href="#">2008</a></li>
<li role="none"><a role="menuitem" href="#">2008</a></li>
<li role="none"><a role="menuitem" href="#">2008</a></li>
</ul>
</li>
</ul>

Top of Section

$(".uscb-tab").each(function (index, element) {
$(element).click(function () {
$(this).siblings().removeClass("uscb-tab-active")
$(this).toggleClass("uscb-tab-active");
});
});
$(".uscb-tab-menu").click(function(){
$('.uscb-tab-dropdown-content').toggleClass("uscb-tab-show");
});

Top of Section

Breadcrumbs

<ul class="uscb-layout-row uscb-layout-align-center-center">
<li>
<a href="" class="uscb-text-img-button">
<svg class="uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
<svg class="uscb-pagination-end uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li>
<a href="" class="uscb-text-img-button">
<svg class="uscb-large-icon" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path fill="none" d="M40,44L26,32l14-12" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li><a href="" class="uscb-pagination-item">8</a></li>
<li><a href="" class="uscb-pagination-item">9</a></li>
<li><a href="" class="uscb-pagination-item uscb-pagination-active">10</a></li>
<li><a href="" class="uscb-pagination-item">11</a></li>
<li><a href="" class="uscb-pagination-item">12</a></li>
<li>
<a class="uscb-text-img-button">
<svg class="uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
<li>
<a class="uscb-text-img-button uscb-layout-row">
<svg class="uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
<svg class="uscb-pagination-end uscb-large-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img">
<path data-name="layer1" fill="none" stroke="#0095a8" stroke-miterlimit="10" stroke-width="2" d="M26 20.006L40 32 26 44.006" stroke-linejoin="miter" stroke-linecap="round"></path>
</svg>
</a>
</li>
</ul>

Top of Section

More/View All

More 

View All 

Default

More 

View All 

Focus

More 

View All 

Hover

Previous/Next

Previous/Next
 Previous
Next
Default

 
 Previous
Next
Focus

 
 Previous
Next
Hover

Secondary Navigation

Within About

 

<section>
<div class="uscb-color-primary uscb-medium uscb-text-transform-uppercase uscb-margin-B-5 visible-lg uscb-print-hide">
<a href="#" class="uscb-color-primary uscb-medium uscb-underline-hover">
Within About
</a>
</div>
<ul class="uscb-filter-list">
<li class="uscb-filter-parent">
<a href="" class="uscb-navigation-links">How Do I Respond to the Survey?</a>
</li>
<li class="uscb-filter-parent">
<a href="" class="uscb-navigation-links">Is the ACS Legitimate?</a>
</li>
<li class="uscb-filter-parent">
<a href="" class="uscb-navigation-links">Why Was I Selected?</a>
</li>
<li class="uscb-filter-parent">
<a href="" class="uscb-navigation-links">Why We Ask Each Question</a>
</li>
</ul>
</section>

Top of Section
✕
Is this page helpful?
Thumbs Up Image Yes Thumbs Down Image No
✕
NO THANKS
255 characters maximum 255 characters maximum reached
✕
Thank you for your feedback.
Comments or suggestions?

Top

Back to Header