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 white-b-bg pt-5 pb-2">
<div class="container">
<div class="row">
<!-- Logo Column -->
<div class="col-sm-12 col-md-4 pl-3">
<a class="logo-footer" href="#" target="_parent">
<img alt="" class="img-fluid mb-4 col-11" src="https://sdstest.utsa.edu/images/utsa_sds.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 Ankle 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-section/02-navigation/05-site-ankle/site-ankle.scss */
/* BEGIN site-ankle.scss */
.site-footer.white-b-bg {
background-color: $white-b !important;
p {
margin-bottom: 1rem;
margin-top: 0;
color: $blue;
font-size: 16px;
text-align: unset;
font-weight: 400;
}
a {
color: $blue !important;
}
a:hover {
background-color: transparent !important;
}
li a:hover {
color: $orange-a11y !important;
background-color: transparent !important
}
#social-sidebar {
a {
color: $blue !important;
&:hover {
color: $orange-a11y !important;
background-color: #dbdee3;
transition: all .3s ease-in-out;
}
}
}
}
// all other styles are coming from site-footer.scss
/* END site-ankle.scss */
<section class="site-footer white-b-bg pt-5 pb-2">
<div class="container">
<div class="row">
<!-- Logo Column -->
<div class="col-sm-12 col-md-4 pl-3">
<a class="logo-footer" href="#" target="_parent">
<img alt="" class="img-fluid mb-4 col-11" src="https://sdstest.utsa.edu/images/utsa_sds.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 Ankle 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>