Content List Default Template | Axero Documentation

The Content List Default template displays content with the featured image on the left and text on the right. 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 Content List Default template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">

    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
        <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    
    <div class="axero-widget-content axero-widget-content-padded">

        <ul class="articlelist">
            {{#each Contents}}
            <li>
                <div class="row-fluid ct-list-content">
                    <div class="span4">
                        <a href="{{ContentURL}}"><img src="{{ContentImageURL}}" alt="{{{Title}}}" /></a>
                    </div>
                    <div class="span8">
                        <h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
                        <div class="axero-article-list-description">
                            {{{Summary}}}
                        </div>
                        <div class="row-fluid ct-list-options">
                            <div class="span5">
                                <div class="p-user">
                                    <div class="p-avatar">
                                        <a href="{{AuthorUserProfileURL}}"><img src="{{AuthorUserAvatarImageURL}}" alt="{{{AuthorUserDisplayName}}}" /></a>
                                    </div>
                                    <div class="p-user-info">
                                        <div class="p-user-name">
                                            <a class="axero-user-card-link" data-user="{{{AuthorUserID}}}" href="{{AuthorUserProfileURL}}" title="{{{AuthorUserDisplayName}}}">{{{AuthorUserDisplayName}}}</a>
                                        </div>
                                        <div class="p-publish-date">
                                            {{DateCreatedString}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="span7 ct-list-options-stats">
                                <div class="opt opt-counts pull-right">
                                    <ul>
                                        {{#if ../CommentsEnabled}}<li class="comments"><a href="{{ContentURL}}#comments"><span class="icon-comment"></span> <span class="comment-count">{{CommentCount}}</span></a></li>{{/if}}
                                        <li class="views"><a href="#" rel="tooltip"><span class="icon-eye-open"></span> {{PageViews}}</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            {{/each}}
        </ul>

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