Site Footer

Ready

The Site Footer contains contact, privacy, accessibility, copyright information and social media links relevant to the website.

The Site Footer is required.

Branding guidelines require each website to have Ohio State branded identification.

The Site Footer validates a website as officially published by Ohio State and identifies the specific unit managing content so the user can connect with them appropriately.

The Site Footer is located at the very bottom of all webpages.

Examples

Default (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>

Grey

<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">
          © 2024 The Ohio State University
        </div>
      </div>
    </div>
  </div>
</footer>

{#
Buckeye UX - version 1.0.15
Copyright (C) 2024 The Ohio State University
#}

{# 

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 base_path ~ directory ~ bux ~ '/twig/social-links.twig' 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>

Usage

Dos

Use a Site Footer at the very bottom of every page of your Ohio State website or web application
Use a Site Footer to promote your unit's social media channels
Follow implementation guidelines below

Don’ts

Don't use if other high-priority links are needed; consider a CTA Collection above the Site Footer

Implementation Notes

The examples on this page 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 content and links included should be carefully considered, and kept to a minimum.

University-affiliated logo (required)
- By default, the Footer contains the university logo. If your unit has unit logo – made up of the Block O, full name of the university and a unit’s name – it is recommended to replace the university logo with the unit logo. Read more about unit logos
- University logo files are available within the BUX assets package that can be downloaded from the Installation page
Unit name (required)
Unit’s street address (optional)
Unit’s email address (optional)
Unit’s phone number (optional)
Social Media Links (required)
- By default, the Site Footer contains social media links to enterprise social media channels. If your unit has active social media channels, it is recommended to replace the enterprise social media links with the unit’s social media links. Use either a set of links for the enterprise or a set of links for the unit – do not mix links to enterprise and unit.
- The default Site Footer includes icons for six common social media platforms. If you need an icon for a platform not shown, use an icon from the BUX Icon Library.
Accessibility statement (required)
- Make sure to include the following statement to ensure that are users are 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
- If you have a disability and experience difficulty accessing this site, please contact us for assistance via email at [insert local appointed accessibility coordinator contact email]
- If your unit does not have a local appointed accessibility coordinator, insert ‘accessibility@osu.edu’
Privacy statement (required)
- 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.
- We suggest linking to main university privacy statement
Non-discrimination notice (required)
- 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 (optional)
- If your site has an admin login link, this is an appropriate location for it
- Public or member login links are typically placed more prominently on your site
Copyright information (required)

References

Ohio State brand guidelines: Unit Logos
U.S. Web Design System (USWDS) Footer

Examples​

Default (White)​

Grey​

Usage​

Dos​

Don’ts​

Implementation Notes​

Recommended footer elements​

References​