{% call SGBuilder.SGSection({ title: 'Status component', id: 'status' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Status default</h3>
      {% call SGBuilder.SGRow() %}
        {{ Status() }}
        {{ Status({
          className: 'status--info'
        }) }}
        {{ Status({
          className: 'status--success'
        }) }}
        {{ Status({
          className: 'status--warning'
        }) }}
        {{ Status({
          className: 'status--error'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Status outline</h3>
      {% call SGBuilder.SGRow() %}
        {{ Status({
          className: 'status--outline'
        }) }}
        {{ Status({
          className: 'status--outline status--info'
        }) }}
        {{ Status({
          className: 'status--outline status--success'
        }) }}
        {{ Status({
          className: 'status--outline status--warning'
        }) }}
        {{ Status({
          className: 'status--outline status--error'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Status sizes</h3>
      {% call SGBuilder.SGRow() %}
        {{ Status({
          className: 'status--outline status--sm'
        }) }}

        {{ Status({
          className: 'status--sm'
        }) }}

        {{ Status({
          className: 'status--outline status--xs'
        }) }}

        {{ Status({
          className: 'status--xs'
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}