Site footer
The base footer on our site. Set the layout based on the number of columns needed.
Example CSS for layout:
.c-site-footer__inner {grid-template-columns: repeat(4, 1fr);}
To render the standard footer, use a combination of c-site-footer__inner--standard for layout and c-site-footer__links--standard for proper link spacing.
.c-site-footer
<div class="c-site-footer has-bg-black-off">
<!--
Our various sites will have different variations on the footer
with different links, number of columns, etc. You'll likely need
to implement a grid system at the app level to handle those scenarios.
-->
<div class="c-site-footer__inner l-container l-container--xl t-size-xs">
<div>
<div class="has-b-btm-marg">
<span style="font-size: 4rem;" class="c-icon has-text-yellow">
<svg aria-hidden="true" focusable="false">
<use xlink:href="#bug"></use>
</svg>
</span>
</div>
<div class="has-notch has-notch--thin has-bg-yellow has-b-btm-marg" aria-hidden="true"></div>
<ul class="c-site-footer__links t-size-xs has-text-white has-text-hover-white">
<li class="has-tiny-btm-marg has-text-blue has-text-hover-blue"><a href="https://support.texastribune.org/donate">Donate</a></li>
<li class="has-tiny-btm-marg"><a href="https://support.texastribune.org/account/">View your giving history</a></li>
<li class="has-tiny-btm-marg"><a href="https://www.texastribune.org/contact/">Contact us</a></li>
<li>© 2022 The Texas Tribune</li>
</ul>
</div>
<div>
<h2 class="c-site-footer__header has-text-yellow t-uppercase has-xs-btm-marg t-size-xs">Heading</h2>
<ul class="c-site-footer__links has-text-white has-text-hover-white">
<li class="has-tiny-btm-marg"><a href="#">Foo</a></li>
<li class="has-tiny-btm-marg"><a href="#">Bar</a></li>
<li class="has-tiny-btm-marg"><a href="#">Baz</a></li>
<li class="has-tiny-btm-marg"><a href="#">Hello</a></li>
<li><a href="#">World</a></li>
</ul>
</div>
<div>
<h2 class="c-site-footer__header has-text-yellow t-uppercase has-xs-btm-marg t-size-xs">Heading</h2>
<ul class="c-site-footer__links has-text-white has-text-hover-white">
<li class="has-tiny-btm-marg"><a href="#">Foo</a></li>
<li class="has-tiny-btm-marg"><a href="#">Bar</a></li>
<li class="has-tiny-btm-marg"><a href="#">Baz</a></li>
<li class="has-tiny-btm-marg"><a href="#">Hello</a></li>
<li class="has-tiny-btm-marg"><a href="#">World</a></li>
</ul>
</div>
<div>
<h2 class="c-site-footer__header has-text-yellow t-uppercase has-xs-btm-marg t-size-xs">Social Media</h2>
<ul class="c-site-footer__links has-b-btm-marg has-text-white has-text-hover-white">
<li class="has-tiny-btm-marg">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#facebook"></use></svg></span>
<a href="http://facebook.com/texastribune">Facebook</a>
</li>
<li class="has-tiny-btm-marg">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#twitter"></use></svg></span>
<a href="http://twitter.com/texastribune">Twitter</a>
</li>
<li class="has-tiny-btm-marg">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#youtube"></use></svg></span>
<a href="http://youtube.com/user/thetexastribune?sub_confirmation=1">YouTube</a>
</li>
<li class="has-tiny-btm-marg">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#instagram"></use></svg></span>
<a href="http://instagram.com/texas_tribune">Instagram</a>
</li>
<li class="has-tiny-btm-marg">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#linkedin"></use></svg></span>
<a href="http://www.linkedin.com/company/texas-tribune">LinkedIn</a>
</li>
<li>
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon"><svg aria-hidden="true"><use xlink:href="#reddit"></use></svg></span>
<a href="https://www.reddit.com/user/texastribune">Reddit</a>
</li>
</ul>
<div class="has-notch has-notch--thin has-bg-yellow has-b-btm-marg" aria-hidden="true"></div>
<ul class="c-site-footer__links has-text-white has-text-hover-white">
<li>
<a href="https://www.facebook.com/groups/thisisyourtexas/">
<span class="t-size-s c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true"><use xlink:href="#your-texas"></use></svg></span>
Join our Facebook Group, This Is Your Texas.
</a>
</li>
</ul>
</div>
</div>
</div>
This class isn't referenced anywhere
.c-site-footer__inner--standard
This is our default footer.
<footer class="c-site-footer has-bg-black-off has-text-white t-size-xs">
<div class="l-container l-container--xl grid_container--xl c-site-footer__inner c-site-footer__inner--standard">
<div class="c-site-footer__col c-site-footer__col--1">
<span style="font-size: 4rem;" class="c-icon has-text-yellow has-b-btm-marg">
<svg aria-hidden="true" focusable="false">
<use xlink:href="#bug"></use>
</svg>
</span>
<div class="has-notch has-notch--thin has-bg-yellow has-b-btm-marg"></div>
<ul class="c-site-footer__links c-site-footer__links--standard">
<li class="has-text-blue">
<a href="https://support.texastribune.org/donate?installmentPeriod=once&amount=60" title="Donate" class="donate" ga-on="click" ga-event-category="donations" ga-event-action="membership-intent" ga-event-label="footer">Donate</a>
</li>
<li>
<a href="https://support.texastribune.org/account/" title="View your giving history" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="view your giving history">View your giving history</a>
</li>
<li>
<a href="/contact/" title="Contact us" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="contact us">Contact us</a>
</li>
<li>
<a href="https://mediakit.texastribune.org/" title="Advertise" class="advertise" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="advertise">Advertise</a>
</li>
<li>
<a href="/" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="copyright">© 2022 The Texas Tribune</a>
</li>
</ul>
</div>
<section id="footer-sections" class="c-site-footer__col--2 hide_until--s is-hidden-until-bp-s">
<h2 class="c-site-footer__header t-size-xs has-text-yellow t-uppercase has-xxs-btm-marg">
Topics
</h2>
<ul class="c-site-footer__links c-site-footer__links--standard">
<li>
<a href="https://www.texastribune.org/topics/congress/" data-section="congress" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="congress">Congress</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/courts/" data-section="courts" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="courts">Courts</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/criminal-justice/" data-section="criminal-justice" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="criminal justice">Criminal justice</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/demographics/" data-section="demographics" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="demographics">Demographics</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/economy/" data-section="economy" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="economy">Economy</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/energy/" data-section="energy" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="energy">Energy</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/environment/" data-section="environment" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="environment">Environment</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/health-care/" data-section="health-care" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="health care">Health care</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/higher-education/" data-section="higher-education" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="higher education">Higher education</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/immigration/" data-section="immigration" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="immigration">Immigration</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/politics/" data-section="politics" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="politics">Politics</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/public-education/" data-section="public-education" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="public education">Public education</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/state-government/" data-section="state-government" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="state government">State government</a>
</li>
<li>
<a href="https://www.texastribune.org/topics/" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="topics">View all</a>
</li>
</ul>
</section>
<section class="c-site-footer__col c-site-footer__col--3">
<h2 class="c-site-footer__header t-size-xs has-text-yellow t-uppercase has-xxs-btm-marg">
<span class="is-sr-only">Company </span>Info</h2>
<ul class="c-site-footer__links c-site-footer__links--standard">
<li>
<a href="https://www.texastribune.org/about/" title="About Us" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="about us">About Us</a>
</li>
<li>
<a href="https://www.texastribune.org/about/staff/" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="our staff">Our Staff</a>
</li>
<li>
<a href="https://www.texastribune.org/jobs/" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="jobs">Jobs</a>
</li>
<li>
<a href="https://www.texastribune.org/support-us/donors-and-members/" title="Who Funds Us?" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="who funds us">Who Funds Us?</a>
</li>
<li>
<a href="https://www.texastribune.org/about/texas-tribune-strategic-plan/" title="Strategic Plan" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="strategic plan">Strategic Plan</a>
</li>
<li>
<a href="https://www.texastribune.org/republishing-guidelines/" title="Republishing Guidelines" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="republishing guidelines">Republishing Guidelines</a>
</li>
<li>
<a href="https://www.texastribune.org/about/ethics/" title="Code of Ethics" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="code of ethics">Code of Ethics</a>
</li>
<li>
<a href="https://www.texastribune.org/about/terms-of-service/" title="Terms of Service" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="terms of service">Terms of Service</a>
</li>
<li>
<a href="https://www.texastribune.org/about/privacy-policy/" title="Privacy Policy" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="privacy policy">Privacy Policy</a>
</li>
<li>
<a href="https://www.texastribune.org/about/tips/" title="Send a Tip" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="send us a confidential tip">Send us a confidential tip</a>
</li>
<li>
<a href="https://www.texastribune.org/corrections/" title="Corrections" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="corrections">Corrections</a>
</li>
<li>
<a href="https://www.texastribune.org/about/feeds/" title="Feeds" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="feeds">Feeds</a>
</li>
<li>
<a href="https://www.texastribune.org/about/subscribe/" title="Newsletters" ga-event-category="subscribe intent" ga-event-action="footer link">Newsletters</a>
</li>
<li>
<a href="https://www.texastribune.org/audio/" title="Audio" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="audio">Audio</a>
</li>
<li>
<a href="https://www.texastribune.org/video/" title="Video" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="video">Video</a>
</li>
</ul>
</section>
<section class="c-site-footer__col c-site-footer__col--4">
<h2 class="c-site-footer__header t-size-xs has-text-yellow t-uppercase has-xxs-btm-marg">Social Media</h2>
<ul class="c-site-footer__links c-site-footer__links--standard">
<li>
<a href="http://facebook.com/texastribune" title="Facebook" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="facebook">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#facebook"></use>
</svg>
</span>Facebook</a>
</li>
<li>
<a href="http://twitter.com/texastribune" title="Twitter" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="twitter">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#twitter"></use>
</svg>
</span>Twitter</a>
</li>
<li>
<a href="http://youtube.com/user/thetexastribune?sub_confirmation=1" title="YouTube" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="youtube">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#youtube"></use>
</svg>
</span>YouTube</a>
</li>
<li>
<a href="http://instagram.com/texas_tribune" title="Instagram" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="instagram">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#instagram"></use>
</svg>
</span>Instagram</a>
</li>
<li>
<a href="http://www.linkedin.com/company/texas-tribune" title="LinkedIn" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="linkedin">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#linkedin"></use>
</svg>
</span>LinkedIn</a>
</li>
<li>
<a href="https://www.reddit.com/user/texastribune" title="Reddit" class="external has-xxs-btm-marg l-display-ib" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="reddit">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#reddit"></use>
</svg>
</span>Reddit</a>
</li>
<li>
<div class="has-notch has-notch--thin has-bg-yellow has-s-btm-marg"></div>
</li>
<li>
<a href="https://www.facebook.com/groups/thisisyourtexas/" title="This is Your Texas" class="external" ga-event-category="navigation" ga-event-action="footer link click" ga-event-label="this is your texas">
<span class="c-icon c-icon--baseline c-site-footer__icon">
<svg aria-hidden="true">
<use xlink:href="#your-texas"></use>
</svg>
</span>Join our Facebook Group, This Is Your Texas.
</a>
</li>
</ul>
</section>
</div>
</footer>
This class isn't referenced anywhere