Skip to main content

Site Footer

Component status:Beta
Our footer validates a site as officially from Ohio State and identifies the specific unit managing the site so the user can connect with them appropriately.

Footer Variants#

Light (default)#

<footer class="bux-footer bux-footer--light">
<div class="bux-container bux-grid bux-grid--footer">
<div class="bux-footer__col bux-footer__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
<div class="bux-footer__logo">
<a href="http://osu.edu" target="_blank">
<img src="/images/osu-logos/horiz/osu-horiz-gray.svg" alt="The Ohio State University" />
</a>
</div>
<div class="bux-footer__contact bux-footer__contact--address">
<p class="bux_footer__site-name">
Office of
Learning Relations Excellence
</p>
<p class="bux_footer__address">100 Building Name</p>
<p class="bux_footer__address">1 Oval Mall</p>
<p class="bux_footer__address">Columbus, OH 43210</p>
</div>

<div class="bux-footer__contact bux-footer__contact--email-phone">
<hr />
<p class="bux_footer__email"><a class="bux-link" href="mailto:email@osu.edu">email@osu.edu</a></p>
<p class="bux_footer__phone"><a class="bux-link" href="tel:614-292-OHIO">614-292-OHIO</a></p>
</div>

</div>

<div class="bux-footer__col bux-footer__col--right bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
<div class="bux-footer__social">
<ul class="bux-social-links bux-social-links--light">
<li class="bux-social-links__item bux-social-links__item--Twitter">
<a class="bux-social-links__link" href="https://twitter.com" target="_blank">
<span class="visually-hidden">Twitter profile — external</span>
<i class="icon icon-twitter"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Facebook">
<a class="bux-social-links__link" href="https://facebook.com" target="_blank">
<span class="visually-hidden">Facebook profile — external</span>
<i class="icon icon-facebook"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Instagram">
<a class="bux-social-links__link" href="https://instagram.com" target="_blank">
<span class="visually-hidden">Instagram profile — external</span>
<i class="icon icon-instagram"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--LinkedIn">
<a class="bux-social-links__link" href="https://linkedin.com" target="_blank">
<span class="visually-hidden">LinkedIn profile — external</span>
<i class="icon icon-linkedin"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--YouTube">
<a class="bux-social-links__link" href="https://youtube.com" target="_blank">
<span class="visually-hidden">YouTube profile — external</span>
<i class="icon icon-youtube"></i>
</a>
</li>
</ul>
</div>
<div class="bux-footer__fine-print">
<div class="bux-footer__ada">If you have a disability and experience difficulty accessing this content, please contact the Digital Accessibility Center for assistance at <a class="bux-link" href="mailto:accessibility@osu.edu">accessibility@osu.edu</a> or <a class="bux-link" href="tel:614-292-1760">614-292-1760</a>.
</div>
<div class="bux-footer__links">
<p class="bux_footer__link"><a class="bux-link" href="https://go.osu.edu/privacy">Privacy Statement</a></p>
<p class="bux_footer__link"><a class="bux-link" href="https://equity.osu.edu/sites/default/files/policy110-non-discrimination-notice.pdf">Non-discrimination Notice</a></p>
<p class="bux_footer__link"><a id="ot-sdk-btn" class="ot-sdk-show-settings bux-link">Cookie Settings</a></p>
<p class="bux_footer__link"><a class="bux-link" href="#">Login</a></p>
</div>
<div class="bux-footer__copyright">© 2022 The Ohio State University</div>
</div>
</div>
<div class="bux-footer__contact bux-footer__contact--email-phone">
<hr/>
<p class="bux_footer__email"><a class="bux-link" href="mailto:email@osu.edu">email@osu.edu</a></p>
<p class="bux_footer__phone"><a class="bux-link" href="tel:614-292-OHIO">614-292-OHIO</a></p>
</div>
</div>
<div class="bux-footer__col bux-footer__col--right bux-grid__cell bux-grid__cell--12 bux-grid__cell--6@md">
<div class="bux-footer__social">
<ul class="bux-social-links bux-social-links--light">
<li class="bux-social-links__item bux-social-links__item--Twitter">
<a class="bux-social-links__link" href="https://twitter.com" target="_blank">
<span class="visually-hidden">Twitter profile — external</span>
<i class="icon icon-twitter"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Facebook">
<a class="bux-social-links__link" href="https://facebook.com" target="_blank">
<span class="visually-hidden">Facebook profile — external</span>
<i class="icon icon-facebook"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Instagram">
<a class="bux-social-links__link" href="https://instagram.com" target="_blank">
<span class="visually-hidden">Instagram profile — external</span>
<i class="icon icon-instagram"></i>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--YouTube">
<a class="bux-social-links__link" href="https://youtube.com" target="_blank">
<span class="visually-hidden">YouTube profile — external</span>
<i class="icon icon-youtube"></i>
</a>
</li>
</ul>
</div>
<div class="bux-footer__fine-print">
<div class="bux-footer__ada">If you have a disability and experience difficulty accessing this content, please contact the Digital Accessibility Center for assistance at <a class="bux-link" href="mailto:accessibility@osu.edu">accessibility@osu.edu</a> or <a class="bux-link" href="tel:614-292-1760">614-292-1760</a>.
</div>
<div class="bux-footer__links">
<p class="bux_footer__link"><a class="bux-link" href="#">Privacy Statement</a></p>
<p class="bux_footer__link"><a class="bux-link" href="#">Non-discrimination Notice</a></p>
<p class="bux_footer__link"><a class="bux-link" href="#">Login</a></p>
</div>
<div class="bux-footer__copyright">© 2022 The Ohio State University</div>
</div>
</div>
</div>
</footer>

Dark#

<footer class="bux-footer bux-footer--dark"></footer>

# When using the dark footer be sure to also use the dark variant of Social Media Links.
<ul class="bux-social-links bux-social-links--dark"></ul>

White#

<footer class="bux-footer bux-footer--white"></footer>

# When using the white footer be sure to also use the white variant of Social Media Links.
<ul class="bux-social-links bux-social-links--white"></ul>

Implementation Notes#

The examples above include the recommended elements for a site footer. We recognize that not all websites have the same needs — some footers may not need all of the recommended elements, or have additional information that is not acknowledged here. Always be mindful that footers are instrumental in enhancing a user's experience. All included content and links should be carefully considered, and kept to a minimum.

Recommended footer elements#

  • University Logo
    • The logo files are available within the BUX assets package that can be downloaded from the Installation page.
    • If using the dark variant of the footer, be sure to use the osu-horiz-white.svg logo file.
  • Site name
  • Physical address
  • Email address and phone number
  • Social Media Links
  • Accessibility statement
    • To be compliant with our Digital Accessibility Policy, a person with a disability must be afforded the opportunity to acquire the same information, engage in the same interactions and enjoy the same services as a person without a disability in an equally effective and equally integrated manner, with substantially equivalent ease of use.
    • We suggest this link points to an email address for the appointed accessibility coordinator of your unit if one is available.
    • You can learn more about digital accessibility at Ohio State and how to implement it at the Digital Accessibility Center’s website.
  • Privacy statement
    • Ohio State values the privacy of user data and is committed to describing the ways in which that data is used. This helps Ohio State maintain a level of compliance with both internal statement and external regulations.
    • If you do not have a specific privacy statement page on your website, we suggest linking to https://go.osu.edu/privacy/.
  • Non-discrimination notice
    • We are committed to equal opportunity, affirmative action and eliminating discrimination and harassment. This commitment is both a moral imperative consistent with an intellectual community that celebrates individual differences and diversity, as well as a matter of law.
    • This link should point toward our most recent non-discrimination notice from the Office of Institutional Equity.
  • Login link
    • If your site has an admin login link, this would be a good place for it.
    • Public or member login links are typically placed more prominently on your site.
  • Copyright information