Stacked 4 Across Template | Axero Documentation

The Stacked 4 Across template displays content in a 4-column layout. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a Content List Widget on a Page Builder page
2. Edit the widget
3. Select the Stacked 4 Across template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget {{CustomCSSClass}} axero-widget-no-border">
    
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    
    <div class="axero-widget-content">
    <div class="ax-entity-rel-content">
        <ul class="thumbnails">
        
            {{#each Contents}}
            <li class="span3">
            
                {{#if ContentFeaturedImage }}
                    <div class="thumbnail has-image">
                        <a class="img-container" href="{{ContentURL}}" title="{{{Title}}}" style="background-image: url({{ContentImageURL}})">
                            <img class="hide" src="{{ContentImageURL}}" />
                        </a>
                        <div class="info-container">
                            <h4><a href="{{ContentURL}}">{{{Title}}}</a></h4>
                            <div class="entity-info">
                                <div class="p-user pull-left">
                                    <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}} {{#if /CommentsEnabled}}<a class="p-comments" href="{{ContentCommentsURL}}"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a> {{/if}}<span class="p-views"><span class="icon-eye-open"></span> {{PageViews}}</span></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    
                {{else}}
                
                    <div class="thumbnail no-image">
                        <div class="info-container">
                            <h4><a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a></h4>
                            <div class="info-summary">{{{Summary}}}</div>
                            <div class="entity-info">
                                <div class="p-user pull-left">
                                    <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}} {{#if /CommentsEnabled}}<a class="p-comments" href="{{ContentCommentsURL}}"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a> {{/if}}<span class="p-views"><span class="icon-eye-open"></span> {{PageViews}}</span></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                {{/if}}
                
            </li>
            {{/each}}
            
        </ul>
        </div>
    </div>
    
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
		{{{FooterHTML}}}
        <a class="small hide" href="#">{{Resources.GlobalAllSmallText}} <i class="icon-double-angle-right"></i></a>
    </div>
    {{/if}}
    
</div>