Footer
The new AHA banner is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
Main Footer
2024 Centennial Celebration
Our mission is to be a relentless force for a world of longer, healthier lives. As we move into the second century of our work, we are advancing health and hope for everyone, everywhere.
HTML
// CSS for non 1.0.3 projects to get 100 year logo and the red block which is above the footer
.aui-footer .aui-footer-logo.aui-footer-logo-100 {
background: url(aha-logo-100.png) no-repeat;
background-size: auto 100%;
}
.celebration {
background: transparent linear-gradient(275deg, #FF911D 0%, #CF222B 9%, #990000 47%, #1E1C1C 100%) 0% 0% no-repeat padding-box;
padding: 16px;
margin-bottom: 56px;
display: flex;
align-items: start;
}
@media only screen and (min-width: 992px) {
.celebration {
padding: 16px 64px 16px 16px;
}
}
@media only screen and (min-width: 768px) {
.celebration {
align-items: center;
}
}
.celebration-logo-round {
width: 66px;
height: 66px;
background: url(aha-logo-100-round.png) no-repeat;
background-size: 100%;
margin-right: 18px;
background-position: center;
flex-shrink: 0;
}
@media only screen and (min-width: 768px) {
.celebration-logo-round {
width: 110px;
height: 110px;
}
}
@media only screen and (min-width: 992px) {
.celebration-logo-round {
width: 104px;
height: 104px;
}
}
.celebration-detail {
flex-grow: 1;
color: #ffffff;
}
.celebration-detail p {
line-height: 1.3;
}
<div class="celebration">
<div class="celebration-logo-round" role="img" aria-label="American Heart Association logo"></div>
<div class="celebration-detail">
<h2 class="h5 mb-2">2024 Centennial Celebration</h2>
<p class="mb-0">Our mission is to be a relentless force for a world of longer, healthier lives. As we move into the second century of our work, we are advancing health and hope for everyone, everywhere.</p>
</div>
</div>
<footer class="aui-footer">
<div class="container">
<p class="aui-footer-title">
*All health/medical information on this website has been reviewed and
approved by the American Heart Association, based on scientific
research and American Heart Association guidelines.
<a
href="https://www.heart.org/en/about-us/statements-and-policies/content-editorial-process"
class="font-red btn-text-link-uline"
aria-label="Use this link for content editorial process Opens in new tab"
target="_blank"
>
Use this link
</a>
for more information on our content editorial process.
</p>
<div class="row">
<div class="col-md-3">
<div
class="aui-footer-logo aui-footer-logo-100 mx-auto mx-md-0"
role="img"
aria-label="American Heart Association logo"
></div>
<div class="aui-footer-accordion">
<div
class="d-md-none d-flex justify-content-between align-items-center aui-footer-acc-h"
id="contactaddress"
data-toggle="collapse"
data-target="#contactinfo"
aria-expanded="false"
aria-controls="contactinfo"
role="button"
>
<h2 class="h8 mb-0 font-600">Contact Us</h2>
<i class="aha-icon-arrow-down mr-2"></i>
</div>
<div class="collapse" id="contactinfo">
<address class="aui-footer-address d-flex d-md-block flex-wrap mb-0">
<p>
<span class="h8 mb-0 font-600 d-block">
National Center
</span>
<span class="d-block">7272 Greenville Ave.</span>
<span class="d-block">Dallas, TX 75231</span>
</p>
<p class="aui-footer-service">
<span class="h8 mb-0 font-600 d-block">
Customer service
</span>
<span class="d-block">1-800-AHA-USA-1</span>
<span class="d-block">1-800-242-8721</span>
</p>
<div class="aui-footer-contact-btn">
<a
href="https://www.heart.org/en/about-us/contact-us"
target="_blank"
class="btn btn-secondary btn-round"
aria-label="Contact Us Opens in new tab"
>
Contact Us
</a>
</div>
<p class="aui-footer-hours">
<span class="h8 mb-0 d-block font-600">Hours</span>
<span class="d-block">
Monday - Friday: 7AM - 9PM CST
</span>
<span class="d-block">Saturday: 9AM - 5PM CST</span>
<span class="d-block">Closed on Sundays</span>
</p>
</address>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-lg-4 col-md-6 px-xl-4">
<div class="aui-footer-accordion">
<h2 class="h8 mb-0 font-600 d-none d-md-block">
About Us
</h2>
<div
class="d-flex d-md-none justify-content-between align-items-center aui-footer-acc-h"
id="ftrCol1"
data-toggle="collapse"
data-target="#ftrCol1Content"
aria-controls="ftrCol1Content"
aria-expanded="false"
role="button"
>
<h2 class="h8 mb-0 font-600">About Us</h2>
<i class="aha-icon-arrow-down mr-2 d-md-none"></i>
</div>
<div
class="collapse aui-footer-acc-b"
id="ftrCol1Content"
>
<ul class="mb-0">
<li>
<a
href="https://www.heart.org/en/about-us"
target="_blank"
aria-label="About the Americal Heart Association / American Stroke Association Opens in new tab"
>
<span>About the <span aria-hidden="true">AHA/ASA</span><span class="sr-only">Americal Heart Association / American Stroke Association</span></span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/about-us/annual-report"
target="_blank"
aria-label="Annual Report Opens in new tab"
>
<span>Annual Report</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/about-us/aha-financial-information"
target="_blank"
aria-label="American Heart Association Financial Information Opens in new tab"
>
<span><span aria-hidden="true">AHA</span><span class="sr-only">American Heart Association</span> Financial Information</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://heart.jobs/?utm_campaign=heart.org-Footer&vs=2896&utm_medium=Other&utm_source=heart.org-Footer"
target="_blank"
aria-label="Careers Opens in new tab"
>
<span>Careers</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/about-us/international-programs"
target="_blank"
aria-label="International Programs Opens in new tab"
>
<span>International Programs</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/news"
target="_blank"
aria-label="Latest Heart and stroke news Opens in new tab"
>
<span>Latest Heart and Stroke News</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://newsroom.heart.org/"
target="_blank"
aria-label="Americal Heart Association / American Stroke Association Media Newsroom Opens in new tab"
>
<span><span aria-hidden="true">AHA/ASA</span><span class="sr-only">Americal Heart Association / American Stroke Association</span> Media Newsroom</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 px-xl-4">
<div class="aui-footer-accordion">
<h2 class="h8 mb-0 font-600 d-none d-md-block">
Get Involved
</h2>
<div
class="d-flex d-md-none justify-content-between align-items-center aui-footer-acc-h"
id="ftrCol2"
data-toggle="collapse"
data-target="#ftrCol2Content"
aria-expanded="false"
aria-controls="ftrCol2Content"
role="button"
>
<h2 class="h8 mb-0 font-600">Get Involved</h2>
<i class="aha-icon-arrow-down mr-2 d-md-none"></i>
</div>
<div
class="collapse aui-footer-acc-b"
id="ftrCol2Content"
>
<ul class="mb-0">
<li>
<a
href="https://www2.heart.org/site/SPageNavigator/donatenow_heart.html?s_src=20U2W1UEMG&s_subsrc=footer_donatenow"
target="_blank"
aria-label="Donate Now Opens in new tab"
>
<span>Donate Now</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www2.heart.org/site/SPageNavigator/donatenow_legacy.html?s_src=20U2W1EEMM&sub_src=footer_memorial_gift"
target="_blank"
aria-label="Make a Memorial Gift Opens in new tab"
>
<span>Make a Memorial Gift</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/get-involved/ways-to-give"
target="_blank"
aria-label="Ways to Give Opens in new tab"
>
<span>Ways to Give</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/get-involved/advocate"
target="_blank"
aria-label="Advocate Opens in new tab"
>
<span>Advocate</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/volunteer/opportunities"
target="_blank"
aria-label="Volunteer Opens in new tab"
>
<span>Volunteer</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.goredforwomen.org/en"
target="_blank"
aria-label="Go Red for women Opens in new tab"
>
<span>Go Red For Women</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.shopheart.org/?a=aha-heart.org-bottom-navigation&utm_source=heart.org&utm_medium=referral&utm_campaign=aha-heart.org-bottom-navigation"
target="_blank"
aria-label="Shop Opens in new tab"
>
<span>SHOP</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mt-md-5 mt-lg-0 px-xl-4">
<div class="aui-footer-accordion">
<h2 class="h8 mb-0 font-600 d-none d-md-block">
Customer Support
</h2>
<div
class="d-flex d-md-none justify-content-between align-items-center aui-footer-acc-h"
id="ftrCol3"
data-toggle="collapse"
data-target="#ftrCol3Content"
aria-controls="ftrCol3Content"
aria-expanded="false"
role="button"
>
<h2 class="h8 mb-0 font-600">Customer Support</h2>
<i class="aha-icon-arrow-down mr-2 d-md-none"></i>
</div>
<div
class="collapse aui-footer-acc-b"
id="ftrCol3Content"
>
<ul class="mb-0">
<li>
<a href="https://www.stroke.org/en" target="_blank" aria-label="American Stroke Association Opens in new tab">
<span>American Stroke Association</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://cpr.heart.org/en"
target="_blank"
aria-label="Cardiopulmonary resuscitation and Emergency Cardiovascular Care Opens in new tab"
>
<span><span aria-hidden="true">CPR & ECC</span><span class="sr-only">Cardiopulmonary resuscitation and Emergency Cardiovascular Care</span></span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://professional.heart.org/en/"
target="_blank"
aria-label="Professional Heart Daily Opens in new tab"
>
<span>Professional Heart Daily</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
<li>
<a
href="https://www.heart.org/en/about-us/aha-asa-website-directory"
target="_blank"
aria-label="more sites Opens in new tab"
>
<span>More Sites</span>
<i class="aha-icon-arrow-right"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="aui-footer-inline">
<div class="container">
<div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center py-md-4">
<ul class="aui-footer-media p-0 m-0">
<li>
<a
href="https://twitter.com/American_Heart"
target="_blank"
aria-label="connect to twitter Opens in new tab"
>
<i class="aha-icon-twitter"></i>
</a>
</li>
<li>
<a
href="https://www.facebook.com/AmericanHeart"
target="_blank"
aria-label="connect to facebook Opens in new tab"
>
<i class="aha-icon-facebook"></i>
</a>
</li>
<li>
<a
href="https://www.instagram.com/american_heart/"
target="_blank"
aria-label="connect to instagram Opens in new tab"
>
<i class="aha-icon-instagram"></i>
</a>
</li>
<li>
<a
href="https://www.youtube.com/user/americanheartassoc"
target="_blank"
aria-label="connect to youtube Opens in new tab"
>
<i class="aha-icon-youtube"></i>
</a>
</li>
<li>
<a
href="https://in.pinterest.com/americanheart/_created/"
target="_blank"
aria-label="connect to pinterest Opens in new tab"
>
<i class="aha-icon-pin"></i>
</a>
</li>
<li>
<a
href="https://www.linkedin.com/company/american-heart-association/"
target="_blank"
aria-label="connect to linkedin Opens in new tab"
>
<i class="aha-icon-linkedin"></i>
</a>
</li>
</ul>
<ul class="aui-footer-ref p-0 mb-0 mt-5 mt-md-0">
<li>
<a
href="https://nationalhealthcouncil.org/blog/introduction-to-the-standards-of-excellence-certification-program/"
target="_blank"
class="d-block aui-extlink aui-council"
aria-label="National Health Council Opens in new tab"
></a>
</li>
<li>
<a
href="https://www.give.org/charity-reviews/national/health/american-heart-association-in-dallas-tx-173"
target="_blank"
class="d-block aui-extlink aui-bbb"
aria-label="Better Business Bureau Opens in new tab"
></a>
</li>
<li>
<a
href="https://www.charitynavigator.org/index.cfm?bay=search.summary&orgid=3260"
target="_blank"
class="d-block aui-extlink aui-navigator"
aria-label="Charity Navigator Opens in new tab"
></a>
</li>
<li>
<a
href="https://ssl.comodo.com/"
target="_blank"
class="d-block aui-extlink aui-secureseal"
aria-label="Comodo Secure Opens in new tab"
></a>
</li>
</ul>
</div>
</div>
</div>
<div class="container aui-footer-link">
<div class="row">
<div class="col-12">
<ul class="aui-footer-linkitem list-inline text-center mb-4">
<li>
<a
target="_blank"
href="https://heart.jobs/?utm_campaign=heart.org-Footer&vs=2896&utm_medium=Other&utm_source=heart.org-Footer"
aria-label="Careers Opens in new tab"
>
Careers
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/privacy-statement"
aria-label="Privacy policy Opens in new tab"
>
Privacy Policy
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/medical-advice"
aria-label="medical advice disclaimer Opens in new tab"
>
Medical Advice Disclaimer
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/copyright"
aria-label="copyright policy Opens in new tab"
>
Copyright Policy
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/accessibility-statement"
aria-label="accessibility statement Opens in new tab"
>
Accessibility Statement
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/ethics-policy"
aria-label="ethics policy Opens in new tab"
>
Ethics Policy
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/conflict-of-interest-policy"
aria-label="conflict of interest policy Opens in new tab"
>
Conflict of Interest Policy
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/linking-policy"
aria-label="linking policy Opens in new tab"
>
Linking Policy
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/editorial-guidelines"
aria-label="content editorial guidelines Opens in new tab"
>
Content Editorial Guidelines
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/diversity-inclusion"
aria-label="diversity Opens in new tab"
>
Diversity
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/procurement-services/procurement-services-department"
aria-label="suppliers & providers Opens in new tab"
>
Suppliers & Providers
</a>
</li>
<li>
<a
target="_blank"
href="https://www.heart.org/en/about-us/statements-and-policies/state-fundraising-notices"
aria-label="state fundraising policy Opens in new tab"
>
State Fundraising Policy
</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="text-center mb-0">
©2020 American Heart Association, Inc. All rights reserved.
Unauthorized use prohibited.
</p>
<p class="text-center mb-0">
The American Heart Association is a qualified 501(c)(3) tax-exempt
organization.
</p>
<p class="text-center mb-2">
*Red Dress<sup>TM</sup> DHHS, Go Red<sup>TM</sup> AHA ; National
Wear Red Day® is a registered trademark.
</p>
</div>
</div>
<div class="d-flex align-items-center mx-auto pb-4 mt-3 aui-footer-info">
<div
class="aui-honconduct-img d-table"
role="img"
aria-label="Health on the Net certified 2019"
></div>
<p class="aui-p-footer pl-3 m-0">
This site complies with the
<a
href="https://www.hon.ch/cgi-bin/HONcode/principles.pl?English"
target="_blank"
class="font-red btn-text-link-uline"
aria-label="HONcode Standard Opens in new tab"
>
HONcode Standard
</a>
for trustworthy health information:
<a
href="https://www.healthonnet.org/HONcode/Conduct.html?HONConduct517595"
target="_blank"
class="font-red btn-text-link-uline"
aria-label="verify here for HONcode Standard for trustworthy health information Opens in new tab"
>
verify here
</a>
</p>
</div>
</div>
</footer>