{% call SGBuilder.SGSection({ title: 'Alert component', id: 'alert' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn() %}
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--message'
        }) %}
          <p>Info</p>
          <p>We would like to <a href="#">inform you of important information</a> regarding our service. If you have any questions or concerns, please do not hesitate to contact our customer support team.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-icon'
        }) %}
          <p>Info with icon</p>
          <p>We would like to <a href="#">inform you of important information</a> regarding our service. If you have any questions or concerns, please do not hesitate to contact our customer support team.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-notice'
        }) %}
          <p>Notice</p>
          <p>We would like to <a href="#">bring to your attention some important information</a> regarding our service. If you have any questions or concerns, please contact our customer support team.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-notice-icon'
        }) %}
          <p>Notice with icon</p>
          <p>We would like to <a href="#">bring to your attention some important information</a> regarding our service. If you have any questions or concerns, please contact our customer support team.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-error'
        }) %}
          <p>Error</p>
          <p>We regret to <a href="#">inform you that an error has occurred</a>. Please try again later or contact our support team if the problem persists.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-error-icon'
        }) %}
          <p>Error with icon</p>
          <p>We regret to <a href="#">inform you that an error has occurred</a>. Please try again later or contact our support team if the problem persists.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-success'
        }) %}
          <p>Success</p>
          <p>Thank you for submitting your form! <a href="#">Your request</a> has been received and will be processed as soon as possible.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-success-icon'
        }) %}
          <p>Success with icon</p>
          <p>Thank you for submitting your form! <a href="#">Your request</a> has been received and will be processed as soon as possible.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-warning'
        }) %}
          <p>Warning</p>
          <p>We need to inform you that there may be a potential issue with <a href="#">our service</a>. If you have any questions or concerns, please contact our customer support team immediately.</p>
        {% endcall %}

        {% call Alert({
          className: 'alert--message-warning-icon'
        }) %}
          <p>Warning with icon</p>
          <p>We need to inform you that there may be a potential issue with <a href="#">our service</a>. If you have any questions or concerns, please contact our customer support team immediately.</p>
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Alert error</h3>
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--error'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Alert info</h3>
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',

            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          actionLink: 'im a link',
          className: 'alert--info'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}
      {% endcall %}
    {% endcall %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Alert success</h3>
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--success'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Alert warning</h3>
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          actionLink: 'im a link',
          className: 'alert--warning'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Alert theme grey</h3>
      {% call SGBuilder.SGRow() %}
        {% call Alert({
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}

        {% call Alert({
          head: 'Heading',
          actions: [{
            href: '#',
            text: 'text text'
          }],
          icon: 'icons/icon-tab',
          canClose: true,
          actionLink: 'im a link',
          className: 'alert--grey'
        }) %}
          <p>its a text from caller with class <a href="#">"alert-text"</a></p>
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}