Canvas Box in CB Content Module

To remain consistent with site layout am considering to have Canvas Box (Canvas, Avatar, OnlineStaus and Statistics) in a CB Content Module.
Have tried this code, but can't figure out why it does not render properly. And cog icon to update canvas photo with ajax is still missing to the right.

Code:
<div class="cbPosCanvas cbCanvasLayout border-default">

<div class="cbPosCanvasTop cbCanvasLayoutTop">

<div class="cbPosCanvasBackground cbCanvasLayoutBackground bg-muted">
[cb:userfield field="canvas" reason="list" /]
</div>
<div class="cbPosCanvasPhoto cbCanvasLayoutPhoto">
[cb:userfield field="avatar" reason="profile" /]
[cb:userfield field="onlinestatus" reason="profile" /]
</div>

</div>

<div class="cbPosCanvasBottom cbCanvasLayoutBottom border-default">

<div class="cbPosCanvasTitle cbCanvasLayoutTitle text-primary">
[cb:userfield field="name" reason="profile" /]
</div>
<div class="cbPosCanvasStats cbCanvasLayoutCounter text-muted small">
[cb:usertab tab="6" reason="profile" /]
</div>

</div>

</div>

Well, not an error but coding issue ... would appreciate some help here. Thank you.

tab 6 = statistics

Honestly don't recommend putting too much time into it right now. I'm currently working on upgrading CB to Bootstrap 4 and all of that is going to change as we'll be able to just use mostly Bootstrap 4 classes instead of a bunch of custom CSS. If you still want to do this then the profile styling is not designed for use outside of profile and recommend looking at the Connections tab for appropriate structure for usage like that.