Skip to Main Content

The codes below can be used for a variety of things in Cascade. They're provided here for your convenience and easy access. If you're looking for something that's not provided here, contact us. 

Accessible video embed

You can insert videos in any content area with a WYSIWYG editor. Use the embed code for YouTube, Vimeo or other online player and stick it inside this code:

<div class="flex-video widescreen vimeo">
<!-- Insert video embed code here -->

The following code is used to give your video a title. This allows for this element on the page to become accessible. Right after the text that says <iframe paste the following code:

title=" VIDEO TITLE"

Replace the uppercase text with a descriptive title of the video. A complete video embed code will look like this:

<div class="flex-video widescreen vimeo">
<iframe title="FIU commercial 2018" width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Call to action (CTA) code

If you want to include a call to action link without using the call to action content area, you can use the code below to create the same effect on the link text.

<a class="cta-link-primary" href="INSERT URL HERE">INSERT CTA TEXT HERE <span class="fa fa-arrow-circle-o-right"></span></a>

The final result will look like this:

Buy the thing


Tables are a great way to organize information in a digestible way. They are typically used to display important dates and numerical data. Do not make tables with more than 4 columns (to accommodate smaller screens). Keep in mind that tables are not automatically screen reader friendly, so use with caution. Learn how to make a table.

Below are a couple of examples:


Use the space in your site-specific footer to add links and information that are important for your site. For example, a link to apply to your program, social media links, a link to your contact page and contact information, are all important things that should be in your footer.

A footer can have 1 to 3 columns, but typically have at least 2.

Below is a code for a 1, 2 or 3 column footer. Feel free to edit to your liking.

One column

<div class="small-12 columns">
<p style="text-align: center;"><strong>UNIT NAME strong></p>
<p style="text-align: center;">SCHOOL, COLLEGE, DEPARTMENT </p>
<p style="text-align: center;">STREET ADDRESS.<br /> CAMPUS, BUILDING<br />CITY, ZIPCODE<br />Tel: <a href="tel:PHONE NUMBER">PHONE NUMBER</a><br />Email: <a href="mailto:EMAIL ">EMAIL</a></p>

Two columns

<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-12 large-8 columns">
<p class="heading">CALL TO ACTION HEADING</p>
<p><span>CALL TO ACTION TEXT</span></p>
<p><a class="cta-link-primary" href="CTA LINK">CTA LINK TEXT <span class="fa fa-arrow-circle-o-right"></span></a></p>
<div class="small-12 large-4 columns">
<p class="heading">UNIT NAME</p>
<p><span>STREET ADDRESS</span><br />ROOM#<span>3678</span><br />CITY, ZIP CODE<br />Tel: <a href="callto:PHONENUMBER" rel="noopener" target="_blank"><span>PHONENUMBER</span></a><br />Fax:<a href="callto: FAX NUMBER" rel="noopener" target="_blank"><span></span>FAX NUMBER</a></p>

Three columns

<div class="row">
   <div class="small-12 columns">
      <div class="row">
         <div class="small-12 large-4 columns">
            <p class="heading">INSERT CALL TO ACTION HERE</p>
            <p>INSERT CTA TEXT HERE</p>
            <p><a class="cta-link-primary" href="CTA LINK GOES HERE " id="apply-footer">LINK TEXT GOES HERE</a></p>
         <div class="small-12 large-4 columns">
            <p><strong>YOUR ORGANIZATION NAME </strong></p>
            <p>CAMPUS </p>
            <p>STREET ADDRESS<br />BUILDING AND ROOM #<br />CITY, STATE, ZIP CODE<br />Tel: <a href="tel:INSERT TELEPHONE #">INSERT TELEPHONE #</a><br />Email: <a href="mailto:YOUR EMAIL ">YOUR EMAIL</a></p>
            <ul class="social-media">
                <li><a aria-label="Follow us on Facebook" href="YOUR FACEBOOK LINK" rel="noopener" target="_blank"><span aria-hidden="true" class="fa fa-facebook-f"> </span></a></li>
                <li><a aria-label="Follow us on Instagram" href="YOUR INSTAGRAM LINK" rel="noopener" target="_blank"><span aria-hidden="true" class="fa fa-instagram"> </span></a></li>
</div> <div class="small-16 large-4 columns"> <p><strong>YOUR ORGANIZATION NAME </strong></p> <p>CAMPUS </p> <p>STREET ADDRESS<br />BUILDING AND ROOM #<br />CITY, STATE, ZIP CODE<br />Tel: <a href="tel:INSERT TELEPHONE #">INSERT TELEPHONE #</a><br />Email: <a href="mailto:YOUR EMAIL ">YOUR EMAIL</a></p> <ul aria-label="Social Networks" class="social-media">
<li><a aria-label="Follow us on facebook" href="" target="_blank"><span aria-hidden="true" class="fa fa-facebook"></span></a></li><li><a aria-label="Follow us on twitter" href="" target="_blank"><span aria-hidden="true" class="fa fa-twitter"></span></a></li>
<li><a aria-label="Follow us on instagram" href="" target="_blank"><span aria-hidden="true" class="fa fa-instagram"></span></a></li>
<li><a aria-label="Follow us on youtube" href="" target="_blank"><span aria-hidden="true" class="fa fa-youtube"></span></a></li>
<li><a aria-label="Follow us on flickr" href="" target="_blank"><span aria-hidden="true" class="fa fa-flickr"></span></a></li>

</ul> </div> </div> </div> </div> </div>