BUX Component Development Platform

Footer: Dark 

<footer class="bux-footer bux-footer--dark">
    <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-white.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 bux-link--reverse" href="mailto:email@osu.edu">email@osu.edu</a></p>
                <p class="bux_footer__phone"><a class="bux-link bux-link--reverse" href="tel:614-292-OHIO">Phone: 614-292-OHIO</a></p>
                <p class="bux_footer__fax"><a class="bux-link bux-link--reverse" 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--dark">
                    <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 bux-link--reverse" href="https://go.osu.edu/privacy">Privacy Statement</a></li>
                        <li class="bux_footer__link"><a class="bux-link bux-link--reverse" 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 bux-link--reverse">Cookie Settings</a></li>
                        <li class="bux_footer__link"><a class="bux-link bux-link--reverse" 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: dark
  • Content: 
    @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;
    }
}
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: src/components/footer/_footer.scss
  • Size: 3.1 KB
  • Content: 
    {
    // 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();
            }
        });
    });
}
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: src/components/footer/footer.js
  • Size: 529 Bytes

No notes defined.