    <!-- spotlight -->
    <div class="tm-block-spotlight uk-block uk-block-primary" id="tm-spotlight">
      <div class="uk-container uk-container-center">
        <section class="tm-spotlight uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <h1 class="uk-h2 uk-margin-remove">Spotlight position</h1>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- top-a -->
    <div class="tm-block-top-a uk-block uk-block-default" id="tm-top-a">
      <div class="uk-container uk-container-center">
        <section class="tm-top-a uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top A</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top A</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top A</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top A</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- top-b -->
    <div class="tm-block-top-b uk-block uk-block-primary-light" id="tm-top-b">
      <div class="uk-container uk-container-center">
        <section class="tm-top-b uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- top-c -->
    <div class="tm-block-top-c uk-block uk-block-primary" id="tm-top-c">
      <div class="uk-container uk-container-center">
        <section class="tm-top-c uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- top-d -->
    <div class="tm-block-top-d uk-block uk-block-secondary" id="tm-top-d">
      <div class="uk-container uk-container-center">
        <section class="tm-top-d uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top D</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top D</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top D</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-panel uk-panel-header">
                  <h3 class="uk-panel-title">Top D</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- breadcrumbs -->
    <div class="tm-breadcrumbs">
      <div class="uk-container uk-container-center">
        <div class="uk-hidden-small">
          <ul class="uk-breadcrumb">
            <li><a href="?page=home">Home</a></li>
            <li><span>Theme</span></li>
            <li class="uk-active"><span>Module Layouts</span></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- main -->
    <div class="tm-block-main uk-block uk-block-default" id="tm-main">
      <div class="uk-container uk-container-center">
        <div class="tm-middle uk-grid" data-uk-grid-margin="" data-uk-grid-match="">
          <div class="tm-main uk-width-medium-3-5">
            <main class="tm-content" id="tm-content">
              <div id="system-message-container"></div>
              <article class="uk-article tm-article">
                <div class="tm-article-wrapper">
                  <h1 class="uk-article-title">Module Layouts</h1>
                  <div class="tm-article-content uk-margin-large-bottom uk-margin-top-remove">
                    <div class="tm-article">
                      <p>You can easily manage the sidebar's positions and widths in the template. Widgets can have different styles and be placed in any position offered by this template. Each position has its own layout. You can align widgets side-by-side, stack them or choose your own grid layout. Show or hide widgets on mobile devices, while the grid adapts perfectly to your layout.</p><br>
                      <div class="uk-text-center"><img alt="Module Layouts" height="837" src="images/demo/features/module-layouts.svg" width="660"></div>
                    </div>
                  </div>
                </div>
              </article>
            </main>
            <section class="tm-main-bottom tm-main-bottom uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}" id="tm-main-bottom">
              <div class="uk-width-1-1 uk-width-medium-1-2">
                <div class="uk-panel uk-panel-box">
                  <h3 class="uk-panel-title"><i class="uk-icon-bar-chart uk-margin-small-right"></i> Main Bottom</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
              <div class="uk-width-1-1 uk-width-medium-1-2">
                <div class="uk-panel uk-panel-box">
                  <h3 class="uk-panel-title"><i class="uk-icon-clone uk-margin-small-right"></i> Main Bottom</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </section>
          </div>
          <aside class="tm-sidebar-a uk-width-medium-1-5 uk-flex-order-first-medium">
            <div class="uk-panel">
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar A</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar A</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar A</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar A</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar A</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </aside>
          <aside class="tm-sidebar-b uk-width-medium-1-5">
            <div class="uk-panel">
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar B</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar B</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar B</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar B</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
              <div class="uk-block">
                <h3 class="uk-panel-title">Sidebar B</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>

    <!-- bottom-a -->
    <div class="tm-block-bottom-a uk-block uk-block-default" id="tm-bottom-a">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-a uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <div class="uk-panel-badge uk-badge uk-badge-warning">corporate</div>
              <h3 class="uk-panel-title">Bottom A</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <div class="uk-panel-badge uk-badge tm-badge-primary">theme</div>
              <h3 class="uk-panel-title">Bottom A</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <div class="uk-panel-badge uk-badge uk-badge-success">business</div>
              <h3 class="uk-panel-title">Bottom A</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <div class="uk-panel-badge uk-badge uk-badge-danger">layouts</div>
              <h3 class="uk-panel-title">Bottom A</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- bottom-b -->
    <div class="tm-block-bottom-b uk-block uk-block-primary-light" id="tm-bottom-b">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-b uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom B</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- bottom-c -->
    <div class="tm-block-bottom-c uk-block uk-block-primary" id="tm-bottom-c">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-c uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <div class="uk-grid uk-grid-width-small-1-2 uk-grid-width-medium-1-2 uk-grid-width-large-1-4" data-uk-grid-margin="">
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="uk-block">
                  <h3 class="uk-panel-title">Bottom C</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <!-- bottom-d -->
    <div class="tm-block-bottom-d uk-block uk-block-secondary" id="tm-bottom-d">
      <div class="uk-container uk-container-center">
        <section class="tm-bottom-d uk-grid" data-uk-grid-margin="" data-uk-grid-match="{target:'> div > .uk-panel'}">
          
          <div class="uk-width-1-1">
            <div class="uk-panel">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. <code>bottom-d</code></p>
            </div>
          </div>

        </section>
      </div>
    </div>