{% call SGBuilder.SGSection({ title: 'Progress bar', id: 'progress' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 10 }) %}
      <h3>Progress examples</h3>
      {% call SGBuilder.SGRow() %}
        {{ ProgressBar({
          isSmall: true,
          percent: 10
        }) }}
        {{ ProgressBar({
          percent: 30
        }) }}
        {{ ProgressBar({
          isLarge: true,
          percent: 50
        }) }}
        {{ ProgressBar({
          isSmall: true,
          hasText: true,
          percent: 70
        }) }}
        {{ ProgressBar({
          hasText: true,
          percent: 90
        }) }}
        {{ ProgressBar({
          isLarge: true,
          hasText: true,
          percent: 99
        }) }}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}