User Card Template | Axero Documentation

The User Card template displays a quick view of user information. The template is a built-in template and comes with your Axero site. To use the template:

1. Add a People Widget on a Page Builder page
2. Edit the widget
3. Set the type to Single person
4. Select the User Card template in the Template tab

Template HTML

Below is the HTML of this template for your reference.

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

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

    <div class="axero-widget-content">
    
        <div class="ax-usr-card">
            <div class="ax-usr-card-header" style="background: url('{{{field:Cover photo}}}') no-repeat center center / cover ">
            </div>
            <div class="ax-usr-card-body">
                <div class="ax-usr-card-avatar">
                    <i title="{{Contents.ChatStatusText}}" class="icon-circle {{Contents.ChatStatusCSSClass}}"></i>
                    <a href="{{{Contents.ProfileURL}}}"><img src="{{{field:Profile Photo}}}" class="avatar" alt=""/></a>
                </div>
                <div class="user-info">
                    <div class="user-name"><a href="{{{Contents.ProfileURL}}}">{{{Contents.UserInfoDisplayName}}}</a></div>
                    <div class="user-prop user-rank">
                        <img src="{{{Contents.RankImageURL}}}" class="rank-image" /><span class="rank-name">{{{Contents.RankName}}}</span>
                    </div>
                    <div class="user-prop">{{{field:Occupation}}}{{#if ||field:Occupation||}}{{#if ||field:Department||}} - {{/if}}{{/if}}{{{field:Department}}}</div>
                    <div class="user-prop">{{{field:City}}}{{#if ||field:City||}}{{#if ||field:State||}}, {{/if}}{{/if}}{{{field:State}}}</div>
                </div>
            </div>
            <div class="ax-usr-card-footer">
                <a id="MessageButton" class="btn" type="button" href="{{SiteURL}}/chat/user/{{UserID}}">{{Resources.GlobalMessageText}}</a>
                <a class="btn" href="{{{Contents.ProfileURL}}}">{{Resources.ViewProfileText}}</a>
            </div>
        </div>

    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
        
    </div>
    {{/if}}
</div>