{% call SGBuilder.SGSection({ title: 'Chip component', id: 'chip' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Chip default</h3>
      {% call SGBuilder.SGRow() %}
        {{ Chip({
          text: 'default'
        }) }}

        {{ Chip({
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}

        {{ Chip({
          className: 'chip--icon',
          icon: 'icons/icon-close',
          text: ''
        }) }}
      {% endcall %}
    {% endcall %}

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

        {{ Chip({
          className: 'chip--light-darker',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--light-darker',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Chip light primary</h3>
      {% call SGBuilder.SGRow() %}
        {{ Chip({
          className: 'chip--light-primary',
          text: 'light-primary'
        }) }}

        {{ Chip({
          className: 'chip--light-primary',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--light-primary',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Chip light primary darker</h3>
      {% call SGBuilder.SGRow() %}
        {{ Chip({
          className: 'chip--light-primary-darker',
          text: 'light-primary-darker'
        }) }}

        {{ Chip({
          className: 'chip--light-primary-darker',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--light-primary-darker',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}

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

        {{ Chip({
          className: 'chip--light-primary-darker',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--light-primary-darker',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}

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

        {{ Chip({
          className: 'chip--dark-darker',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--dark-darker',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}

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

        {{ Chip({
          className: 'chip--dark-primary',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--dark-primary',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}

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

        {{ Chip({
          className: 'chip--dark-primary-darker',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--dark-primary-darker',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Chip sizes</h3>
      {% call SGBuilder.SGRow() %}
        {{ Chip({
          className: 'chip--sm',
          text: 'default sm'
        }) }}

        {{ Chip({
          className: 'chip--sm',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--sm',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}

        {{ Chip({
          className: 'chip--icon chip--sm',
          icon: 'icons/icon-close',
          text: ''
        }) }}
      {% endcall %}

      {% call SGBuilder.SGRow() %}
        {{ Chip({
          className: 'chip--xs',
          text: 'default xs'
        }) }}

        {{ Chip({
          className: 'chip--xs',
          hasImage: true,
          text: 'Has image'
        }) }}

        {{ Chip({
          className: 'chip--xs',
          hasImage: true,
          canClose: true,
          text: 'Has image and close'
        }) }}

        {{ Chip({
          className: 'chip--icon chip--xs',
          icon: 'icons/icon-close',
          text: ''
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}