{% call SGBuilder.SGSection({ title: 'Avatar component', id: 'avatar' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar default</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg'
        }) }}

        {{ Avatar({
          className: 'avatar--lg'
        }) }}

        {{ Avatar() }}

        {{ Avatar({
          className: 'avatar--md'
        }) }}

        {{ Avatar({
          className: 'avatar--xs'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar default with status</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          status: 'offline'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          status: 'offline'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          status: 'offline'
        }) }}

        {{ Avatar({
          status: 'offline'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          status: 'offline'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          status: 'offline'
        }) }}
      {% endcall %}

      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          status: 'online'
        }) }}

        {{ Avatar({
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          status: 'online'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar Icon</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}

        {{ Avatar({
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar icon with status</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}

        {{ Avatar({
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          useImage: false,
          useIcon: true,
          icon: 'icons/avatar',
          status: 'online'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar Text</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}

        {{ Avatar({
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          useImage: false,
          useIcon: false,
          text: 'DR'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Avatar icon with status</h3>
      {% call SGBuilder.SGRow() %}
        {{ Avatar({
          className: 'avatar--xxlg',
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xlg',
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--lg',
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}

        {{ Avatar({
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--md',
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}

        {{ Avatar({
          className: 'avatar--xs',
          useImage: false,
          useIcon: false,
          text: 'DR',
          status: 'online'
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}