<div class="card">
    <div class="card-header" style="font-size: 14px; background-color: #575757; box-shadow: inset 1px 25px 32px -10px #848383; color: #FFFFFF;">
        {{ block.trans('Latest Members') }}
    </div>
    <ul class="list-group list-group-flush">
        {% for user in block.getLastUsers() %}
        <li class="list-group-item">
            <a href="{{ block.getUserUrl(user) }}" style="font-size: 14px;">
                <img class="rounded-circle" src="{{ user.getProfileImage() }}"
                     style="width: 30px; height: 30px; border: 1px solid #CCCCCC; padding: 2px;"/>
                <span class="ms-2 fw-bold"
                      style="font-size: 13px;">
                    {{ user.getUserFirstname() }}
                    <span class="text-muted p-0 ms-2" style="font-size: 12px;">{{ block.trans('Member') }}</span>
                </span>
            </a>
        </li>
        {% endfor %}
    </ul>
    <div class="card-footer">
        <span style="font-size: 12px;">
            {{ block.trans('We welcome the new members.') }}
        </span>
    </div>
</div>