-
Notifications
You must be signed in to change notification settings - Fork 922
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'develop' of github.com:uswds/uswds into update-display-…
…font-var
- Loading branch information
Showing
2 changed files
with
115 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,84 +1,120 @@ | ||
<footer class="usa-footer usa-footer--big" role="contentinfo"> | ||
<div class="usa-grid usa-footer__return-to-top"> | ||
<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-grid"> | ||
<nav class="usa-footer__nav usa-width-two-thirds"> | ||
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content"> | ||
<li class="usa-footer__primary-link"> | ||
<h4>Topic</h4> | ||
</li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content"> | ||
<li class="usa-footer__primary-link"> | ||
<h4>Topic</h4> | ||
</li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content"> | ||
<li class="usa-footer__primary-link"> | ||
<h4>Topic</h4> | ||
</li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
<ul class="usa-list usa-list--unstyled usa-width-one-fourth usa-footer__primary-content"> | ||
<li class="usa-footer__primary-link"> | ||
<h4>Topic</h4> | ||
</li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
<li><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
</nav> | ||
|
||
<div class="usa-sign-up usa-width-one-third"> | ||
<h3 class="usa-sign-up__heading">Sign up</h3> | ||
|
||
<label class="" for="email" id="">Your email address</label> | ||
<input id="email" name="email" type="email"> | ||
|
||
<button type="submit">Sign up</button> | ||
<div class="grid-container"> | ||
<div class="grid-row grid-gap"> | ||
<div class="tablet:grid-col-8"> | ||
<nav class="usa-footer__nav"> | ||
<div class="grid-row grid-gap-4"> | ||
<div class="mobile-lg:grid-col-6 desktop:grid-col-3"> | ||
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible"> | ||
<h4 class="usa-footer__primary-link">Topic</h4> | ||
<ul class="usa-list usa-list--unstyled"> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's a bit longer than most of the others</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
</section> | ||
</div> | ||
<div class="mobile-lg:grid-col-6 desktop:grid-col-3"> | ||
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible"> | ||
<h4 class="usa-footer__primary-link">Topic</h4> | ||
<ul class="usa-list usa-list--unstyled"> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link that's pretty long</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
</section> | ||
</div> | ||
<div class="mobile-lg:grid-col-6 desktop:grid-col-3"> | ||
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible"> | ||
<h4 class="usa-footer__primary-link">Topic</h4> | ||
<ul class="usa-list usa-list--unstyled"> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
</section> | ||
</div> | ||
<div class="mobile-lg:grid-col-6 desktop:grid-col-3"> | ||
<section class="usa-footer__primary-content usa-footer__primary-content--collapsible"> | ||
<h4 class="usa-footer__primary-link">Topic</h4> | ||
<ul class="usa-list usa-list--unstyled"> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
<li class="usa-footer__secondary-link"><a href="javascript:void(0);">Secondary link</a></li> | ||
</ul> | ||
</section> | ||
</div> | ||
</div> | ||
</nav> | ||
</div> | ||
<div class="tablet:grid-col-4"> | ||
<div class="usa-sign-up"> | ||
<h3 class="usa-sign-up__heading">Sign up</h3> | ||
<form class="usa-form"> | ||
<label class="usa-label" for="email" id="">Your email address</label> | ||
<input class="usa-input" id="email" name="email" type="email"> | ||
<button class="usa-button" type="submit">Sign up</button> | ||
</form> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="usa-footer__secondary-section"> | ||
<div class="usa-grid"> | ||
<div class="usa-footer__logo usa-width-one-half"> | ||
<img class="usa-footer__logo-img" src="{{ uswds.path }}/img/logo-img.png" alt="Logo image"> | ||
<h3 class="usa-footer__logo-heading">Name of Agency</h3> | ||
</div> | ||
<div class="usa-footer__contact-links usa-width-one-half"> | ||
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);"> | ||
<span>Facebook</span> | ||
</a> | ||
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);"> | ||
<span>Twitter</span> | ||
</a> | ||
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);"> | ||
<span>YouTube</span> | ||
</a> | ||
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);"> | ||
<span>RSS</span> | ||
</a> | ||
<address> | ||
<div class="grid-container"> | ||
<div class="grid-row grid-gap"> | ||
<div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"> | ||
<div class="mobile-lg:grid-col-auto"> | ||
<img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt=""> | ||
</div> | ||
<div class="mobile-lg:grid-col-auto"> | ||
<h3 class="usa-footer__logo-heading">Name of Agency</h3> | ||
</div> | ||
</div> | ||
<div class="usa-footer__contact-links mobile-lg:grid-col-6"> | ||
<div class="usa-footer__social-links grid-row grid-gap-1"> | ||
<div class="grid-col-auto"> | ||
<a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);"> | ||
<span>Facebook</span> | ||
</a> | ||
</div> | ||
<div class="grid-col-auto"> | ||
<a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);"> | ||
<span>Twitter</span> | ||
</a> | ||
</div> | ||
<div class="grid-col-auto"> | ||
<a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);"> | ||
<span>YouTube</span> | ||
</a> | ||
</div> | ||
<div class="grid-col-auto"> | ||
<a class="usa-social-link usa-social-link--rss" href="javascript:void(0);"> | ||
<span>RSS</span> | ||
</a> | ||
</div> | ||
</div> | ||
<h3 class="usa-footer__contact-heading">Agency Contact Center</h3> | ||
<p>(800) CALL-GOVT</p> | ||
<a href="mailto:info@agency.gov">info@agency.gov</a> | ||
</address> | ||
<address class="usa-footer__address"> | ||
<div class="usa-footer__contact-info grid-row grid-gap"> | ||
<div class="grid-col-auto"> | ||
<a href="tel:1-800-555-5555">(800) CALL-GOVT</a> | ||
</div> | ||
<div class="grid-col-auto"> | ||
<a href="mailto:info@agency.gov">info@agency.gov</a> | ||
</div> | ||
</div> | ||
</address> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
</footer> |