To supplement the set of snippets available within the editing interface, you have access to more snippets for advanced uses. Because these snippets are not available through the Insert Snippet 
tool, you can refer to this documentation and copy-and-paste the code from this article into the Source Code editor.
HEAD'S UP: Due to the higher level of impact that these items have on university content, additional snippets can only be accessed by Global Admin users. Contact Us for assistance.
Call Outs
Blockquote (Pull-Right)
<blockquote class="pull-right"><p>Here is a blockquote style that’s a few lines long. Ut enim ad minim veniam, quis nostrud ullamco. Lorem dolor duis aute irur dolor in voluptate.</p><cite>Quote Attribution</cite></blockquote>
Call Out Box
Call Out Boxes are used to draw attention to an important piece of information. Useful for showing errors, warnings, or general info. The line for defining additional CSS classes allows for applying background colors or icons.
<table class="ou_callout_box" style="width: 100%;"><caption>Callout Box</caption><thead><tr><th>bg-green icon-info</th></tr></thead><tbody><tr><td><p>Text inside callout.</p></td></tr></tbody></table><p> </p>
Circle Wrap Call-Out
<table class="ou_section_callout_circle" style="width: 100%;"> <tbody> <tr> <td width="25%" valign="top"> <img class="circle-wrap" src="http://placehold.it/300x300" alt="" width="300" height="300" /> </td> <td style="padding: 0 1rem;" valign="top"> <h3>Section Callout Title</h3> <p>Callout content.</p> </td> </tr> </tbody> </table>
Datapoint
<figure>Label for Data Point:<mark>Data</mark></figure>
Factoid (Pull-Right)
<table class="ou_canvas-factoid" border="0"><caption>Canvas Factoid</caption><tbody><tr><td>offset-left</td></tr><tr><td>75%</td></tr><tr><td><p>of the time you can use a 'factoid' CANVAS tag.</p></td></tr></tbody></table>
Content
Complex Table
<table class="chart chart-complex"><caption>Cost of Attendance for Fall 2015 – Spring 2016</caption><thead><tr><th> </th><th>On-Campus</th><th>With Parent(s) <br>(Dependent)</th><th>Off-Campus <br>(Independent)</th></tr></thead><tbody><tr><td><span class="col-heading-label"> :</span>Tuition*</td><td><span class="col-heading-label">On-Campus:</span> $37,980</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $37,980</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $37,980</td></tr> <tr><td><span class="col-heading-label"> :</span> Fees</td><td><span class="col-heading-label">On-Campus:</span> $450</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $450</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $450</td></tr><tr><td><span class="col-heading-label"> :</span> Housing/Food (Room and Board)</td><td><span class="col-heading-label">On-Campus:</span> $14,170**</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $4,770</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $11,970</td></tr><tr><td><span class="col-heading-label"> :</span> Books and Supplies</td><td><span class="col-heading-label">On-Campus:</span> $1,764</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $1,764</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $1,764</td></tr><tr><td><span class="col-heading-label"> :</span> Transportation</td><td><span class="col-heading-label">On-Campus:</span> $855</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $1,125</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $1,269</td></tr> <tr><td><span class="col-heading-label"> :</span> Personal Expenses</td><td><span class="col-heading-label">On-Campus:</span> $2,322</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $3,159</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $2,898</td> </tr><tr><td><span class="col-heading-label"> :</span> Loan Fees</td><td><span class="col-heading-label">On-Campus:</span> $100</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $100</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $100</td></tr></tbody><tfoot><tr><td><span class="col-heading-label"> :</span> Total</td><td><span class="col-heading-label">On-Campus:</span> $57,641</td><td><span class="col-heading-label">With Parent(s) (Dependent):</span> $49,348</td><td><span class="col-heading-label">Off-Campus (Independent):</span> $56,431</td></tr></tfoot> </table>
Flex 3 Column (Basic)
Images must be in a separate rows; wrap-16x9 will automatically be applied to them. All button (.btn) links will be forced to bottom of columns. Additional rows can be added.
<table class="ou_column_features" border="0"><caption>Feature Section</caption><tbody><tr><td width="33%"><img src="/images/feature/556x315.gif" alt="Feature Image" width="556" height="315" /></td><td width="33%"><img src="/images/feature/556x315.gif" alt="Feature Image" width="556" height="315" /></td><td width="33%"><img src="/images/feature/556x315.gif" alt="Feature Image" width="556" height="315" /></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor.</p></td><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor.</p></td><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor.</p></td></tr></tbody></table>
Flex 3 Column w/ Profile Highlights
<table class="ou_column_features" border="0"><caption>Feature Section</caption><tbody><tr><td><img src="/images/profiles/358x201.gif" alt="Profile Image" width="358" height="201" /></td><td><img src="/images/profiles/358x201.gif" alt="Profile Image" width="358" height="201" /></td><td><img src="/images/profiles/358x201.gif" alt="Profile Image" width="358" height="201" /></td></tr><tr><td><h4 class="bold">Scott Smith '04</h4><h5>B.S. Computer Science</h5><h6>Senior Developer at Hulu</h6></td><td><h4 class="bold">Scott Smith '04</h4><h5>B.S. Computer Science</h5><h6>Senior Developer at Hulu</h6></td><td><h4 class="bold">Scott Smith '04</h4><h5>B.S. Computer Science</h5><h6>Senior Developer at Hulu</h6></td></tr><tr><td><p>As a student, Scott got an internship at a tech startup that helped him land a job at Hulu.</p></td><td><p>As a student, Scott got an internship at a tech startup that helped him land a job at Hulu.</p></td><td><p>As a student, Scott got an internship at a tech startup that helped him land a job at Hulu.</p></td></tr><tr><td><a class="btn" href="#">Read His Story</a></td><td><a class="btn" href="#">Read His Story</a></td><td><a class="btn" href="#">Read His Story</a></td> </tr></tbody></table>
Two Tabs (Bottom)
<table class="ou_tabs_bottom" style="width: 850px; height: 126px;" border="0"><caption>Tabs</caption><tbody><tr> <td>Tab Title 1</td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 1</p></td></tr><tr><td>Tab title 2</td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 2</p></td></tr></tbody></table>
Interior Page
16x9 Image
<div class="wrap-16x9"><img src="/images/feature/556x315.gif" alt="Image" /></div>
Fancy Links
<table class="ou_div-wrapper_fancyrow" border="0"><caption>Div Wrapper</caption> <tbody> <tr> <td><a class="fancylink" title="Take a Virtual Tour" href="#"><span class="icon-map">Take a Virtual Tour</span></a> <a class="fancylink" title="schedule a visit" href="#"><span class="icon-calendar">schedule a visit</span></a> <a class="fancylink" title="read more about cal lutheran" href="#"><span class="icon-gumby">read more about cal lutheran</span></a> <a class="fancylink" title="Recreation" href="#"><span class="icon-shoe">Intramural Sports</span></a></td> </tr> </tbody> </table>
Fancy Section
<table class="ou_div-wrapper_fancydiv" border="0"><caption>Div Wrapper</caption><tbody><tr><td><h1 class="section-title no-line">Section Title</h1><hr class="gold" /><h4>This is an H4. You have to see Cal Lutheran to get the full picture. Our three beautiful campuses are a short drive from the Pacific coast, with the intimate charm of a liberal arts college and the scenic vistas of Southern California.</h4></td></tr></tbody></table><table class="ou_div-wrapper_fancyrow" border="0"><caption>Div Wrapper</caption><tbody><tr><td><a class="fancylink" title="Schedule Your Visit" href="#"><span class="icon-calendar">Schedule Your Visit</span></a><a class="fancylink" title="Take the Virtual Tour" href="#"><span class="icon-map">Take the Virtual Tour</span></a></td></tr></tbody></table>
Hero Feature
<table class="ou_hero-feature" border="0"><caption>Hero</caption><tbody><tr><td><img src="/images/content/836x470.gif" alt="img" width="836" height="470" /></td></tr><tr><td><h4>Serving the Community</h4><p>Graduate psychology students work directly with patients in our community counseling clinics.</p><p><a class="btn" title="Learn more about serving the community" href="#">Learn More</a></p></td></tr></tbody></table>
Interior Section
<h1 class="section-title">Section title</h1><table class="ou_column_features" border="0"><caption>Feature Section</caption><tbody><tr><td><img src="/_resources/img/fpo/556x315.gif" alt="feature" width="556" height="315" /></td><td><img src="/_resources/img/fpo/556x315.gif" alt="feature" width="556" height="315" /></td><td><img src="/_resources/img/fpo/556x315.gif" alt="feature" width="556" height="315" /></td></tr><tr><td><h3>H3 Heading Style</h3></td><td><h3>H3 Heading Style</h3></td><td><h3>H3 Heading Style</h3></td></tr><tr><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor</p></td><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor.</p></td><td><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit esse cillum dolore eu fugiat lorem, sed do eiusmod tempor.</p></td></tr><tr><td><a class="btn" href="#">call to action</a></td><td><a class="btn" href="#">call to action</a></td><td><a class="btn" href="#">call to action</a></td></tr></tbody></table>
Section Title
<h1 class="section-title">Section Title</h1>
Section Includes
Next Steps
<table class="ou_next-steps" border="0"><caption>Next Steps</caption> <tbody> <tr> <td> <h3><a href="#">Call To Action</a></h3> </td> <td> <h3><a href="#">Call to Action</a></h3> </td> <td> <h3><a href="#">Call to Action</a></h3> </td> <td> <h3><a href="#">Call to Action</a></h3> </td> </tr> <tr> <td><span class="icon-mobile"> </span></td> <td><span class="icon-course-requirements"> </span></td> <td><span class="icon-map"> </span></td> <td><span class="icon-apply"> </span></td> </tr> <tr> <td>Teaser Copy Here</td> <td>Teaser Copy Here</td> <td>Teaser Copy Here</td> <td>Teaser Copy Here</td> </tr> </tbody> </table>
Social Media
<ul class="social-media"> <li><a class="icon-twitter" title="Twitter" href="https://twitter.com/CalLutheran"><span class="sr-only">Twitter</span></a></li> <li><a class="icon-facebook" title="Facebook" href="https://www.facebook.com/callutheran"><span class="sr-only">Facebook</span></a></li> <li><a class="icon-instagram" title="Instagram" href="https://instagram.com/callutheran/"><span class="sr-only">Instagram</span></a></li> <li><a class="icon-youtube" title="YouTube" href="https://www.youtube.com/user/CalLutheran"><span class="sr-only">Youtube</span></a></li> <li><a class="icon-linkedin" title="LinkedIn" href="https://www.linkedin.com/company/california-lutheran-university"><span class="sr-only">LinkedIn</span></a></li> </ul>
Source Code
Randomized Page Heroes
By using the Page Hero Randomizer page property, the hero image will pull from a folder containing large and small sized jpegs. All new Landing Page Templates will get this property and it is only available to admins. Use this code to add the property to older pages:
<parameter name="page-hero-randomizer" group="CLU Admins" prompt="Page Hero Randomizer" alt="Enter a folder path that contains random hero images. This will override the standard page hero if set."></parameter>The folder you specify should be within that section's folder and contain sub folders for large and small sizes. For example, if you are setting up a randomized hero for School of Management, the folder in the property would look like the below example — this is where the two folders for large and small are located:
/management/images/heroes/Social Media Tags
Add to ouc:properties/config of an existing PCF.
<!-- Social Media --> <parameter section="Social Media Tags" name="share-title" group="CLU Admins" prompt="Sharing Title" alt="Title used for OG Tags and Twitter Cards"></parameter> <parameter name="share-description" group="CLU Admins" prompt="Sharing Description" alt="Description used for OG Tags and Twitter Cards"></parameter> <parameter name="share-img" group="CLU Admins" prompt="Share Image" alt="Image for Sharing. (1200 x 630 pixels, JPEG)" type="filechooser"></parameter>| < Previous Article |