{% call SGBuilder.SGSection({ title: 'Badge component', id: 'badge' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Badge outline</h3>
      {% call SGBuilder.SGRow() %}
        {{ Badge({
          className: 'badge--outline-primary',
          text: 'outline-primary'
        }) }}

        {{ Badge({
          className: 'badge--outline-error',
          text: 'outline-error'
        }) }}

        {{ Badge({
          className: 'badge--outline-info',
          text: 'outline-info'
        }) }}

        {{ Badge({
          className: 'badge--outline-success',
          text: 'outline-success'
        }) }}

        {{ Badge({
          className: 'badge--outline-warning',
          text: 'outline-warning'
        }) }}

        {{ Badge({
          className: 'badge--outline-grey',
          text: 'outline-grey'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Badge light</h3>
      {% call SGBuilder.SGRow() %}
        {{ Badge({
          className: 'badge--light-primary',
          text: 'light-primary'
        }) }}

        {{ Badge({
          className: 'badge--light-error',
          text: 'light-error'
        }) }}

        {{ Badge({
          className: 'badge--light-info',
          text: 'light-info'
        }) }}

        {{ Badge({
          className: 'badge--light-success',
          text: 'light-success'
        }) }}

        {{ Badge({
          className: 'badge--light-warning',
          text: 'light-warning'
        }) }}

        {{ Badge({
          className: 'badge--light-grey',
          text: 'light-grey'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Badge dark</h3>
      {% call SGBuilder.SGRow() %}
        {{ Badge({
          className: 'badge--dark-primary',
          text: 'dark-primary'
        }) }}

        {{ Badge({
          className: 'badge--dark-error',
          text: 'dark-error'
        }) }}

        {{ Badge({
          className: 'badge--dark-info',
          text: 'dark-info'
        }) }}

        {{ Badge({
          className: 'badge--dark-success',
          text: 'dark-success'
        }) }}

        {{ Badge({
          className: 'badge--dark-warning',
          text: 'dark-warning'
        }) }}

        {{ Badge({
          className: 'badge--dark-grey',
          text: 'dark-grey'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Badge sizes</h3>
      {% call SGBuilder.SGRow() %}
        {{ Badge({
          className: 'badge--dark-primary badge--sm',
          text: 'sm'
        }) }}

        {{ Badge({
          className: 'badge--dark-primary badge--xs',
          text: 'xs'
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}