LP6 Style Guide: Hero Banners page Template = lp6-docs

Note: The Style Guide layout is not optimized to display the native behavior of hero banners which are intended to always be full-width of the viewport. Toggle the Full-Width demo (see top nav) for exact responsive behavior.

Viewport Hero

Next: Fixed Aspect Ratio Hero ›

Left-Aligned Justify-Start Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Left Top -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-start hero-left">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Left-Aligned Justify-Center Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Left Center -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-left">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Left-Aligned Justify-End Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Left Bottom -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-end hero-left">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Center-Aligned Justify-Start Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Center Top -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-start">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Center-Aligned Justify-Center Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Center Center -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Center-Aligned Justify-End Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Center Bottom -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-end">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Right-Aligned Justify-Start Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Right Top -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-start hero-right">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Right-Aligned Justify-Center Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Right Center -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-right">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Right-Aligned Justify-End Back to Top

Online Degrees & Certificates inDegree Name

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

Request Information

HTML Code Snippet

					
	<!-- Viewport Hero: Right Bottom -->
	<figure class="hero-viewport">
		<section class="hero-spacer"></section>
		<section class="hero-content hero-justify-end hero-right">
			<header class="hero-header hero-darken">
				<h1 class="hero-title">
					<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
					<span class="nowrap">Degree Name</span>
				</h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<?php rfiButton("button-primary"); ?>
			</header>
		</section>
		<section class="hero-spacer"></section>
	</figure>

Fixed Aspect Ratio Hero

‹ Previous: Viewport Hero | Next: Video Hero ›

Left-Aligned Top Back to Top

Online Degrees & Certificates in Degree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Left Top -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-left hero-justify-start">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Left-Aligned Center Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Left Center -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-left">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Left-Aligned Bottom Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Left Bottom -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-left hero-justify-end">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Center-Aligned Top Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Center Top -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-justify-start">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Center-Aligned Center Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Center Center -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Center-Aligned Bottom Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Center Bottom -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-justify-end">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Right-Aligned Top Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Right Top -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-right hero-justify-start">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Right-Aligned Center Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Right Center -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-right">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Right-Aligned Bottom Back to Top

Online Degrees & Certificates inDegree Name

American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.

Request Information

HTML Code Snippet

					
	<!-- Fixed Aspect Ratio Hero: Right Bottom -->
	<figure class="hero-fixed">
		<img class="hero-image" src="/common/images/banners/image.jpg">
		<section class="hero-container">
			<section class="hero-spacer"></section>
			<section class="hero-content hero-right hero-justify-end">
				<div class="hero-darken">
					<header class="hero-header">
						<h1 class="hero-title">
							<span class="degreeType"><?php print $GLOBALS["degreeType"]; ?> in</span>
							<span class="nowrap">Degree Name</span>
						</h1>
						<p class="hero-text">American Military University is a leader in providing career-relevant education in accounting. And each accounting degree is completed entirely online.</p>
						<?php rfiButton("button-primary"); ?>
					</header>
				</div>
			</section>
			<section class="hero-spacer"></section>
		</section>
	</figure>

Video Hero

‹ Previous: Fixed Aspect Ratio Hero | Next: Creative Hero ›

Video-Only Hero

					
	<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy"; //the Wistia movie ID
		include($GLOBALS["coreContentDir"]."_includes/bannerloop.php"); //the standard video hero include
	?>

Video Hero with Text Overlay (and RFI)

PHP Code Snippet

					
	<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy";
		$caption = "<h1 class='degreeType'>ONLINE " . $myTitle . "</h1>";
		$padTop = "42"; // padding top percent (line 19): 42
		$posBottom = "19";// position bottom percent (line 24): 19
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline.php"); //the video hero include with caption and RFI
	?>

Video Banner with Text Overlay (No RFI)

PHP Code Snippet

					
	<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy";
		$caption = "<h1 class='degreeType'>ONLINE " . $myTitle . "</h1>";
		$padTop = "42"; // padding top percent (line 19): 42
		$posBottom = "19";// position bottom percent (line 24): 19
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline-no-rfi.php"); //the video hero include with caption an NO RFI
	?>

Video Banner with Custom-Sized Text Overlay

PHP/JS/CSS Code Snippet

					
	<?php
		// Add to the php tag at the top of a page or in a new tag.
		$movieID = "bz6cluulhy";
		$caption = "<h1 class='degreeType'>School of Arts, Humanities, and Education</h1>";
		$padTop = "42"; // padding top percent (line 19): 42
		$posBottom = "19";// position bottom percent (line 24): 19
		include($GLOBALS["coreContentDir"]."_includes/bannerloop-large-headline-no-rfi.php"); //select the bannerloop-large-headline include with or without RFI
	?>
	<!-- FlowType JS include and controls  -->
	<script type="text/javascript" src="/common/js/flowtype.js"></script>
	<script>
	$(function(){
		$('h1').flowtype({
			 minimum   : 320, //adjust for best responsiveness in QA
			 maximum   : 1440, //adjust for best responsiveness in QA
			 minFont   : 14, //adjust for best responsiveness in QA
			 maxFont   : 36, //adjust for best responsiveness in QA
			 fontRatio : 11.125 //adjust for best responsiveness in QA
		});
	});
	</script>
	<!-- In-page CSS for flexbox <figcaption>  -->
	<style>
	.banner.loopVid {
		background-color: #000; //fix for mobile when video doesn't fill space and background peeks through
	}
	.loopVid figcaption {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}
	.loopVid figcaption h1 {
		flex: 0 1 auto;
		margin: 0;
		text-align: center;
	}
	.loopVid figcaption a {
		flex: 0 auto;
		margin: 0;
		text-align: center;
	}
	</style>

Notes

  • Uses flowtype.js in /common/js/
  • Adjust flowtype control script values via QA/experimentation for best results (text length dependent)
  • Requires in-page css to convert figcaption to flexbox

Video Banner Full-width Overlay

Creative Hero

‹ Previous: Video Hero | Next: Usage ›

Creative Hero: Default (mimics Public Web)

Business Administration

Online Bachelor of Business Administration (BBA)

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

HTML Snippet

					
	<figure class="hero-viewport hero-creative">
	  <section class="hero-spacer"></section>
	  <section class="hero-content hero-justify-start hero-right">
	    <header class="hero-header">
				<span class="hero-school"><a href="#" rel="tag">School of Business</a></span>
				<span class="hero-program">Business Administration</span>
	      <h1 class="hero-title"><span class="nowrap">Online Bachelor of Business Administration (BBA)</span></h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<div>
					<a href="#" class="button button-tertiary">Apply Now</a><?php rfiButton("button-primary invert"); ?>
				</div>
	    </header>
	  </section>
	  <section class="hero-spacer"></section>
	</figure>

Creative Hero: Full-Width Overlay

Business Administration

Online Bachelor of Business Administration (BBA)

Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.

HTML Snippet

					
	<figure class="hero-viewport hero-creative">
	  <section class="hero-content hero-content-full">
	    <header class="hero-header">
				<span class="hero-school"><a href="#" rel="tag">School of Business</a></span>
				<span class="hero-program">Business Administration</span>
	      <h1 class="hero-title"><span class="nowrap">Online Bachelor of Business Administration (BBA)</span></h1>
				<p>Description paragraph. Caffeine coffee capuccino espresso breve bold medium roast blonde macchiato latte foam.</p>
				<div>
					<a href="#" class="button button-tertiary">Apply Now</a><?php rfiButton("button-primary invert"); ?>
				</div>
	    </header>
	  </section>
	</figure>

Notes

For the Creative Hero, you'll want to include override background styles in the page to set the appropriate image, position, height, etc. Creative Hero uses a linear gradient on the background to darken/lighten image for text readability. The .hero-darken class can also be applied to the figure section if desired (in conjunction with or in place of the linear-gradient). Also note that for the full-width example, the width of the content expands according to the length of all text/content elements. To constrain content, inline styles should be applied to set a max-width and auto margins.

					
/* Custom background styles */
.hero-viewport.hero-creative {
	background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0.3)), url(/common/images/banners/filename.jpg);
	background-position: center center; /* default is center center */
	background-size: cover; /* default is cover, probably don't want to change */
	background-repeat: no-repeat; /* default is no-repeat, probably don't want to change */
	height: 600px; /* default height is 600px */
}
/* Constrain width */
.hero-creative .hero-content.hero-content-full .hero-header {
  max-width: 900px; /* just a suggestion */
  margin-right: auto;
  margin-left: auto;
}

Usage

‹ Previous: Creative Hero | Next: Modifiers ›

General Guidance

The application of hero images can spruce up the design of a web page while also building depth into page content. The best examples tell stories and connect with the viewer. Hero images are one of the fastest ways to grab a user’s attention. Bold, relevant imagery helps to engage the user. It draws them in immediately and provides a perfect centerpiece for introductory copy and calls to action.

Accessibility

Viewport Hero Accessibility

For sanity's sake we consider the Viewport Hero to be a decorative image. See more about decorative images below.

Fixed Aspect Ratio Hero Accessibility

Since the FAR Hero contains an actual img element, always make sure the image includes alt text. If the image is purely decorative and doesn't add information to the content of a page, a null (empty) alt text should be provided alt="" so that they can be ignored by assistive technologies, such as screen readers. . For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

Video Hero Accessibility

Currently dependent on Wistia. We do enclose the video embed in a figure with a figcaption though.

PHP Functions and Variables

Dynamic Brand Names

You can dynamically include the full university brand name or the university brand acronym in hero captions using these PHP functions.

					
	<!-- Full Brand Name "long" -->
	<?php returnBrand($GLOBALS["brand"], "long") ?>
	<!-- Brand Acronym "short" -->
	<?php returnBrand($GLOBALS["brand"], "short") ?>

RFI Button Function

You can dynamically insert an RFI overlay button using the php below. This function checks the URL for the program name and level (per our standard naming structure) and echoes a button-styled anchor with data attributes using those URL values to control the preselection of degree level and type in the RFI. Simply supply the desired button classes as the function parameter.

					
	<!-- Function / Note the the text in quotes are button css classes. -->
	<?php rfiButton("button-primary"); ?>

	<!-- What it actually does (FYI) -->
	echo 's<a id="lp5_rfi_overlay" class="rfi-overlay-button button button-primary' . $a . '" title="Request Information" data-level="' . $levelSelect . '" data-program="' . $rfiSelect . '" href="#rfi-off-canvas">Request Information</a>';

JS for Fixed Aspect Ratio Hero

Because this hero banner involves absolutely positioning an image within its parent to overlay a sibling section containing text content, javascript is necessary to dynamically control the height of the sibling section. We add scripts to calculate this height on load and on resize.

					
	$(window).load(function () {
	  //resize container to fit img on load
	  if($(window).width() > 620) {
	    $('.hero-container').height($('.hero-fixed img').height());
	  }
	  else {
	    $('.hero-container').height("auto");
	  }
	})
	$(document).ready(function() {
	  //resize container to fit img on resize event
	  $(window).on('resize', function(){
	    if($(window).width() > 620) {
	      $('.hero-container').height($('.hero-fixed img').height());
	    }
	    else {
	      $('.hero-container').height("auto");
	    }
	  });
	});

Video Variables

Video hero banners can be supplied with a number of optional php variables, including the $movieID, $caption, $padTop and $posBottom.

					
	$movieID = "bz6cluulhy";
	$caption = "<h1 class='degreeType'>School of Arts, Humanities, and Education</h1>";
	$padTop = "42"; // padding top percent: 42
	$posBottom = "19";// position bottom percent: 19

Modifiers

‹ Previous: Usage

Modifiers are extra classes used to modify the appearance, alignment, size, behavior etc. of standard component styles.

Viewport and Fixed Aspect Ratio Hero Modifiers

Name Class Usage/Properties
Hero Image Left Alignment .hero-img-left background-position: top left

Overrides default center center background-image position. This class applies to the figure element.
Hero Image Right Alignment .hero-img-right background-position: top right

Overrides default center center background-image position. This class applies to the figure element.
Hero Content Justify Start (Top Alignment) .hero-justify-start justify-content: flex-start

Overrides default vertical center position. This class applies to the .hero-content element.
Hero Content Justify End (Bottom Alignment) .hero-justify-end justify-content: flex-end

Overrides default vertical center position. This class applies to the .hero-content element.
Hero Content Left Alignment .hero-left order: -1

Overrides default horizontal center position. This class applies to the .hero-content element, and visibly reorders it left one position.
Hero Content Right Alignment .hero-right order: 2

Overrides default horizontal center position. This class applies to the .hero-content element, and visibly reorders it right one position.
Hero Content Text Align Center .hero-content-align-center text-align: center

Overrides default left alignment of text. This class applies to the .hero-content element. Can optionally be applied to child elements as well.
Hero Content Text Align Right .hero-content-align-right text-align: right

Overrides default left alignment of text. This class applies to the .hero-content element. Can optionally be applied to child elements as well.
Hero Content Sizing: One-Half .hero-content-one-half flex-basis: 50%

Overrides default hero content size. This class applies to the .hero-content element.
Hero Content Sizing: Two-Third .hero-content-two-third flex-basis: 66.666%

Overrides default hero content size. This class applies to the .hero-content element.
Hero Content Sizing: Three-Fourth .hero-content-three-fourth flex-basis: 75%

Overrides default hero content size. This class applies to the .hero-content element.
Hero Content Sizing: Full-Width .hero-content-full flex-basis: 100%

Overrides default hero content size. This class applies to the .hero-content element.
Hero Dark Overlay .hero-darken color: var(--color-sec-white) background: rgba(0,0,0,0.5)

Adds 50% black opacity overlay to increase readability through color contrast. This class applies to the .hero-header element by default for the Viewport Hero and the div element for the Aspect Ratio Hero. Can also be optionally applied to the .hero-content element for the Viewport Hero to create a full-height overlay.
Hero Light Overlay .hero-lighten color: var(--color-sec-black) background: rgba(255,255,255,0.5)

Adds 50% white opacity overlay to increase readability through color contrast. This class applies to the .hero-header element by default for the Viewport Hero and the div element for the Aspect Ratio Hero. Can also be optionally applied to the .hero-content element for the Viewport Hero to create a full-height overlay.
Hero Content No Padding .hero-content-no-padding padding: 0

Removes padding around hero content area. This class applies to the .hero-content element.
Hero Content Full Height .hero-content-full-height flex-direction: row

Changes flex-direction from column to row so that the hero-content section spans full height of hero figure. This class applies to the .hero-content element.
Video Hero Content Sizing: Full-Width Overlay .video-overlay-full text-align: center width: 100%

Overrides default video hero overlay caption size. This class applies to the figcaption element.