{% call SGBuilder.SGSection({ title: 'Callout component', id: 'callout' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Callout error theme</h3>
      {% call SGBuilder.SGRow() %}
        {% call Callout({
          className: 'callout--error'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--error',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--error',
          icon: 'icons/icon-tab',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--error',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--error',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ],
          title: 'Title!'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Callout info theme</h3>
      {% call SGBuilder.SGRow() %}
        {% call Callout({
          className: 'callout--info'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--info',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--info',
          icon: 'icons/icon-tab',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--info',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--info',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ],
          title: 'Title!'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Callout warning theme</h3>
      {% call SGBuilder.SGRow() %}
        {% call Callout({
          className: 'callout--warning'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--warning',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--warning',
          icon: 'icons/icon-tab',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--warning',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--warning',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ],
          title: 'Title!'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Callout success theme</h3>
      {% call SGBuilder.SGRow() %}
        {% call Callout({
          className: 'callout--success'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--success',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--success',
          icon: 'icons/icon-tab',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--success',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--success',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ],
          title: 'Title!'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Callout gray theme</h3>
      {% call SGBuilder.SGRow() %}
        {% call Callout({
          className: 'callout--gray'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--gray',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--gray',
          icon: 'icons/icon-tab',
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--gray',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}

        {% call Callout({
          className: 'callout--gray',
          icon: 'icons/icon-tab',
          canClose: true,
          actions: [
            {
              text: 'Button'
            },
            {
              text: 'Link',
              className: 'button--underline button--borderless',
              href: '#'
            }
          ],
          title: 'Title!'
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim <a href="#">veniam</a>.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}