Elements

Row Item w/ Image

Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.

Learn More

Row Item w/ Image Code


<div class="router-container">
<ul class="router-row">
<li class="row">
<div class="router-row-inner">
<div class="row">
<div class="image-container"><img alt="/" src="http://placehold.it/400x300" 
title="/" />
</div>
<div class="text-container">
<h4>Row Item w/ Image</h4>
<p>Vestibulum id ligula porta felis euismod semper. 
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur 
purus sit amet fermentum.</p>
<a alt="/" class="more-link" href="/" title="/">Learn More</a></div>
</div>

Row Item w/ No Image

Vestibulum id ligula porta felis euismod semper. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
Learn More

Row Item w/ No Image Code


<li class="row">
<div class="router-row-inner">
<div class="row">
<div class="text-container full-width">
<h4>Row Item w/ No Image</h4>
<p>Vestibulum id ligula porta felis euismod semper. 
Etiam porta sem malesuada magna mollis euismod. 
Cras mattis consectetur purus sit amet fermentum.</p>
<a alt="/" class="more-link" href="/" title="/">Learn More</a></div>
</div>
</div>
</li>
</ul>
</div>

Inbody Island

Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.

Inbody Island Code


<div class="inbody-island">
<div class="island-inner">
<div class="row">
<div class="island-header">
<h4 class="island-title">Inbody Island</h4>
</div>
<div class="island-left">
<ul>
<li><a alt="" href="/" title="">Bulleted Link</a></li>
<li><a alt="" href="/" title="">Bulleted Link</a></li>
<li><a alt="" href="/" title="">Bulleted Link</a></li>
<li><a alt="" href="/" title="">Bulleted Link</a></li>
</ul>
<ul class="clean">
<li><a alt="" class="more-link" href="/" title="">More Links</a></li>
<li><a alt="" class="more-link" href="/" title="">More Links</a></li>
<li><a alt="" class="more-link" href="/" title="">More Links</a></li>
<li><a alt="" class="more-link" href="/" title="">More Links</a></li>
</ul>
</div>
<div class="island-right">
<p>Sed posuere consectetur est at lobortis. 
Cras mattis consectetur purus sit amet fermentum. 
Vestibulum id ligula porta felis euismod semper.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec sed odio dui. Aenean lacinia 
bibendum nulla sed consectetur.</p>
</div>
</div>
</div>
</div>

Island Contact

Name Goeshere Tilehere Some else about this person.

Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur.

Island Contact Code


<div class="inbody-island">
<div class="island-inner island-contact">
<div class="row">
<div class="island-header">
<h4 class="island-title">Island Contact</h4>
</div>
<div class="island-left"><img src="../assets/images/default_profile.jpg" /> 
<span class="name">Name Goeshere</span> 
<span class="title">Tilehere</span> 
<span class="contact-other">Some else about this person.</span></div>
<div class="island-right">
<p>Sed posuere consectetur est at lobortis. Cras mattis consectetur 
purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec sed odio dui. Aenean lacinia bibendum 
nulla sed consectetur.</p>
</div>
</div>
</div>
</div>

Profile Grid

Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Profile Grid Code


<div class="directory">
<div class="profile-grid">
<ul>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span> 
<span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, 
vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span> 
<span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, 
vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span> 
<span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, 
vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span> 
<span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, 
vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
</ul>
</div>

Profile Row

Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.
Person Name Position Title
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.

Profile Row Code


<div class="directory">
<div class="profile-row">
<ul>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span>
 <span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span> 
<span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span>
 <span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
<li>
<div class="profile">
<div class="profile-image"><img src="../assets/images/default_profile.jpg" /></div>
<div class="profile-text"><span class="name">Person Name</span>
 <span class="title">Position Title</span>
<p class="blurb">Morbi leo risus, porta ac consectetur ac, vestibulum at eros. 
Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

Calendar

Calendar Code


<div class="calendar">
<ul class="row clean">
<li class="cal-list-item">
<div class="cal-date blue">
<div class="date-inner"><span class="date-month">Jan</span> 
<span class="date-large">23</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title=""> 
<span class="cal-title">Consectetur Lorem Ridiculus</span>
 <span class="cal-location">Main Lecture Hall</span> 
<span class="cal-time">12:00 PM - 2:00 PM</span> 
<span>Donec id elit non mi porta gravida at eget metus. Donec id elit 
non mi porta gravida at eget metus. Praesent commodo cursus magna, 
vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna 
mollis euismod.</span>
 </a><a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a></div>
</div>
<!--cal-body--></li>
<li class="cal-list-item">
<div class="cal-date red">
<div class="date-inner"><span class="date-month">Feb</span> 
<span class="date-large">15</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title=""> 
<span class="cal-title">Sem Dapibus Parturient Tellus</span> 
<span class="cal-location">Main Lecture Hall</span> 
<span class="cal-time">12:00 PM - 2:00 PM</span> 
<span>Etiam Sem Fusce Venenatis Vulputate</span> </a>
<a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a></div>
</div>
<!--cal-body--></li>
<li class="cal-list-item">
<div class="cal-date blue">
<div class="date-inner"><span class="date-month">Mar</span>
 <span class="date-large">1</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title=""> 
<span class="cal-title">Consectetur Lorem Ridiculus</span> 
<span class="cal-location">Main Lecture Hall</span>
 <span class="cal-time">12:00 PM - 2:00 PM</span> 
<span>Donec id elit non mi porta gravida at eget metus. Donec id elit 
non mi porta gravida at eget metus. Praesent commodo cursus magna,
 vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna
 mollis euismod.</span> </a>
<a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a></div>
</div>
<!--cal-body--></li>
<li class="cal-list-item">
<div class="cal-date red">
<div class="date-inner"><span class="date-month">Apr</span> 
<span class="date-large">5</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title=""> 
<span class="cal-title">Sem Dapibus Parturient Tellus</span> 
<span class="cal-location">Main Lecture Hall</span> 
<span class="cal-time">12:00 PM - 2:00 PM</span> 
<span>Etiam Sem Fusce Venenatis Vulputate</span> </a>
<a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a></div>
</div>
<!--cal-body--></li>
<li class="cal-list-item">
<div class="cal-date blue">
<div class="date-inner"><span class="date-month">May</span>
 <span class="date-large">7</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title=""> 
<span class="cal-title">Consectetur Lorem Ridiculus</span> 
<span class="cal-location">Main Lecture Hall</span> 
<span class="cal-time">12:00 PM - 2:00 PM</span> <span>Donec id elit non mi porta
 gravida at eget metus. Donec id elit non mi porta gravida at eget metus.
 Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
Etiam porta sem malesuada magna mollis euismod.</span> 
</a><a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a>
</div>
</div>
<!--cal-body--></li>
<li class="cal-list-item">
<div class="cal-date blue">
<div class="date-inner"><span class="date-month">Jun</span> 
<span class="date-large">11</span></div>
</div>
<a alt="" href="/" title=""><!--cal-time--> </a>
<div class="cal-body"><a alt="" href="/" title=""> </a>
<div class="body-inner"><a alt="" href="/" title="">
 <span class="cal-title">Sem Dapibus Parturient Tellus</span> 
<span class="cal-location">Main Lecture Hall</span> 
<span class="cal-time">12:00 PM - 2:00 PM</span> 
<span>Etiam Sem Fusce Venenatis Vulputate</span> </a>
<a alt="/" class="more-link" href="/event-item.html" title="/">Register Today</a></div>
</div>
<!--cal-body--></li>
</ul>

Accordian

Accordion Title 1

Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.
Accordion Title 2

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Accordion Title 3

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Accordian Code


<div class="row">
<div class="accordion-closed-default">
<ul class="accordion-container">
<li>
<h4 aria-controls="panel1" class="accordion accordian-title" 
id="accordion1" tabindex="0">Accordion Title 1</h4>
<div aria-labeledby="accordion1" class="panel accordion-content" id="panel1">
<div class="panel-inner">
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
ut fermentum massa justo sit amet risus.</p>
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed 
consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<!--panel-inner--></div>
</li>
<li>
<h4 aria-controls="panel2" class="accordion accordian-title"
id="accordion2" tabindex="-1">Accordion Title 2</h4>
<div aria-labeledby="accordion2" class="panel accordion-content" 
id="panel2">
<div class="panel-inner">
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
 ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed
 consectetur. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce
 dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
 fermentum massa justo sit amet risus.</p>
</div>
<!--panel-inner--></div>
</li>
<li>
<h4 aria-controls="panel3" class="accordion accordian-title" 
id="accordion3" tabindex="-1">Accordion Title 3</h4>
<div aria-labeledby="accordion3" class="panel accordion-content" 
id="panel3">
<div class="panel-inner">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, 
eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, 
ut fermentum massa justo sit amet risus.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. 
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum 
nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<!--panel-inner--></div>
</li>
</ul>
<hr /><!--accordion-container--></div>
<!--accordion-closed-default--></div>

Tabs

Tab #1
Tab #2

Tab #1

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Tab #2

Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Tab Code


<div class="tabbed-container full-body-tab">
<ul class="tabs">
<li class="tab-trigger active" rel="tab1">Tab #1</li>
<li class="tab-trigger" rel="tab2">Tab #2</li>
</ul>
<div class="tab-container">
<div class="tab-content tab-visible" id="tab1"><strong>Tab #1</strong>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. 
Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus 
commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non 
commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
</div>
<!--tab-content--><!-- #tab1 -->
<div class="tab-content" id="tab2"><strong>Tab #2</strong>
<p>Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. 
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio 
sem nec elit. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus 
et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac 
consectetur ac, vestibulum at eros.</p>
</div>
<!-- tab-content --><!-- #tab2 --></div>
<!-- .tab-container --></div>

Homepage Video

Instructions for placing a hero video loop on the homepage, along with the undo instructions:

Application Deadline video banner
Open the homepage, and select Edit > Configure
Look for the FEATURE section
block -> Example: CUA: /media/apply-jan-2020/apply-jan-2020-hero-video (make sure "No Block" is unchecked)
format -> check "No Format"

Default homepage configuration
Open the homepage, and select Edit > Configure
Look for the FEATURE section
block -> CUA: /_cms/blocks/index/calling-page (make sure "No Block" is unchecked)
format -> CUA: /_cms/formats/home/feature-carousel (make sure "No Block" is unchecked)

The Catholic Mind

Possessing a Catholic Mind will equip you with creativity, discipline, and confidence to solve difficult problems, and the courage to live the virtuous life.