Stacked 3 Across Call to Action Template | Communifire Documentation

The Stacked 3 Across Call to Action template highlights content titles and featured images. This template is great for creating visual interest.

Add Template

1. Click the gear icon > Page Builder > Templates.
2. Click Add a new template.
3. Enter Stacked 3 Across Call to Action as the Template Name.
4. Select Content List as the Widget Type.
5. Select Content List as the Widget Sub Type.
6. In the editor, paste the following code.

   <div class="axero-widget axero-widget-card-article {{CustomCSSClass}} axero-widget-no-border">
       <div class="axero-widget-content">
           <ul class="thumbnails">
   
               {{#each Contents}}
               <li class="span4">
   
                   <article class="cfx-post {{#if ContentFeaturedImage }}has-image{{/if}}" {{#if ContentFeaturedImage
                       }}style="background-image: url({{ContentImageURL}})" {{/if}}>
                       <div class="cfx-post-inner">
                           <div class="cfx-post-inner-ellipsis">
                               <div class="entry-category"><a href="{{SpaceURL}}">{{{SpaceName}}}</a></div>
                               <h3 class="entry-title"><a href="{{ContentURL}}">{{{Title}}}</a></h3>
                               <div class="entry-content">
                                   <p>{{{Summary}}}</p>
                               </div>
                           </div>
                           <div class="entry-meta">
                               <div class="p-user">
                                   <div class="p-avatar">
                                       <img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" />
                                   </div>
                                   <div class="p-user-info">
                                       <div class="p-user-name">
                                           <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}"
                                               href="{{AuthorUserProfileURL}}">{{{AuthorUserDisplayName}}}</a>
                                       </div>
                                       <div class="p-publish-date">{{DateCreatedString}}</div>
                                   </div>
                               </div>
                           </div>
                       </div>
                   </article>
   
               </li>
               {{/each}}
   
           </ul>
       </div>
   </div>

7. Click Save Template.

Add CSS Overrides

1. Click the gear icon > Control Panel > System > CSS Overrides.
2. Add the following code, at the bottom.

   /*Style for Stacked 3 Across Call to Action template*/
   .axero-widget-card-article ul.thumbnails{margin:0;}
   .axero-widget-card-article ul.thumbnails li.span6:nth-child(2n+1){margin-left:0;}
   .axero-widget-card-article ul.thumbnails li.span6{margin-bottom:0;}
   
   .cfx-post{box-shadow: 0 0 0 1px rgba(63,63,68,0.05),0 1px 3px 0 rgba(63,63,68,0.15);height: 300px;background:#fff;position:relative;border-radius: 4px;}
   .cfx-post .cfx-post-inner{padding: 30px;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis{height: 188px;max-height: 188px;overflow: hidden;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-category{margin-bottom: 8px;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-category a{font-size: 10px;border-radius: 20px;margin-right: 5px;pointer-events: auto;-webkit-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;text-transform: uppercase;display: inline-block;height: auto;line-height: 10px;padding: 7px 11px 6px;vertical-align: top;background: #f99500;color:#fff;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-title{font-size: 1.6em;font-weight: 600;line-height: 1.3em;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-title a{color:inherit;}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-content{}
   .cfx-post .cfx-post-inner .cfx-post-inner-ellipsis .entry-content p{font-size: 1.1em;line-height: 1.4em;margin: 5px 0 0;}
   .cfx-post .cfx-post-inner .entry-meta{margin-top:8px;}
   
   .cfx-post.has-image{background-position: 25% 50% !important;background-origin: border-box !important;background-size: cover !important;}
   .cfx-post.has-image::after {position: absolute;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,.5);content: "";height: 100%;display: block;border-radius: 4px;}
   .cfx-post.has-image:hover::after{background: rgba(0,0,0,.7);}
   .cfx-post.has-image .cfx-post-inner{position: absolute;z-index: 1;}
   .cfx-post.has-image .cfx-post-inner .cfx-post-inner-ellipsis .entry-title a,
   .cfx-post.has-image .cfx-post-inner .entry-meta .p-user .p-user-info .p-user-name a, 
   .cfx-post.has-image .cfx-post-inner .entry-meta .p-user .p-user-info .p-publish-date{color:#fff;}
   .cfx-post.has-image .cfx-post-inner .cfx-post-inner-ellipsis .entry-content{display:none;}
   
   @media (max-width: 767px) {
    .axero-widget-card-article ul.thumbnails li.span6{margin-bottom:15px;}
    .axero-widget-card-article ul.thumbnails li.span6:last-child{margin-bottom:0;}
   }
   .axero-widget-card-article .span4:nth-child(3n+1) {margin-left:0;}

3. Click Save CSS Overrides.

How to Use the Template

1. Add or edit a Page Builder page in Control Panel > System > Page Builder.
2. Click the Layouts tab and add a 12-column layout onto the page.
3. Click the Widgets tab.
4. Drag a Content List widget onto the page.
5. On the Content List widget, click the gear icon > Edit properties.
6. Update the widget Title.
7. Configure the widget properties.
   • This template is best used to display content with featured images, such as articles and blogs.
   • Set Total items to a number divisible by 3. (e.g. 3, 6, 9, etc.)
8. Click Template.
9. Select the Stacked 3 Across Call to Action template.
10. Click Save Widget.
11. Click Publish changes.
12. Click Go to page.