
    <!-- 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">Elements</h1>
            </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 class="uk-active"><span>Elements</span></li>
          </ul>
        </div>
      </div>
    </div>

  <!-- main content -->
  <div id="tm-main" class="tm-block-main uk-block uk-block-default">
    <div class="uk-container uk-container-center">
      <div class="tm-middle uk-grid" data-uk-grid-match data-uk-grid-margin>
        <div class="tm-main uk-width-medium-1-1">
          <main id="tm-content" class="tm-content">
            <article class="uk-article tm-article">
              <div class="tm-article-wrapper">
                <div class="tm-article-content uk-margin-large-bottom uk-margin-top-remove">
                  <div class="tm-article">
                    <h2 class="uk-module-title">Column Blocks</h2>
                    <p>Column grid is a robust layout that is both responsive and nestable. It can accomodate upto 10 columns by using pre-defined widths. The columns are fully responsive in all devices. The following table shows an overview of the classes sizes you can use to create columns:</p>
                    <table class="uk-table">
                      <thead>
                        <tr>
                          <th class="uk-width-1-2">Class</th>
                          <th class="uk-width-1-2">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>uk-width-1-1</code></td>
                          <td>Fills 100% of the available width.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-2</code></td>
                          <td>Divides the grid into halves.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-3</code> to <code>uk-width-2-3</code></td>
                          <td>Divides the grid into thirds.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-4</code> to <code>uk-width-3-4</code></td>
                          <td>Divides the grid into fourths.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-5</code> to <code>uk-width-4-5</code></td>
                          <td>Divides the grid into fifths.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-6</code> to <code>uk-width-5-6</code></td>
                          <td>Divides the grid into sixths.</td>
                        </tr>
                        <tr>
                          <td><code>uk-width-1-10</code> to <code>uk-width-9-10</code></td>
                          <td>Divides the grid into tenths.</td>
                        </tr>
                        <tr>
                          <td><code>uk-grid uk-grid-width-1-4</code></td>
                          <td>Divides the elements of a grid into the number of columns specified using the uk-grid-width-* class. e.g. in this case the grid will be divided into four. You can also use 1, 2, 3, 4, 6 and 10.</td>
                        </tr>

                      </tbody>
                    </table>
                    <br>
                    <h3 class="uk-module-title uk-margin-top">Examples</h3>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-2">
                        <h3 class="uk-module-title">One half</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-2">
                        <h3 class="uk-module-title">One half</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                    </div>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-3">
                        <h3 class="uk-module-title">One third</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                    </div>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-1-4">
                        <h3 class="uk-module-title">One fourth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-4">
                        <h3 class="uk-module-title">One fourth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-4">
                        <h3 class="uk-module-title">One fourth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-1-4">
                        <h3 class="uk-module-title">One fourth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                    </div>
                    <div class="uk-grid" data-uk-grid-margin>
                      <div class="uk-width-medium-2-10">
                        <h3 class="uk-module-title">Two tenth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </div>
                      <div class="uk-width-medium-5-10">
                        <h3 class="uk-module-title">five tenth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. </div>
                      <div class="uk-width-medium-3-10">
                        <h3 class="uk-module-title">Three tenth</h3> Tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores. </div>
                    </div>
                    <br>
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;div class="uk-grid" data-uk-grid-margin&gt;

  &lt;div class="uk-width-medium-1-3"&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class="uk-width-medium-1-3"&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class="uk-width-medium-1-3"&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

&lt;/div&gt;</pre>

                  <br>
                  <pre>&lt;div class="uk-grid uk-grid-width-medium-1-2 uk-grid-width-large-1-3" data-uk-grid-margin&gt;

  &lt;div class="uk-block&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class="uk-block&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

  &lt;div class="uk-block&gt;
    &lt;p&gt;your content here&lt;/p&gt;
  &lt;/div&gt;

&lt;/div&gt;</pre>
                  
                    <br>
                    <div class="uk-badge">note</div>
                    <p class="uk-margin-top">To add a nested grid (grid within a grid,) use the following markup</p>
                    
                    <div class="uk-badge-note uk-margin-top uk-badge">markup</div>
                    <pre>&lt;div class="uk-grid" data-uk-grid-margin&gt;
  &lt;div class="uk-grid" data-uk-grid-margin&gt;
    ...
  &lt;/div&gt;
&lt;/div&gt;</pre>
                    <br>
                  </div>
                </div>
              </div>
            </article>
          </main>
        </div>
      </div>
    </div>
  </div>

    <!-- bottom-d -->
    <div class="tm-block-bottom-d uk-block uk-block-secondary tm-overlay-6" 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'}">
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <img alt="logo" height="40" src="images/demo/general/logo-small-white.svg" width="140">
              <p>Sandal LLC.<br>
              Hamburg, Germany<br>
              One Street | Two Drive,<br>
              10th Floor, Site Wing<br>
              <br>
              +49 555 000 000<br>
              hello@sandal.com<br>
              support@sandal.com</p>
            </div>
          </div>

          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Recent Posts</h3>
              <div class="tm-item-block">
                <ul>
                  <li>
                    <a href="?page=news-item">Have faith in your abilities</a> 
                    <div class="uk-margin-small-top">
                      Believe in yourself! Have faith in your abilities! Without a...
                    </div>
                  </li>
                  <li>
                    <a href="?page=news-item">Live in the only moment</a> 
                    <div class="uk-margin-small-top">
                      Always continue the climb. It is possible for you to...
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Work</h3>
              <ul class="uk-list list-icons">
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Gaucho Cafe</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fontaine Corp</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Saffron Magazine</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Celsius gallery</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Fidelity business</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Lighthouse Church</a></li>
                <li><i class="uk-icon-angle-right"></i><a href="http://goo.gl/6xBDNW" target="_blank">Sauna Spa</a></li>
              </ul>
            </div>
          </div>
          
          <!-- block -->
          <div class="uk-width-1-1 uk-width-medium-1-4">
            <div class="uk-panel">
              <h3 class="uk-h3 uk-module-title uk-margin-bottom">Our Values</h3>
              <p>Do not dwell in the past, do not dream of the future, concentrate the mind on now.</p>
              <p>Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.</p>
            </div>
          </div>
        </section>
      </div>
    </div>