Cornerstone

Local Footer

Local Footer Component

Overview

The Local Footer component serves as a footer section for individual sites. It provides additional site-specific information and can be seamlessly combined with the Global Footer to create a cohesive footer experience across multiple pages.

Implementation Details

The local footer is styled and structured to work alongside the global footer without conflicts.

To achieve the max-width effect seen on the homepage, the background is set in .tcu-footer, while the max-width and margin-inline properties are applied within .tcu-footer__inner.

Usage

Include the Local Footer within your site layout as needed. When integrating with the Global Footer, ensure both footers are structured properly to maintain design consistency.

<footer class="tcu-footer">
  <div class="tcu-footer__inner">
    <!-- Local Footer Content -->
    <!-- Global Footer Content -->
  </div>
</footer>
<div class="tcu-local-footer">
    <div class="tcu-local-footer__cell">
        <a aria-label="Go back to the main TCU homepage" class="tcu-logo" href="/">
            <img width="176" src="https://admissions.tcu.edu/_resources/images/svg/Admission-wordmark.svg" alt="TCU Logo" /><span class="tcu-visuallyhidden">TCU</span>
        </a>
        <div class="tcu-local-footer__social">
            <p class="tcu-local-footer__heading">Follow Us</p>
            <ul>
                <li>
                    <a href="#">
                        <svg>
                            <title>Facebook</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook" href="#icon-facebook">
                            </use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>TikTok</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-tiktok" href="#icon-tiktok"></use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>Instagram</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram" href="#icon-instagram">
                            </use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>X</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter-x" href="#icon-twitter-x">
                            </use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>Threads</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-threads" href="#icon-threads"></use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>YouTube</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-youtube" href="#icon-youtube"></use>
                        </svg>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg>
                            <title>LinkedIn</title>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-linkedin" href="#icon-linkedin">
                            </use>
                        </svg>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="tcu-local-footer__cell has-icons">

        <svg class="tcu-location-pin-icon" focusable="false" height="30" width="30">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-location-pin-icon" href="#icon-location-pin-icon"></use>
        </svg>
        <p>3301 Bellaire Drive North<br> Fort Worth, Texas 76109<br><a class="" href="https://goo.gl/maps/C9wxuNnjQA82" title="" target="_blank" rel="noopener">Get Directions</a></p><svg class="tcu-phone-icon" focusable="false" height="30" width="30">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-phone-icon" href="#icon-phone-icon"></use>
        </svg>
        <p>TOLL-FREE: 800-828-3764<br> DIRECT: 817-257-7490<br> FAX: 817-257-7268</p>
        <svg class="tcu-mail-icon" focusable="false" height="30" width="30">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-mail-icon" href="#icon-mail-icon"></use>
        </svg>
        <p>TCU Office of Admission<br> TCU Box 297013<br> Fort Worth, Texas 76129</p><svg class="tcu-email-icon" focusable="false" height="30" width="30">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-email-icon" href="#icon-email-icon"></use>
        </svg>
        <p><a href="mailto:frogmail@tcu.edu">frogmail@tcu.edu</a></p>

    </div>

    <div class="tcu-local-footer__cell">
        <p class="tcu-local-footer__heading">Quick Links</p>
        <ul class="no-bullet">
            <li><a href="#">Horned Frog Blog</a></li>
            <li><a href="#">Scholarships & Financial Aid</a></li>
            <li><a href="#">Housing & Residence Life</a></li>
            <li><a href="#">Dining</a></li>
            <li><a href="#">Orientation & Frog Camp</a></li>
            <li><a href="#">Course Catalog</a></li>
            <li><a href="#">Student Activities</a></li>
        </ul>
        <p><a class="button solid" href="#">Give</a></p>
    </div>
</div>