Card Deck (3 Across) Template | Axero Documentation

The Card Deck (3 Across) template displays content in a 3-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 Card Deck (3 Across) 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="thumbnails ax-magazine-hero three-across">

            {{#each Contents}}
			<li class="span4">
				<div class="thumbnail">
                    <a href="{{ContentURL}}"><img src="{{ContentImageURL}}" style="width:100%;" alt="{{{Title}}}" /></a>
					<div class="hero-overlay">
						<h4><a title="{{{Title}}}" href="{{ContentURL}}">{{{Title}}}</a></h4>
						<p class="description">{{{Summary}}}</p>
                        <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}}{{#if ../CommentsEnabled}}&nbsp;&nbsp;&middot;&nbsp;&nbsp;<i class="icon-comment"></i> {{CommentCount}}{{/if}}
                                </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>