Adopting the look and feel of the existing Cascade CMS Seed Template site ankle section. For a good example of this one, take a look at UTSA Student Affairs.
This section utilizes existing bootstrap classes for layout and simple FontAwesome icons for social media graphics. No custom classes should be needed. The background color should not be changed to remain consistent across UTSA web properties.
The site footer is the last chance for presenting site contact information (College address, phone, email, etc). It should be standard to include this immediately before the global UTSA footer. An exception for not displaying this footer can be made for custom landing pages or one pagers.
<section class="site-footer grey-bg pt-5 pb-2" aria-label="Site Footer">
<div class="container">
<div class="row">
<!-- Logo Column -->
<div class="col-sm-12 col-md-4 pl-3 pt-2">
<a class="logo-footer" href="#" target="_parent">
<img alt="" class="img-fluid mb-4" src="../../college-dls/college/images/logos/AI_Cyber_Computing_Type_2Line_Blu.svg" />
</a>
<ul class="list-unstyled">
<li class="mb-2">Main Building, Suite 4.120</li>
<li class="mb-2">The University of Texas at San Antonio</li>
<li class="mb-2">One UTSA Circle</li>
<li class="mb-2">San Antonio, TX 78249</li>
<li class="mb-2">(210) 458-4110</li>
<li class="mb-2"><a href="mailto:your-college-email@utsa.edu">your-college-email@utsa.edu</a></li>
</ul>
</div>
<!-- Site Footer Content Column -->
<div class="col-sm-8 pr-3">
<h5 class="pb-2">Stay Connected to the School of Data Science</h5>
<!-- div class="col-lg global-footer-social text-xs-center text-lg-right pt-1"> -->
<div class="row pb-4" id="social-sidebar">
<div class="col-2 text-center mt-3">
<a aria-label="Label for Facebook" href="#facebook-link-goes-here">
<i aria-hidden="true" class="fab fa-facebook fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Twitter" href="#twitter-link-goes-here">
<i aria-hidden="true" class="fab fa-x-twitter fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Instagram" href="#insta-link-goes-here">
<i aria-hidden="true" class="fab fa-instagram fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for YouTube" href="#yt-link-goes-here">
<i aria-hidden="true" class="fab fa-youtube fa-2x utsa-social-circle text-center"></i>
</a>
</div>
<!-- additional icons here as needed -->
</div>
<h5>Our Philosophy</h5>
<p>We practice a Facilitator Model in which staff partner with students
to make intelligent, fair, and reasonable choices within established
state, federal, and local laws, university rules and regulations, and
the educational mission of the institution.</p>
<h5>Mission Statement</h5>
<p>Student Activities helps students and student organizations get
involved with the UTSA community through campus-wide events,
traditions, workshops, training and development opportunities to
prepare for future success.</p>
<div class="pt-4 mb-2 pb-2 row">
<div class="offset-2 col-8"><a href="#"></a></div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/02-navigation/06-site-footer/site-footer.scss */
/* BEGIN site-footer.scss */
.site-footer.grey-bg {
background-color: $grey !important;
color: $blue;
text-align: unset;
font-family: open-sans, sans-serif !important;
font-weight: 400;
line-height: 1.5;
.logo-footer img {
max-width: 75%;
max-height: 85px;
}
a.logo-footer:hover,
a img:hover {
background-color: transparent !important;
}
li a:hover {
color: $orange-a11y !important;
background-color: transparent !important
}
h5 {
font-size: 1.5rem;
}
p {
margin-bottom: 1rem;
margin-top: 0;
color: $blue;
font-size: 1rem;
text-align: unset;
font-weight: 400;
}
.dark-orange {
color: $orange-a11y;
}
#social-sidebar {
a {
color: $blue;
&:hover {
color: $orange-a11y;
background-color: $grey;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
}
}
}
@include media-breakpoint-between(sm, md) {
.site-footer.grey-bg {
.logo-footer img {
max-width: 55%;
}
}
}
@include color-mode(dark) {
.site-footer {
h2,
h3,
h4,
h5,
h6,
ul li {
color: $blue;
}
}
}
/* END site-footer.scss */
<section class="site-footer grey-bg pt-5 pb-2" aria-label="Site Footer">
<div class="container">
<div class="row">
<!-- Logo Column -->
<div class="col-sm-12 col-md-4 pl-3 pt-2">
<a class="logo-footer" href="#" target="_parent">
<img alt="" class="img-fluid mb-4" src="{{path mobile}}" />
</a>
<ul class="list-unstyled">
<li class="mb-2">Main Building, Suite 4.120</li>
<li class="mb-2">The University of Texas at San Antonio</li>
<li class="mb-2">One UTSA Circle</li>
<li class="mb-2">San Antonio, TX 78249</li>
<li class="mb-2">(210) 458-4110</li>
<li class="mb-2"><a
href="mailto:your-college-email@utsa.edu"
>your-college-email@utsa.edu</a></li>
</ul>
</div>
<!-- Site Footer Content Column -->
<div class="col-sm-8 pr-3">
<h5 class="pb-2">Stay Connected to the School of Data Science</h5>
<!-- div class="col-lg global-footer-social text-xs-center text-lg-right pt-1"> -->
<div class="row pb-4" id="social-sidebar">
<div class="col-2 text-center mt-3">
<a aria-label="Label for Facebook" href="#facebook-link-goes-here">
<i
aria-hidden="true"
class="fab fa-facebook fa-2x utsa-social-circle text-center"
></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Twitter" href="#twitter-link-goes-here">
<i
aria-hidden="true"
class="fab fa-x-twitter fa-2x utsa-social-circle text-center"
></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for Instagram" href="#insta-link-goes-here">
<i
aria-hidden="true"
class="fab fa-instagram fa-2x utsa-social-circle text-center"
></i>
</a>
</div>
<div class="col-2 text-center mt-3">
<a aria-label="Label for YouTube" href="#yt-link-goes-here">
<i
aria-hidden="true"
class="fab fa-youtube fa-2x utsa-social-circle text-center"
></i>
</a>
</div>
<!-- additional icons here as needed -->
</div>
<h5>Our Philosophy</h5>
<p>We practice a Facilitator Model in which staff partner with students
to make intelligent, fair, and reasonable choices within established
state, federal, and local laws, university rules and regulations, and
the educational mission of the institution.</p>
<h5>Mission Statement</h5>
<p>Student Activities helps students and student organizations get
involved with the UTSA community through campus-wide events,
traditions, workshops, training and development opportunities to
prepare for future success.</p>
<div class="pt-4 mb-2 pb-2 row">
<div class="offset-2 col-8"><a href="#"></a></div>
</div>
</div>
</div>
</div>
</section>