College Design Language System

Global Footer 

<!-- Footer -->
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="footer-logo">
                    <img width="231px" height="75px" alt="UTSA - Creating Bold Futures" src="../../college-dls/utsa/images/utsa-cbf.svg" />
                </div>
                <div class="footer-text">
                    <p>
                        <span class="footer-first-text">One UTSA Circle San Antonio, TX 78249</span>
                        <span class="footer-second-text">Information <a href="tel:+12104584011" class="">210-458-4011</a></span>
                    </p>
                </div>
                <div class="footer-social">
                    <a class="facebook" href="https://facebook.com/utsa" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
                    <a class="twitter" href="https://x.com/utsa" aria-label="Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
                    <a class="youtube" href="https://youtube.com/user/utsa" aria-label="Youtube"><i class="fab fa-youtube" aria-hidden="true"></i></a>
                    <a class="linkedin" href="https://linkedin.com/school/the-university-of-texas-at-san-antonio/" aria-label="Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
                    <a class="instagram" href="https://instagram.com/utsa/" aria-label="Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-2">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/locations" id="s-footer-locations">Locations</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/visit" id="s-footer-visit" aria-label="Visit UTSA">Visit UTSA</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/today" id="s-footer-utsa-today">UTSA Today</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/jobs" id="s-footer-jobs">Jobs</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://alerts.utsa.edu/utsa-community-emergency-response" id="s-footer-emergency-contacts">Emergency Contacts</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-2">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/directory" id="s-footer-directory">Directory</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/Compliance/Hotline.html" id="s-footer-report-fraud">Report
                            Fraud</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/eos/title-ix" id="s-footer-title-ix-reporting">Title IX
                            Reporting</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/ada" id="s-footer-ada-resources">ADA Resources</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/publicsafety/pd/clery_compliance" id="s-footer-clery-info">Clery
                            Information</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/remembrance" id="s-footer-rr-remembrance">Roadrunner
                            Remembrance</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/mental-health-resources" id="s-footer-mental-health">Counseling/Mental Health</a>
                    </li>

                    <li class="nav-item">
                        <a href="https://www.utsa.edu/heerf/#reports-disclosure" id="s-footer-cares-act-reports">CARES
                            Act Reports &amp; Disclosure</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/hop/chapter9/9.24.html" id="s-footer-sexual-harassment">Sexual
                            Harassment and Sexual Misconduct Policy</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
    </div>
    <div class="copyright-subfooter">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="utsa-copyright">
                    <p>&copy; 2024 The University of Texas at San Antonio</p>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <nav class="subfooter-links">
                    <ul class="list-unstyled">
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies" id="s-footer-policies">Policies</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies/accessibility" id="s-footer-web-accessibility">Web
                                Accessibility</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies/reqlinks.html" id="s-footer-required-links">Required
                                Links</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsystem.edu/" id="s-footer-ut-system">UT System</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</footer>
<!--End Footer -->
  • Content: 
    /* components/02-components/07-navigation/05-global-footer/global-footer.scss */
/* BEGIN global-footer.scss */
#footer {
    border-top: 1px solid $orange-a11y;
    background-color: $blue;
    padding-top: 3.5rem;
    font-family: open-sans, sans-serif !important;

    li.nav-item a {
        font-size: 0.8125rem;
    }

    p {
        color: $white;
    }

    .footer-logo img {
        // width: 65%!important;
        max-width: 65%;
    }

    .footer-text p {
        color: $white;
        font-size: 11px;
        font-weight: 400;
    }

    .footer-text p a {
        color: $white;
        text-decoration: underline;
    }

    .footer-text p>.footer-first-text {
        margin-right: 10px;
        padding-right: 10px;
        border-right: 1px solid $grey-b;
    }

    .footer-social>a {
        width: 35px;
        height: 35px;
        display: inline-block;
        border-radius: 50%;
        color: $white;
        border: 2px solid $white;
        text-align: center;
        font-size: 1.25rem;
        margin-right: 3px;
    }

    .footer-column-1 .footer-logo {
        margin-bottom: 10px;
    }

    .footer-column-1 .footer-social {
        padding-top: 20px;
    }

    .nav-item>a {
        color: $white;
        font-size: 13px;
        line-height: 1.5;
        padding: 7px 2px;
        display: inline-block;
        margin-bottom: 5px;
    }

    .nav-item {
        line-height: normal;
    }

    .nav-item>a:hover {
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        color: $blue;
        background-color: $grey;
        text-decoration: underline;
    }

    // #footer>.main-footer-wrap {
    //     width: 100%;
    //     max-width: 1000px;
    //     margin: 0 auto;
    // }

    .copy-right-sec {
        background-color: $blue;
        // text-align: center;
        padding: 26px 0px;
    }

    // .main-footer-wrap {
    //     padding: 48px 15px 0px 15px;
    // }

    .footer-social>a:hover {
        cursor: pointer;
        color: $blue;
        border: 2px solid $grey;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .footer-column-2 {
        width: 100%;
        // max-width: 130px;
        margin: 0 auto;
    }

    .copy-right-text {
        color: $white;
        font-size: 11px;
        margin-bottom: 4px;
    }

    .producedBy,
    .producedBy a {
        font-size: 11px;
        color: $grey-b;
        font-weight: 600;
        margin-bottom: 0px;
        line-height: 1.5;
    }

    .copyright-subfooter {
        padding: 1.5625rem 0;
        font-size: .8rem
    }


    .copyright-subfooter .utsa-copyright {
        position: relative
    }

    .copyright-subfooter .utsa-copyright:after {
        content: " ";
        display: inline-block;
        height: .75rem;
        width: .125rem;
        background-color: $white;
        position: absolute;
        top: 25%;
        right: 0
    }

    .copyright-subfooter .utsa-copyright p {
        margin: 0;
        text-align: right;
        padding-right: 1.5625rem
    }

    .copyright-subfooter .subfooter-links {
        padding: 0
    }

    .copyright-subfooter .subfooter-links ul {
        padding: 0;
        margin: 0
    }

    .copyright-subfooter .subfooter-links ul li {
        display: inline-block;
        padding: 0 .625rem
    }

    .copyright-subfooter .subfooter-links ul li a {
        text-decoration: underline;
        padding: 0
    }

    hr {
        border-bottom: .125rem solid #fff
    }
}

@media (max-width: 991px) {
    #footer {
        .footer-demo-component .main-footer-wrap {
            padding-left: 15px;
            padding-right: 15px;
            padding-bottom: 15px;
        }
    }
}

@media (max-width: 767px) {
    #footer {
        line-height:1.75rem;

        .main-footer-wrap {
            padding: 30px 0px;
        }

        .footer-column-2 {
            width: 100%;
            max-width: 100%;
            margin: initial;
            padding-top: 25px;
        }

        .copyright-subfooter {
            text-align: center;
        }

        .copyright-subfooter .utsa-copyright p {
            text-align: center;
        }

        .copyright-subfooter .utsa-copyright:after {
            display: none;
        }
    }
}

/* Dark Mode - Footer/Ankle Styles */
@include color-mode(dark) {
    .white-b-bg {
        p, ul li, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            color:$blue;
        }
        a {
            color: $blue;
            &:hover {
                color: $blue;
                background-color: $grey;
            }
        }
    }
    #footer .footer-text p .footer-second-text a {
        color: $white;
        &:hover {
            color: $blue;
        }
    }
}
/* Dark Mode - Footer/Ankle END */

/* END global-footer.scss */
  • URL: /components/raw/global-footer/global-footer.scss
  • Filesystem Path: components/01-visual-styling/05-branding-standards/02-global-footer/global-footer.scss
  • Size: 5 KB 
<!-- Footer -->
<footer id="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="footer-logo">
                    <img width="231px" height="75px" alt="UTSA - Creating Bold Futures"
                        src="{{ path '/college-dls/utsa/images/utsa-cbf.svg'}}" />
                </div>
                <div class="footer-text">
                    <p>
                        <span class="footer-first-text">One UTSA Circle San Antonio, TX 78249</span>
                        <span class="footer-second-text">Information <a href="tel:+12104584011"
                                class="">210-458-4011</a></span>
                    </p>
                </div>
                <div class="footer-social">
                    <a class="facebook" href="https://facebook.com/utsa" aria-label="Facebook"><i
                            class="fab fa-facebook-f" aria-hidden="true"></i></a>
                    <a class="twitter" href="https://x.com/utsa" aria-label="Twitter"><i class="fa-brands fa-x-twitter"
                            aria-hidden="true"></i></a>
                    <a class="youtube" href="https://youtube.com/user/utsa" aria-label="Youtube"><i
                            class="fab fa-youtube" aria-hidden="true"></i></a>
                    <a class="linkedin" href="https://linkedin.com/school/the-university-of-texas-at-san-antonio/"
                        aria-label="Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
                    <a class="instagram" href="https://instagram.com/utsa/" aria-label="Instagram"><i
                            class="fab fa-instagram" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-2">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/locations" id="s-footer-locations">Locations</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/visit" id="s-footer-visit" aria-label="Visit UTSA">Visit UTSA</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/today" id="s-footer-utsa-today">UTSA Today</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/jobs" id="s-footer-jobs">Jobs</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://alerts.utsa.edu/utsa-community-emergency-response"
                            id="s-footer-emergency-contacts">Emergency Contacts</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-2">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/directory" id="s-footer-directory">Directory</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/Compliance/Hotline.html" id="s-footer-report-fraud">Report
                            Fraud</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/eos/title-ix" id="s-footer-title-ix-reporting">Title IX
                            Reporting</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/ada" id="s-footer-ada-resources">ADA Resources</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/publicsafety/pd/clery_compliance" id="s-footer-clery-info">Clery
                            Information</a>
                    </li>
                </ul>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <ul class="list-unstyled">
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/remembrance" id="s-footer-rr-remembrance">Roadrunner
                            Remembrance</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/mental-health-resources"
                            id="s-footer-mental-health">Counseling/Mental Health</a>
                    </li>

                    <li class="nav-item">
                        <a href="https://www.utsa.edu/heerf/#reports-disclosure" id="s-footer-cares-act-reports">CARES
                            Act Reports &amp; Disclosure</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://www.utsa.edu/hop/chapter9/9.24.html" id="s-footer-sexual-harassment">Sexual
                            Harassment and Sexual Misconduct Policy</a>
                    </li>
                </ul>
            </div>
        </div>


        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
    </div>
    <div class="copyright-subfooter">
        <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="utsa-copyright">
                    <p>&copy; 2024 The University of Texas at San Antonio</p>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <nav class="subfooter-links">
                    <ul class="list-unstyled">
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies" id="s-footer-policies">Policies</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies/accessibility" id="s-footer-web-accessibility">Web
                                Accessibility</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsa.edu/policies/reqlinks.html" id="s-footer-required-links">Required
                                Links</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://utsystem.edu/" id="s-footer-ut-system">UT System</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</footer>
<!--End Footer -->