Program Blocks

Description

Program blocks were originally designed to showcase academic programs on Department pages. The style of the blocks can also be used to highlight other key content on landing pages. Program blocks require images, a very brief title and a link. If a good image is not available, use color blocks instead to feature and link to content.

This component is designed to be used in the main content area of the two column templates.

Adding and Editing

1. At the bottom of the content block editor, select the HTML option
2. Copy and paste the code template below into the editor
   <div class="program-blocks">
     <a href="#">
       <img sfref="[images|OpenAccessDataProvider]621f583c-b538-6062-bd9c-ff000049ad50" src="http://dev.claflin.edu/images/default-source/placeholder-images/program-blocks.png?sfvrsn=0" data-displaymode="Original" alt="program-blocks" title="program-blocks" />
       <div class="title">Title 1</div>
     </a>
     <a href="#">
       <img sfref="[images|OpenAccessDataProvider]621f583c-b538-6062-bd9c-ff000049ad50" src="http://dev.claflin.edu/images/default-source/placeholder-images/program-blocks.png?sfvrsn=0" data-displaymode="Original" alt="program-blocks" title="program-blocks" />
       <div class="title">Title 2</div>
     </a>
     <a href="#">
       <img sfref="[images|OpenAccessDataProvider]621f583c-b538-6062-bd9c-ff000049ad50" src="http://dev.claflin.edu/images/default-source/placeholder-images/program-blocks.png?sfvrsn=0" data-displaymode="Original" alt="program-blocks" title="program-blocks" />
       <div class="title">Title 3</div>
     </a>
   </div>
3. Click the Design option to switch back to the Design editor
4. Replace/remove the content as necessary
5. To change/apply a link, right clickon the titles and click the link properties

Example

Title 1

Title 2

Title 3