{% call SGBuilder.SGSection({ title: 'Accordion component', id: 'chip' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn() %}
      <h3>Dropdown basic</h3>
      {% call SGBuilder.SGRow() %}
        <div style="position: relative;">
          {{ Button({
            text: 'Open dropdown',
            attrs: {
              'data-dropdown': 'dropdown-1'
            }
          }) }}
          {% call Dropdown({
            dataDropdown: 'dropdown-1'
          }) %}
            <button data-dropdown="dropdown-1">Close</button>
            <div style="width: 300px; height: 40px; background: slategrey"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, reprehenderit!</p>
          {% endcall %}
        </div>

        <div style="position: relative;">
          {{ Button({
            text: 'Opened dropdown',
            attrs: {
              'data-dropdown': 'dropdown-2'
            }
          }) }}
          {% call Dropdown({
            dataDropdown: 'dropdown-2',
            isOpen: true
          }) %}
            <button data-dropdown="dropdown-2">Close</button>
            <div style="width: 300px; height: 40px; background: slategrey"></div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, reprehenderit!</p>
          {% endcall %}
        </div>
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}