<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">Phone: 614-292-OHIO</a></p>
<p class="bux_footer__fax"><a class="bux-link" href="tel:614-555-5555">Fax: 614-555-5555</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--Facebook">
<a class="bux-social-links__link" href="https://www.facebook.com/osu/" target="_blank">
<span class="visually-hidden">Facebook profile — external</span>
<span class="icon icon-facebook" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--Instagram">
<a class="bux-social-links__link" href="https://www.instagram.com/theohiostateuniversity/" target="_blank">
<span class="visually-hidden">Instagram profile — external</span>
<span class="icon icon-instagram" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--X">
<a class="bux-social-links__link" href="https://twitter.com/OhioState" target="_blank">
<span class="visually-hidden">X profile — external</span>
<span class="icon icon-x" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--LinkedIn">
<a class="bux-social-links__link" href="https://www.linkedin.com/school/the-ohio-state-university/" target="_blank">
<span class="visually-hidden">LinkedIn profile — external</span>
<span class="icon icon-linkedin" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--YouTube">
<a class="bux-social-links__link" href="https://www.youtube.com/user/ohiostateuniversity" target="_blank">
<span class="visually-hidden">YouTube profile — external</span>
<span class="icon icon-youtube" aria-hidden="true"></span>
</a>
</li>
<li class="bux-social-links__item bux-social-links__item--TikTok">
<a class="bux-social-links__link" href="https://www.tiktok.com/@theohiostateuniversity" target="_blank">
<span class="visually-hidden">TikTok profile — external</span>
<span class="icon icon-tiktok" aria-hidden="true"></span>
</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">
<ul>
<li class="bux_footer__link"><a class="bux-link" href="https://go.osu.edu/privacy">Privacy Statement</a></li>
<li class="bux_footer__link"><a class="bux-link" href="https://go.osu.edu/nondiscrimination-notice">Non-discrimination Notice</a></li>
<li class="bux_footer__link"><a id="ot-sdk-btn" class="ot-sdk-show-settings bux-link">Cookie Settings</a></li>
<li class="bux_footer__link"><a class="bux-link" href="#">Login</a></li>
</ul>
</div>
<div class="bux-footer__copyright">© 2025 The Ohio State University</div>
</div>
</div>
</div>
</footer>
{#
Footer
Available variables:
- background_color: Sets the color variant of the footer. Takes 'white' or
'light'.
- site_name: Name of the site
- site_name_prefix: Prefix for the site name. Optional.
- address_1: First line of address.
- address_2: Second line of address.
- city: City for address.
- state: State for address.
- zip: Zip code for address.
- contact_email: String for the email contact.
- contact_phone: String fir the phone contact number.
- contact_fax: String of the contact fax number. Optional.
- social_links: Array containing social link items
- social_link.name: String of the social media's name read by screen readers.
- social_link.icon: Machine name of the icon in the BUX Icons library.
- scoail_link.url: URL for the social media.
- login_url: Link for admin or other login needs. Optional.
- a11y_message: Overrides the default accessibility message. Optional.
#}
{% if background_color == "light" %}
{% set logo_link = "images/osu-logos/horiz/osu-horiz-gray.svg" %}
{% set link_class = "bux-link" %}
{% elseif background_color == "dark" %}
{% set logo_link = "images/osu-logos/horiz/osu-horiz-white.svg" %}
{% set link_class = "bux-link bux-link--reverse" %}
{% else %}
{% set logo_link = "images/osu-logos/horiz/osu-horiz-gray.svg" %}
{% set link_class = "bux-link" %}
{% endif %}
<footer class="bux-footer{% if background_color %} bux-footer--{{ background_color }}{% endif %}">
<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="{{ base_path ~ directory ~ bux }}/{{ logo_link }}" alt="{{ logo_alt_text | default('The Ohio State University') }}"/>
</a>
</div>
<div class="bux-footer__contact bux-footer__contact--address">
<p class="bux_footer__site-name">
{% if site_name_prefix %}
{{ site_name_prefix }}
{% endif %}
{{ site_name }}
</p>
{% if address_1 %}
<p class="bux_footer__address">{{ address_1 }}</p>
{% endif %}
{% if address_2 %}
<p class="bux_footer__address">{{ address_2 }}</p>
{% endif %}
{% if city or state or zip %}
<p class="bux_footer__address">{{ city }}, {{ state }} {{ zip }}</p>
{% endif %}
</div>
{% if contact_email or contact_phone %}
<div class="bux-footer__contact bux-footer__contact--email-phone">
<hr/>
{% if contact_email %}
<p class="bux_footer__email"><a class="{{ link_class }}" href="mailto:{{ contact_email }}">{{ contact_email }}</a></p>
{% endif %}
{% if contact_phone %}
<p class="bux_footer__phone"><a class="{{ link_class }}" href="tel:{{ contact_phone }}">Phone: {{ contact_phone }}</a></p>
{% endif %}
{% if contact_fax %}
<p class="bux_footer__fax"><a class="{{ link_class }}" href="tel:{{ contact_fax }}">Fax: {{ contact_fax }}</a></p>
{% endif %}
</div>
{% endif %}
</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">
{% include '@social-links' with social_links %}
</div>
<div class="bux-footer__fine-print">
<div class="bux-footer__ada">
{{ a11y_message | default('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>.')|raw }}
</div>
<div class="bux-footer__links">
<ul>
<li class="bux_footer__link"><a class="{{ link_class }}" href="{{ privacy_url|default('https://go.osu.edu/privacy') }}">Privacy Statement</a></li>
<li class="bux_footer__link"><a class="{{ link_class }}" href="{{ non_discrimination_url|default('https://go.osu.edu/nondiscrimination-notice') }}">Non-discrimination Notice</a></li>
<li class="bux_footer__link"><a id="ot-sdk-btn" class="ot-sdk-show-settings {{ link_class }}">Cookie Settings</a></li>
{% if login_url %}
<li class="bux_footer__link"><a class="{{ link_class }}" href="{{ login_url }}">Login</a></li>
{% endif %}
</ul>
</div>
<div class="bux-footer__copyright">© {{ 'now' | date('Y') }} The Ohio State University</div>
</div>
</div>
</div>
</footer>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
login_url: '#'
contact_fax: 614-555-5555
social_links:
'1':
name: Facebook
icon: icon-facebook
url: https://www.facebook.com/osu/
'2':
name: Instagram
icon: icon-instagram
url: https://www.instagram.com/theohiostateuniversity/
'3':
name: X
icon: icon-x
url: https://twitter.com/OhioState
'4':
name: LinkedIn
icon: icon-linkedin
url: https://www.linkedin.com/school/the-ohio-state-university/
'5':
name: YouTube
icon: icon-youtube
url: https://www.youtube.com/user/ohiostateuniversity
'6':
name: TikTok
icon: icon-tiktok
url: https://www.tiktok.com/@theohiostateuniversity
background_color: light
@mixin footer-variant(
$bg-color: $gray-light-90,
$txt-color: $gray-dark-80,
$border-color: $gray-light-60,
$link-color: $gray-dark-80,
$link-hov-color: $scarlet,
$link-hov-bg: $white,
$link-outline: $focus
) {
min-height: 200px;
padding: $sp-24 0;
background-color: $bg-color;
color: $txt-color;
.bux-link {
color: $link-color;
border-bottom: 1px solid $link-color;
&:hover {
background-color: $link-hov-bg;
color: $link-hov-color;
border-bottom-color: $link-hov-color;
}
&:focus {
outline: 2px solid $link-outline;
background-color: $link-hov-bg;
color: $link-hov-color;
}
}
hr {
border: none;
border-top: 2px solid $border-color;
margin-bottom: $sp-16;
}
.bux-footer__col--left {
margin-bottom: $sp-48;
@include breakpoint(md) {
margin-bottom: 0;
padding-right: $sp-32;
}
}
.bux-footer__col--right {
@include breakpoint(md) {
padding-left: $sp-32;
}
}
.bux-footer__logo {
margin-bottom: $sp-16;
a {
display: inline-block;
width: 270px;
@include breakpoint(md) {
width: 100%;
}
@include breakpoint(lg) {
width: 290px;
}
&:focus {
outline: 2px solid $link-outline;
}
}
}
.bux-footer__contact {
@include breakpoint(md) {
max-width: 300px;
}
p {
font-family: $sans;
font-size: $ts-sm;
margin-bottom: 0;
line-height: 1.375;
}
}
.bux-footer__contact--address {
padding-bottom: $sp-8;
margin-bottom: $sp-8;
}
.bux_footer__site-name {
font-weight: 700;
}
p.bux_footer__email,
p.bux_footer__phone,
p.bux_footer__fax {
margin: $sp-8 0;
}
.bux-footer__social {
@include breakpoint(md) {
text-align: right;
}
}
.bux-footer__fine-print {
margin-top: $sp-16;
div,
p {
font-family: $sans;
font-size: $ts-xs;
margin-bottom: 0;
}
text-align: left;
@include breakpoint(md) {
text-align: right;
}
}
.bux-footer__ada {
@include breakpoint(md) {
max-width: 400px;
float: right;
}
}
.bux-footer__links {
clear: both;
padding-top: $sp-16;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}
.bux-footer__copyright {
clear: both;
margin-top: $sp-16;
}
}
// Apply mixins per variant.
.bux-footer,
.bux-footer--light {
@include footer-variant();
}
.bux-footer--dark {
@include footer-variant($gray-dark-80, $white, $gray-dark-20, $white, $white, $gray-dark-40);
}
.bux-footer--white {
@include footer-variant($white, $gray-dark-80, $gray-light-80, $gray-dark-80, $scarlet, $gray-light-80);
border-top: 2px solid $gray-light-60;
}
//Cookie link fix
#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
color: $gray-dark-80!important;
border: none!important;
border-bottom: 1px solid $gray-dark-80!important;
padding: 0!important;
font-size: $ts-xs!important;
line-height: 1.5!important;
&:hover {
cursor: pointer;
color: $scarlet!important;
background-color: $white!important;
border-color: $scarlet!important;
}
}
{
// Fix role and keyboard barriers with cookies button
const cookieSettingsLink = document.querySelectorAll('.ot-sdk-show-settings');
Array.from(cookieSettingsLink).forEach(settingsLink => {
settingsLink.tabIndex = 0;
settingsLink.setAttribute('role', 'button');
settingsLink.addEventListener('keyup', function(e) {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault();
settingsLink.click();
}
});
});
}
No notes defined.