{% call SGBuilder.SGSection({ title: 'List', id: 'list' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm'
              },
              {
                title: chance.animal(),
                className: 'list__item--md'
              },
              {
                title: chance.animal()
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                className: 'list__item--md',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                leftIcon: 'icons/phone'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                className: 'list__item--md',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                className: 'list__item--md',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                hasCheckbox: true
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4 }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm list__item--disabled'
              },
              {
                title: chance.animal(),
                className: 'list__item--md list__item--disabled'
              },
              {
                title: chance.animal(),
                className: 'list__item--disabled'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm list__item--disabled',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                className: 'list__item--md list__item--disabled',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                className: 'list__item--disabled',
                leftIcon: 'icons/phone'
              }
            ]
          }) }}

        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm list__item--disabled',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                className: 'list__item--md list__item--disabled',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                className: 'list__item--disabled',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                className: 'list__item--sm list__item--disabled',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                className: 'list__item--md list__item--disabled',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                className: 'list__item--disabled',
                hasCheckbox: true
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal()
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                leftIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                leftIcon: 'icons/phone'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                hasCheckbox: true
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal()
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                }
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                rightIcon: 'icons/phone',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                rightIcon: 'icons/phone',
                hasCheckbox: true
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                rightIcon: 'icons/phone',
                hasCheckbox: true
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6, xl: 4  }) %}
      {% call GridBuilder.Grid() %}
        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered list__item--disabled',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered list__item--disabled',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered list__item--disabled',
                leftIcon: 'icons/phone',
                rightIcon: 'icons/phone',
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                image: {
                  image: {
                    src: '32x32'
                  },
                  sources: []
                },
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}

        {% call GridBuilder.GridColumn() %}
          {{ List({
            items: [
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--sm list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--md list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              },
              {
                title: chance.animal(),
                subtitle: chance.animal(),
                className: 'list__item--bordered list__item--disabled',
                rightIcon: 'icons/phone',
                hasCheckbox: true,
                badgeValue: 55,
                badgeClassName: 'badge--dark-grey badge--xs'
              }
            ]
          }) }}
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}