Badge List Template | Axero Documentation

The Badge List template displays badges in a grid 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. Filter by the badge content type
4. Select a badge type - kudos or challenge
5. Select the Badge List template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

<div class="axero-rec-badge-list {{CustomCSSClass}}">
{{#if ShowWidgetHeader}}
{{#if (compare AwardListType 2)}}
<div class="row-fluid x-header">
    <div class="span8 "><div class="axero-entity-formatted-content ">
        <h4>{{{WidgetTitle}}}</h4>
    <p>{{Resources.KudosBadgesInfoText}}</p>
    </div></div>
    <div class="span4">
        <a id="BadgeListRecognizeButton" class="btn btn-success pull-right recognition-button">{{Resources.RecognizeText}}</a>
    </div>
</div>
{{else}}
<div class="row-fluid x-header">
    <div class="span8 "><div class="axero-entity-formatted-content ">
        <h4>{{{WidgetTitle}}}</h4>
    <p>{{Resources.ChallengeBadgesInfoText}}</p>
    </div></div>
    <div class="span4 copy-query-string">
        <a href="{{SiteURL}}/recognition/challenges" class="btn pull-right">{{{Resources.ViewChallengesText}}}</a>
    </div>
</div>
{{/if}}
{{/if}}
<div class="grid-row">
    {{#each Contents}}
    <div class="grid-item">
        <a href="{{ContentURL}}">
            <span class="t-img">
                <img src="{{ContentImageURL}}" />
            </span>
            <span class="t-label">
                {{{Title}}}
            </span>
        </a>
    </div>
    {{/each}}
</div>
</div>