Grid Header

Grid header; Behave as flex container in big screens, and grid container in small screens.

Class	Type
`grid-header`	Grid Header Container	Define Grid in small screen
`grid-header-col-1`	Grid Header column 1	Define Column 1 in small screen
`grid-header-col-2`	Grid Header column 2	Define Column 2 in small screen
`grid-header-col-3`	Grid Header column 3	Define Column 3 in small screen
`grid-header-col-4`	Grid Header column 4	Define Column 2 in small screen

Databases


      <header class="grid-header">

        <h2 class="grid-header-col-1 heading-level-5 u-trim-1 u-cross-child-center">Databases</h2>

        <div class="u-flex u-gap-16 u-contents-mobile">

          <div class="grid-header-col-4 drop-wrapper">

            <button class="button is-secondary" type="button">

              <span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>

              <span class="text is-only-desktop">Columns</span>

              <span class="inline-tag">4</span>

            </button>

          </div>

          <div class="grid-header-col-3 toggle-button">

            <ul class="toggle-button-list">

              <li class="toggle-button-item">

                <button class="toggle-button-element is-selected" aria-label="List View" type="button">

                  <span class="icon-view-list" aria-hidden="true"></span>

                </button>

              </li>

              <li class="toggle-button-item">

                <button class="toggle-button-element" aria-label="Grid View" type="button">

                  <span class="icon-view-grid" aria-hidden="true"></span>

                </button>

              </li>

            </ul>

          </div>

          <button class="grid-header-col-2 button" type="button">

            <span class="icon-plus" aria-hidden="true"></span>

            <span class="text">Create database</span>

          </button>

        </div>

      </header>