<?xml version="1.0" encoding="UTF-8"?>
<?pcf-stylesheet path="/_resources/xsl/interior.xsl" title="PHP" extension="php"?>

<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

<document xmlns:ouc="http://omniupdate.com/XSL/Variables">

	<headcode></headcode>	<!-- before closing head tag -->
	<bodycode></bodycode>	<!-- after opening body tag -->
	<footcode></footcode>	<!-- before closing body tag -->
	<ouc:info>
		<tcf><!--%echo var="tcfname" --></tcf>
		<tmpl>interior.tmpl</tmpl>
	</ouc:info>

	<ouc:properties label="metadata">
		<title><!--%echo var="title" --></title>
		<meta name="Description" content="<!--%echo var='description' -->" />
		<meta name="Keywords" content="<!--%echo var='keywords' -->" />
	</ouc:properties>

	<ouc:properties label="config">
		<parameter name="heading" type="text" group="Everyone" prompt="Page Heading" alt="Please enter the page heading."><!--%echo var="title" --></parameter>
		<parameter name="orbitron" type="checkbox" group="Everyone" prompt="Orbitron Font" alt="Check to change the heading font to Orbitron.">
			<option value="yes" selected="false"></option>
		</parameter>
		<parameter name="breadcrumb" type="text" group="Everyone" prompt="Custom Breadcrumb" alt="Default is Page Heading. This is not used on index pages."></parameter>

		<parameter section="Hero Configuration" name="hero-img" type="filechooser" path="/_resources/images/" source="staging" dependency="yes" group="Everyone" prompt="Hero Image" alt="If no image is provided, a heading-only banner will display."><!--%echo var='hero-img' --></parameter>
		<parameter name="hero-toggle" type="checkbox" group="Everyone" prompt="Hero Toggle" alt="Check whether you want the hero to display.">
			<!--%echo var="hero-layout" encoding="none" -->
		</parameter>

		<parameter section="Layout Options" name="page-layout" type="checkbox" group="Everyone" prompt="Side Content" alt="Changes the page to a 2-column layout.">
			<!--%echo var="page-layout" encoding="none" -->
		</parameter>

		<parameter section="Contact Card" name="contact-card" type="checkbox" group="Everyone" prompt="Contact Card Toggle" alt="Check whether you want the Contact Card to display. Must be in 2 Column Layout.">
			<!--%echo var="contact-card" encoding="none" -->
		</parameter>
		<parameter name="name" type="text" group="Everyone" prompt="Name" alt="Please enter the name for the contact card.">First Last</parameter>
		<parameter name="contact-title" type="text" group="Everyone" prompt="Title" alt="Please enter the title of the person.">Title</parameter>
		<parameter name="email" type="text" group="Everyone" prompt="Email" alt="Please enter the email for the person.">email@uci.edu</parameter>
		<parameter name="phone" type="text" group="Everyone" prompt="Phone" alt="Please enter the phone for the person.">555-555-5555</parameter>
	</ouc:properties>

	<ouc:div label="main-content" group="Everyone" button-text="Main Content"><ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="main-content"/>
		<table data-snippet="ou-icon-2-cards"><caption class="mceNonEditable">Icon Cards with Background</caption>
			<thead>
				<tr>
					<th class="mceNonEditable">Background Image</th>
					<th class="mceNonEditable">Title</th>
				</tr>
				<tr>
					<td data-type="image">
						<p><img src="{{f:74078988}}" alt="Placeholder image" /></p>
					</td>
					<td data-type="heading">
						<p>Cards With Background Image</p>
					</td>
				</tr>
				<tr>
					<th class="mceNonEditable">Icon</th>
					<th class="mceNonEditable">Card Content</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-select-list="icons">thumbs-up</td>
					<td data-type="wysiwyg">
						<h2>150 Years</h2>
						<p>of Academic Excellence</p>
					</td>
				</tr>
				<tr>
					<td data-select-list="icons">hand-holding-heart</td>
					<td data-type="wysiwyg">
						<h2>18.8</h2>
						<p>Average On-Campus Class Size</p>
					</td>
				</tr>
			</tbody>
		</table>
	</ouc:div>

	<ouc:div label="additional-content" group="Everyone" button-text="Full Width Content"><ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" wysiwyg-class="additional-content"/>
		<table data-snippet="ou-var-column"><caption class="mceNonEditable">Responsive Cards</caption>
			<tbody>
				<tr>
					<th class="mceNonEditable">Background Color</th>
					<th class="mceNonEditable">Image (Recommended Image Size: 1200 x 700 px )</th>
					<th class="mceNonEditable">Card Heading</th>
					<th class="mceNonEditable">Card Content</th>
				</tr>
				<tr data-name="item">
					<td data-name="bg-color" data-select-list="gray,white">white</td>
					<td colspan="2" data-name="card-img" data-type="image"><img src="{{f:74079010}}" alt="placeholder" width="900" height="600" /></td>
					<td data-name="heading" data-type="text">Heading</td>
					<td colspan="2" data-name="content" data-type="wysiwyg">
						<p class="card-text">Cras tincidunt lectus ac quam ultrices posuere. Duis pretium commodo risus vel posuere. Sed elit dolor, dapibus vel sapien vel, rutrum malesuada diam...</p>
						<p class="card-text"><a class="btn btn-default btn-highlight" href="#1">CTA</a></p>
					</td>
				</tr>
				<tr data-name="item">
					<td data-name="bg-color" data-select-list="gray,white">gray</td>
					<td colspan="2" data-name="card-img" data-type="image"><img src="{{f:74079009}}" alt="placeholder" width="1095" height="730" /></td>
					<td data-name="heading" data-type="text">Heading</td>
					<td colspan="2" data-name="content" data-type="wysiwyg">
						<p class="card-text">Cras tincidunt lectus ac quam ultrices posuere. Duis pretium commodo risus vel posuere. Sed elit dolor, dapibus vel sapien vel, rutrum malesuada diam...</p>
						<p class="card-text"><a class="btn btn-default btn-highlight" href="#1">CTA</a></p>
					</td>
				</tr>
			</tbody>
		</table>

		<table data-snippet="ou-var-column"><caption class="mceNonEditable">Responsive Cards</caption>
			<tbody>
				<tr>
					<th class="mceNonEditable">Background Color</th>
					<th class="mceNonEditable">Image (Recommended Image Size: 1200 x 700 px )</th>
					<th class="mceNonEditable">Card Heading</th>
					<th class="mceNonEditable">Card Content</th>
				</tr>
				<tr data-name="item">
					<td data-name="bg-color" data-select-list="gray,white">white</td>
					<td colspan="2" data-name="card-img" data-type="image"><img src="{{f:74079010}}" alt="placeholder" width="900" height="600" /></td>
					<td data-name="heading" data-type="text">
						<p>First-time Freshman</p>
					</td>
					<td colspan="2" data-name="content" data-type="wysiwyg">
						<ul>
							<li><a href="#">Admission Requirements</a></li>
							<li><a href="#">Deadlines for Admission</a></li>
							<li><a href="#">New Student Orientation</a></li>
							<li><a href="#">Request Information</a></li>
						</ul>
					</td>
				</tr>
				<tr data-name="item">
					<td data-name="bg-color" data-select-list="gray,white">white</td>
					<td colspan="2" data-name="card-img" data-type="image"><img src="{{f:74079012}}" alt="placeholder" width="900" height="600" /></td>
					<td data-name="heading" data-type="text">
						<p>Graduate</p>
					</td>
					<td colspan="2" data-name="content" data-type="wysiwyg">
						<ul>
							<li><a href="#">Admission Requirements</a></li>
							<li><a href="#">Deadlines for Admission</a></li>
							<li><a href="#">New Student Orientation</a></li>
							<li><a href="#">Request Information</a></li>
						</ul>
					</td>
				</tr>
				<tr data-name="item">
					<td data-name="bg-color" data-select-list="gray,white">white</td>
					<td colspan="2" data-name="card-img" data-type="image"><img src="{{f:74079011}}" alt="placeholder" width="600" height="400" /></td>
					<td data-name="heading" data-type="text">International</td>
					<td colspan="2" data-name="content" data-type="wysiwyg">
						<ul>
							<li><a href="#">Admission Requirements</a></li>
							<li><a href="#">Deadlines for Admission</a></li>
							<li><a href="#">New Student Orientation</a></li>
							<li><a href="#">Request Information</a></li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table> 

		<table data-snippet="ou-two-grid"><caption class="mceNonEditable">2 Column Content</caption>
			<thead>
				<tr>
					<th class="mceNonEditable">Heading</th>
					<td data-type="heading">&nbsp;</td>
				</tr>
				<tr>
					<th class="mceNonEditable">&nbsp;</th>
					<th class="mceNonEditable">Column Two</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-name="one" data-type="wysiwyg">
						<ouc:component name="ou-news-block">
	<h3>This is an example output.</h3>
	<div data-ouc-test="Campus News" class="news-events-header">
		<h4>Campus News</h4>
	</div>

	<div class="row">
		<div class="col-lg-6">
			<div class="card">
				<a href="#/">
					<div>
						<div class="card-img-top-small" style="background-image: url('/_resources/images/placeholders/news-1.jpg');">
						</div>
					</div>
					<div class="card-body">
						<h3>News Title 1</h3>
						<p>This is a test article</p>
					</div>
				</a>
			</div>
		</div>
		<div class="col-lg-6">
			<div class="card">
				<a href="#/">
					<div>
						<div class="card-img-top-small" style="background-image: url('/_resources/images/placeholders/news-2.jpg');">
						</div>
					</div>
					<div class="card-body">
						<h3>News Title 2</h3>
						<p>This is a test article</p>
					</div>
				</a>
			</div>
		</div>
	</div>

	<div data-ouc-test="{{f:74074823}}" class="news-events-footer">
		<a href="{{f:74074823}}" target="_blank" class="news">
			View All News
			<span class="fa fa-arrow-right"></span>
		</a>
	</div>
	<div style="display:none;" data-name="news-data">
		<heading>Campus News</heading>
		<featured></featured>
		<tags></tags>
		<filtering></filtering>
		<cats></cats>
		<href>{{f:74074823}}</href>
		<categories></categories>
		<years></years>
		<target>_blank</target>
		<link-text>View All News</link-text>
	</div>

</ouc:component> 
					</td>
					<td data-name="two" data-type="wysiwyg">
						<ouc:component name="ou-events">
	<div class="events">
		<div class="news-events-header">
			<h4>Events</h4>
		</div>
		<div class="event-item">
			<div class="event-date">
				<div class="event-date-bg">
					<span class="event-month">Jul</span>
					<span class="event-day">10</span>
					<span class="year">2025</span>
				</div>
			</div>
			<div class="event-text">
				<div class="event-item-time-location"><span class="time">5:00 PM</span> <span class="location">Location</span></div>
				<div class="event-item-header">
					<h3><a class="event-title" href="#/">Example Event 1</a></h3>
				</div>
				<div class="event-item-copy">
					<p>This is an example event</p>
				</div>
			</div>
		</div>
		<div class="event-item">
			<div class="event-date">
				<div class="event-date-bg">
					<span class="event-month">Jul</span>
					<span class="event-day">10</span>
					<span class="year">2025</span>
				</div>
			</div>
			<div class="event-text">
				<div class="event-item-time-location"><span class="time">5:00 PM</span> <span class="location">Location</span></div>
				<div class="event-item-header">
					<h3><a class="event-title" href="#/">Example Event 2</a></h3>
				</div>
				<div class="event-item-copy">
					<p>This is an example event</p>
				</div>
			</div>
		</div>
		<div class="event-item">
			<div class="event-date">
				<div class="event-date-bg">
					<span class="event-month">Jul</span>
					<span class="event-day">10</span>
					<span class="year">2025</span>
				</div>
			</div>
			<div class="event-text">
				<div class="event-item-time-location"><span class="time">5:00 PM</span> <span class="location">Location</span></div>
				<div class="event-item-header">
					<h3><a class="event-title" href="#/">Example Event 2</a></h3>
				</div>
				<div class="event-item-copy">
					<p>This is an example event</p>
				</div>
			</div>
		</div>

		<div class="news-events-footer">
			<a href="{{f:74111790}}" target="_blank" class="news">
				View All Events
				<span class="fa fa-arrow-right"></span>
			</a>
		</div>
	</div>
	<div style="display:none;" data-name="events-data">
		<heading>Events</heading>
		<count>3</count>
		<calendar></calendar>
		<featured></featured>
		<categories></categories>
		<filtering></filtering>
		<href>{{f:74111790}}</href>
		<target>_blank</target>
		<link-text>View All Events</link-text>
	</div>

</ouc:component> 
					</td>
				</tr>
			</tbody>
		</table></ouc:div>

</document>
