Uses
All pages should have a footer. Footers are great for utility navigational elements that are difficult to find on the page or do not fit anywhere else. There are certain elements of a site that users are expected to find in the footer. These include contact information, social media links, policies, utility navigation, and copyright information.
Styles
The School of Medicine is duo-tone. Light gray (#f1f1f1) is used as the background color of the first part of the footer. Dark gray (#333333) is used as the background color of the bottom part. Divider lines are used to separate content on the top half of the footer. Text and links behave as normal on the light gray background, however, on the dark gray, links should be light gray (#dedede) in all caps.
Examples
The above shows the footer on the School of Medicine site. Note that a thick, red divider line (10px) separate the content from the footer.
Code
HTML
<![CDATA[
<div id="site-footer">
<div class="wrapper">
<div id="site-footer-top" class="clearfix">
<nav class="menu-footer-container">
<ul>
<li><a href="https://medicine.wustl.edu/directory/">Directories</a></li>
<li><a href="/maps">Maps & Directions</a></li>
<li><a href="/calendar">Calendars</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="https://medicine.wustl.edu/giving/">Giving</a></li>
</ul>
</nav>
<div id="site-social">
<a href="https://www.facebook.com/WUSTLmedicine.health"></a>
<a href="http://twitter.com/WUSTLmed"></a>
<a href="https://www.instagram.com/washumedicine/ "></a>
<a href="https://www.youtube.com/channel/UCo0fgiMWvVLEli-CF-1gKqw/feed"></a>
<a href="https://www.flickr.com/photos/wustlmedicine/"></a>
<a href="http://feeds.feedburner.com/WUSTL-Medicine-News/"></a>
</div>
</div>
<div id="site-footer-bottom" class="clearfix">
<div id="col1">
<strong>Washington University School of Medicine</strong>
<p>660 S. Euclid Ave., St. Louis, MO 63110</p>
<p>Consistently ranked a top medical school...</p>
</div>
<div id="lists">
<div id="col2">
<ul>
<li><a href="/directory/academic-departments/">Departments & Programs</a></li>
<li><a href="/directory/index/">A to Z Index</a></li>
<li><a href="/news/announcements/">Announcements</a></li>
<li><a href="http://outlook.wustl.edu/">Outlook Magazine</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="wusm-footer">
<div class="wrapper clearfix">
<div id="wusm-footer-left">
<a href="http://medicine.wustl.edu/">
<img width="147" height="31" src="wusm-logo-footer.svg" alt="logo">
</a>
<div id="copyright">
<a href="https://www.wustl.edu/policies/copyright.html">© 2018 Washington University in St. Louis</a>
</div>
</div>
<div id="wusm-footer-right">
<nav>
<a class="first-child" href="https://emergency.wustl.edu/">Emergency</a>
<a href="/policies/">Policies</a>
<a href="/news/">News</a>
</nav>
</div>
</div>
</div>
]]>
CSS
<![CDATA[
#site-footer {
background-color: #f1f1f1;
font-size: 15px;
}
#site-footer-top {
margin: 0 10px;
padding-bottom: 12px;
border-bottom: 1px solid #bcbcbc;
}
#site-footer-top nav {
float: left;
padding: 24px 0 2px;
}
#site-footer a {
color: #A51417;
}
#site-footer a:hover {
color: #717171;
}
#site-footer-top nav a {
margin-right: 40px;
}
#site-footer-top nav li {
float: left;
}
#site-footer-bottom {
margin: 0 50px 0 10px;
padding: 30px 0;
}
#site-footer-bottom #col1 {
float: left;
width: 535px;
max-width: 660px;
line-height: 24px;
}
#site-footer-bottom #col1 p {
padding-bottom: 15px;
}
#site-footer #site-footer-bottom > div:only-child {
width: auto;
max-width: none;
}
#site-footer-bottom #lists {
float: right;
}
#site-footer-bottom #col2 {
float: left;
width: 154px;
border-left: 1px solid #bcbcbc;
padding: 0 10px 0 15px;
}
#site-footer-bottom #col2 strong {
margin-bottom: 10px;
display: block;
}
#site-footer-bottom #col2 li {
margin-bottom: 10px;
}
#wusm-footer {
color: #dedede;
background-color: #333;
padding-bottom: 23px;
}
#wusm-footer a {
color: #dedede;
}
#wusm-footer-left {
float: left;
margin-left: 10px;
padding-top: 20px;
}
#wusm-footer-left a {
display: inline-block;
}
#wusm-footer-left img {
display: block;
height: 100%;
}
]]>
