Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

Below are code templates for adding college contacts throughout your CFW3 college site. These code templates will work with both basic and landing pages. Copy and Paste the below code into the CKEditor screen to create the below code templates.

Make sure CKEditor is currently set to Full HTML text format before copying and pasting the below code.

College Contact Design A

<div class="mb-4">
<h4 class="visible"><a href="<!-- college url -->"><!-- college name --></a></h4>
<p class="mb-0 visible"><!-- college address --></p>
<p class="mb-0"><!-- blank field --></p>
<p class="mb-0"><a href="mailto:<!-- blank field -->"><!-- blank field --></a></p>
<p class="mb-0"><!-- blank field --></p>
<p class="mb-0"><!-- blank field --></p>
<p class="mb-0"><a href="<!-- blank url -->"><!-- blank field --></a></p>
<p class="mb-0"><a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a> | <a href="<!-- blank url -->"><!-- blank field --></a></p>
</div>

You can add/remove fields as needed. Replace <!-- blank field --> with the desired content. To hide/unhide specific elements, use either the .visible utility class to unhide or the .hidden utility class to hide.

To create a grid, use the below code snippet. Add or remove as many columns as needed. Use flexbox alignment utilities to vertically and horizontally align columns. Below is an example of a three column grid layout.

<div class="container">
  <div class="row align-items-start">
    <div class="col"><!-- column 1 --></div>
    <div class="col"><!-- column 2 --></div>
    <div class="col"><!-- column 3 --></div>
  </div>
</div>

College Contact Design B

<div class="mb-4">
<p><a href="<!-- blank field -->">
<img src="<!-- blank field -->" width="<!-- blank field -->" alt="<!-- blank field -->" loading="lazy">
</a></p>
<p class="mb-0"><a href="<!-- blank field -->">Download Logo</a></p>
</div>

  • No labels