{% call SGBuilder.SGSection({ title: 'Popover', id: 'popover' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <p>Lorem ipsum dolor sit amet, <a href="#" data-orange-popover>consectetur</a> adipisicing elit.
         Accusantium alias consequatur
         doloribus enim hic maxime pariatur provident quae, quaerat quidem tempora ullam, vero voluptas voluptatum!</p>

      {{ Popover({
        elementTrigger: '[data-orange-popover]',
        position: 'top',
        title: 'Popover heading text',
        id: 'orangePopover'
      }) }}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 3 }) %}
      <button class="js-primary-popover button">Popover left</button>
      {% call Popover({
        position: 'left',
        elementTrigger: '.js-primary-popover',
        title: 'Popover heading text'
      }) %}
          {{ Button({
            className: 'button--primary',
            text: 'Link!',
            href: '#'
          }) }}

          {{ Button({
            className: 'button--primary',
            text: 'Button!'
          }) }}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 3 }) %}
      <button id="blackPopover" class="button">Popover right</button>
      {{ Popover({
        position: 'right',
        elementTrigger: '#blackPopover',
        title: 'Popover heading text',
        className: 'popover--dark'
      }) }}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 3 }) %}
      <button id="whitePopover" class="button">Popover bottom</button>
      {{ Popover({
        position: 'bottom',
        elementTrigger: '#whitePopover',
        title: 'Popover heading text',
        className: 'popover--light'
      }) }}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 3 }) %}
      <button class="js-auto-popover button">Popover auto</button>
      {{ Popover({
        elementTrigger: '.js-auto-popover',
        id: 'autoPopover',
        title: 'Popover heading text'
      }) }}
    {% endcall %}
  {% endcall %}
{% endcall %}