Close
Close 
Search this website

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. 

Energy lines class

Users can now add energy lines to any content block! No more having to use the CTA component to add color to your page.

Simply copy and paste any of the codes below into the source code of the page you are editing. 

<img class="energize-media--cyan--left" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--cyan--right" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--magenta--left" width="600" src="fiu.jpg" alt="" />
<img class="energize-media--magenta--right" width="600" src="fiu.jpg" alt="" />

Buttons

Need to bring attention to a call to action on your page? Buttons may be just the thing you need.

Simply copy and paste any of the codes below into the source code of the page you are editing. 

<a href="#" class="button button--blue">Blue button</a>
<a href="#" class="button button--blue-outline">Blue outline button</a>
<a href="#" class="button button--red">Red button</a>
<a href="#" class="button button--cyan">Cyan button</a>

Open in Cascade bookmarks

Creating a shortcut to open your site in Cascade is now made easy.

With the click of a button, users can view or edit their site without having to sign in, navigate to the site and then the specific page they want to edit. Save time by creating a bookmark today!

Note: these instructions work for Google Chrome and Firefox browsers.

Edit in Cascade bookmark

  1. Create a new bookmark in your browser by right clicking on the bookmark bar, then selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend naming it "Edit in Cascade".
  3. For the URL, copy and paste the code below:
javascript:if( typeof $('meta[name=id]').attr("content") !== "undefined" ){window.open("https://cascade.fiu.edu/entity/open.act?action=edit&type=page&id="+$(%27meta[name=id]%27).attr("content"));}

 

View in Cascade bookmark

  1. Create a new bookmark in your browser by right clicking on the bookmark bar, then selecting Add Page.
  2. On the flyout, give your bookmark a name. We recommend naming it "View in Cascade".
  3. For the URL, copy and paste the code below:
javascript:(function() {     var cascadeURL = 'https://cascade.fiu.edu/entity/open.act?type=page&id=%27;     var cascadeID = $(%27meta[name=id]%27).attr(%27content%27);     window.open(cascadeURL + cascadeID); })();

Once you're done, click save. Your new bookmark will appear on the bookmarks bar in your browser.

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 -->
</div>

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="https://www.youtube.com/embed/O6DBjrWDZr4" allowfullscreen loading="lazy"></iframe>
</div>

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.

<p>
   <a class="cta-link-primary" href="INSERT URL HERE">INSERT CTA TEXT HERE</a>
</p>

The final result will look like this:

Buy the thing

Social media links

Add a row of icons that link to your social media accounts. Copy the code below and replace the link with the URL for your accounts.

The final result will look like this:


<ul aria-label="Social Networks" class="social-media">
<li><a href="https://www.instagram.com/fiu_acs/" rel="noopener" target="_blank"> <span class="fa fa-instagram"><span class="show-for-sr">Follow us on Instagram</span></span> </a></li>
<li><a href="https://twitter.com/" rel="noopener" target="_blank"> <span class="fa fa-twitter"><span class="show-for-sr">Follow us on Twitter</span></span> </a></li>
<li><a href="https://www.facebook.com/" rel="noopener" target="_blank"> <span class="fa fa-facebook-f"><span class="show-for-sr">Follow us on Facebook</span></span> </a></li>
<li><a href="https://www.linkedin.com/" rel="noopener" target="_blank"> <span class="fa fa-linkedin"><span class="show-for-sr">Follow us on Linked in</span></span> </a></li>
<li><a href="https://www.youtube.com/" rel="noopener" target="_blank"> <span class="fa fa-youtube-play"><span class="show-for-sr">Follow us on YouTube</span></span> </a></li>
<li><a href="https://www.flickr.com/photos/" rel="noopener" target="_blank"> <span class="fa fa-flickr"><span class="show-for-sr">Follow us on Flickr</span></span> </a></li>
</ul>

Tables

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: