BUX Component Development Platform

Header 

<div id="masthead" class="bux-header">
    <div class="bux-container bux-grid">

        <div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
            <div class="bux-header__site-name-container">
                <div class="bux-header__site-name">
                    <a href=#>College or unit name here</a>

                </div>
            </div>
        </div>
    </div>
</div>
 
{# 

Header

Available variables:

- site_name:        String of the site's name.
- site_name_parent: String for the site parent text. Displayed above the site
                    name.
- site_name_slogan: String for the site's slogan. Displayed under the site name.
- site_home_url:    URL for the site's homepage.

#}

<div id="masthead" class="bux-header{% if background_color %} bux-header--{{ background_color }}{% endif %}">
	<div class="bux-container bux-grid">
		{# Left column. #}
		<div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
			<div class="bux-header__site-name-container">
				{% if site_name_parent  %}
					<div class="bux-header__site-name-parent">
						{{ site_name_parent }}
					</div>
				{% endif %}
				<div class="bux-header__site-name">
				{% if site_home_url %}
					<a href={{ site_home_url }}>{{ site_name }}</a>
				{% else %}
					{{ site_name }}
				{% endif %}	
				{% if site_name_slogan %}
					<div class="bux-header__site-name-slogan">
						{{ site_name_slogan }}
					</div>
				{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
 
site_name_prefix: Office of
site_name: College or unit name here
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
site_home_url: '#'
  • Content: 
    @mixin header-variant($bg-color: $white, $txt-color: $gray-dark-80, $border-color: $gray-light-40) {
	background-color: $bg-color;
	color: $txt-color;
	padding: $sp-32 0;

	.bux-header__site-name-parent,
	.bux-header__site-name-slogan {
		font-family: $sans;
		font-size: $ts-base;
		font-weight: 400;
		line-height: rem-calc(22);

		@include breakpoint(md) {
			font-size: $ts-20;
			line-height: rem-calc(26);
		}
	}

	.bux-header__site-name-parent {
		padding-bottom: $sp-4;
	}

	.bux-header__site-name-slogan {
		padding-top: $sp-4;
	}

	.bux-header__site-name,
	& a {
		color: $txt-color;
		font-family: $sans;
		font-size: $ts-md;
		font-weight: 800;
		line-height: rem-calc(30);
		text-decoration: none;
		margin-top: 0;

		@include breakpoint(md) {
			font-size: $ts-lg;
			line-height: rem-calc(40);
		}
	}
}

// Apply mixins per variant.
.bux-header,
.bux-header--white {
	@include header-variant();
}

.bux-header--dark {
	@include header-variant($gray-dark-80, $white);
}
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: src/components/header/_header.scss
  • Size: 984 Bytes

No notes defined.