User Card with Manager Template | Communifire Documentation

The User Card with Manager template displays a quick view of user information and the user's manager.

The template is a built-in template and comes with your Communifire site. To use the template:

1. Go to Control Panel > System > Page Builder and add or edit a page.
2. Click Widgets.
3. Drag a People widget onto the page.
4. On the People widget, click the gear icon > Edit Properties.
5. Set the Widget Type to Single person.
6. Check Logged in user or Logged in user's boss.
7. Click Template.
8. Select the User Card with Manager template.
9. Save the widget and page.

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 nofooter">
            <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">
                    <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">{{{field:Occupation}}}{{#if ||field:Occupation||}}{{#if ||field:Department||}} - {{/if}}{{/if}}{{{field:Department}}}</div>
					{{#if Contents.SupervisorDisplayName}}<div class="user-prop">{{Resources.ReportsToText}}: <a href="{{{Contents.SupervisorProfileURL}}}">{{{trim Contents.SupervisorDisplayName TitleCharacterLength}}}</a></div>{{/if}}
                
                </div>
            </div>
        </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">
		{{{FooterHTML}}}
        
    </div>
    {{/if}}
</div>