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

Overview

The RFI Hero is essentially the viewport hero modified and optimized to display the RFI alongside a hero/banner image element.

Business Administration

Online Bachelor of Business Administration (BBA)

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

  • Request Information

    Fill out the form to receive:

    • Customized support services
    • Detailed program plan
    • Personalized financial aid for those who qualify
    Contact Information

    Please enter your first name.

    Please enter your last name.

    There is an error in email. Make sure your answer has:

    • An "@" symbol
    • No spaces
    • A suffix such as ".com", ".edu", etc.

    There is an error in ZIP code. Make sure your answer has only 5 digits.

    There is an error in phone number. Make sure your answer has:

    • 10 digits
    • No dashes, slashes or spaces
    • No country code (e.g. "1" for USA)
    • No numbers starting with "0" or "1"
    Program Preferences

    Do You Have Potential Transfer Credits?

    Please choose an Area of Study.

    Please choose a program.

    Please choose a degree level.

Text Content Optional

Content is optional in the RFI Hero. You can choose:

  1. No content
  2. Minimal content: H1 only
  3. Full content: School, Faux Heading, H1, and description

PHP Code Snippet

				
<figure class="hero-viewport hero-rfi">
	<section class="hero-spacer">
		<header class="hero-header hero-darken hero-justify-start">
			<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>
    </header>
	</section>
	<section class="hero-content hero-right hero-rfi-form">
		<header class="hero-header hero-darken">
			<?php include($GLOBALS["coreContentDir"] . "_forms/form-default.php"); ?>
		</header>
	</section>
</figure>
				
			

Usage

Wait on first review session.

Custom Image

RFI Hero imagery must be declared in the page using <style> tags:

				
<style>
	/* declare custom image and positioning */
	.hero-viewport.hero-rfi {
	  background-image: url(/common/images/banners/graduation-overview-test2-apu.jpg);
	  background-position: 30% 0;
	}
	@media only screen and (max-width: 800px) {
		/* declare custom image, positioning, and desired min-height */
		.hero-viewport.hero-rfi .hero-spacer:first-of-type {
			background-image: url(/common/images/banners/graduation-overview-test2-apu.jpg);
			background-position: top left;
			min-height: 300px;
		}
	}
</style>