{% call panel.component(title='Size', description="Using Bootstrap's typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what's needed.") %}

{% endcall %} {% call panel.component(title='Status Indicator', description="Add an online or offline status indicator to show user's availability.") %}

{% endcall %} {% call panel.component(title='Shape', description='Change the shape of an avatar with the default Bootstrap image classes.') %}

{% endcall %} {% call panel.component(title='Ratio', description='Change the proportional relationship between the width and height of an avatar to 4 by 3 with an .avatar-4by3 modifier.') %}

{% endcall %} {% call panel.component(title='Initials', description="You won't always have an image for every user, so easily use initials instead.") %}

{% endcall %} {% set description %} Easily group avatars of any size, shape and content with a single component. Each avatar can also use an {{ '' | escape }} to link to the corresponding profile. {% endset %} {% call panel.component(title='Groups', description=description) %}

{% endcall %}