
    <!-- 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">Cards</h2>
                    <p>Use the <code>tm-panel-card</code> class to create staff profiles e.g for company staff. The card element gives you the option to add the person's <code>name</code>, the <code>title</code> and the person's <code>avatar</code>. The card element is wrapped within <code>uk-grid</code> to create columns.</p>
                    <br>
                    <div class="uk-grid" data-uk-grid-margin>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Diane Moreno</h3>
                            <h4 class="tm-card-title">CEO</h4>
                          </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-2.jpg" alt="Israel Carter - CTO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Israel Carter</h3>
                            <h4 class="tm-card-title">CTO</h4> </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-3.jpg" alt="Sharon Berry - CFO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Sharon Berry</h3>
                            <h4 class="tm-card-title">CFO</h4>
                          </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-4.jpg" alt="Kerry Clayton - Head Finance">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Kerry Clayton</h3>
                            <h4 class="tm-card-title">Head Finance</h4> </div>
                        </div>
                      </div>
                    </div>
                    <br>
                    <div class="uk-badge-note uk-badge">markup</div> 
                    <pre>&lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;&lt;div class="uk-panel-teaser"&gt;
&lt;img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO" &gt;

&lt;div class="tm-social-icons "&gt;
&lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
&lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;a class="tm-card-link" href="#"&gt;&lt;/a&gt;
&lt;div class="tm-card-content"&gt;
  &lt;h3 class="uk-panel-title"&gt;Diane Moreno&lt;/h3&gt;
  &lt;h4 class="tm-card-title"&gt;Chef&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
                    <br>
                    <p>You can set the <code>tm-icons-visible</code> class together with the <code>tm-social-icons</code> class to have it visible always.</p>
                    <br>
                    <div class="uk-badge-note uk-badge">markup</div>
                    <pre>&lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;&lt;div class="uk-panel-teaser"&gt;
&lt;img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO" &gt;

&lt;div class="tm-social-icons tm-icons-visible"&gt;
  &lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
  &lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;a class="tm-card-link" href="#"&gt;&lt;/a&gt;
&lt;div class="tm-card-content"&gt;
  &lt;h3 class="uk-panel-title"&gt;Diane Moreno&lt;/h3&gt;
  &lt;h4 class="tm-card-title"&gt;Chef&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
                    <br>
                    <h2 class="uk-module-title uk-margin-large-top">Cards with links</h2>

                    <p>Use the <code>tm-card-link</code> class to create a card with a link. The link can be an internal/external page or a modal box.</p>

                    <br>
                    <div class="uk-badge-note uk-badge">markup</div>
                    <pre>&lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;&lt;div class="uk-panel-teaser"&gt;
&lt;img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO" &gt;

&lt;div class="tm-social-icons tm-icons-visible"&gt;
  ...
&lt;/div&gt;

&lt;/div&gt;
&lt;a class="tm-card-link" href="#"&gt;&lt;/a&gt;
&lt;div class="tm-card-content"&gt;
  &lt;h3 class="uk-panel-title"&gt;Diane Moreno&lt;/h3&gt;
  &lt;h4 class="tm-card-title"&gt;Chef&lt;/h4&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>

                    <p>The following examples uses a modal box to show more information of the person. To use a modal box, link <code>tm-card-link</code> link to the unique id of a modal box.</p>

                    <div class="uk-grid" data-uk-grid-margin>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Diane Moreno</h3>
                            <h4 class="tm-card-title">CEO</h4>
                          </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-2.jpg" alt="Israel Carter - CTO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Israel Carter</h3>
                            <h4 class="tm-card-title">CTO</h4> </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-3.jpg" alt="Sharon Berry - CFO">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Sharon Berry</h3>
                            <h4 class="tm-card-title">CFO</h4>
                          </div>
                        </div>
                      </div>
                      
                      <!-- block -->
                      <div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4">
                        <div class="uk-panel uk-panel-box tm-panel-card">
                          <div class="uk-panel-teaser"> <img class="tm-card-avatar" src="images/demo/avatar/team-4.jpg" alt="Kerry Clayton - Head Finance">
                            <div class="tm-social-icons ">
                              <a href="#" class="uk-icon-button uk-icon-facebook" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-twitter" target="_self"></a>
                              <a href="#" class="uk-icon-button uk-icon-instagram" target="_self"></a>
                            </div>
                          </div>
                          
                          <a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"></a>
                          <div class="tm-card-content">
                            <h3 class="uk-panel-title">Kerry Clayton</h3>
                            <h4 class="tm-card-title">Head Finance</h4> </div>
                        </div>
                      </div>
                    </div>

                    <!-- modal box -->
                    <div aria-hidden="true" class="uk-modal" id="tm1">
                      <div class="uk-modal-dialog uk-modal-dialog-large uk-modal-dialog-lightbox tm-modal-dialog">
                        <a class="uk-modal-close uk-close uk-close-alt" href=""></a>
                        <div class="uk-grid uk-grid-collapse" data-uk-grid-margin="">
                          <div class="uk-width-medium-1-2">
                            <div class="tm-modal-image"><img alt="Diane Moreno" class="uk-width-1-1" height="478" src="images/demo/avatar/team-1-big.jpg" width="420"></div>
                          </div>
                          <div class="uk-width-medium-1-2">
                            <div class="uk-panel uk-panel-space">
                              <h3 class="uk-module-title">Diane Moreno</h3>
                              <h4 class="uk-margin-remove">Chief Executive Officer</h4><br>
                              <p>Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Sandal from The Endomics Dental Team.</p>
                              <p>She received her Doctorate in Medical Dentistry from the Boston University School of Dental. She later completed an extensive training in Conscious Sedation from Cambridge.</p><a class="uk-button-primary uk-button" href="#" target="_self">Read More</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="tm-toggle tm-toggle-code uk-accordion" data-uk-accordion="{showfirst:false,duration:300}">
                      <h3 class="uk-accordion-title"><i class="tm-toggle-button uk-float-right"></i>Show code</h3>
                      <div class="uk-accordion-content">
                        <code>&lt;div class="uk-grid" data-uk-grid-margin&gt;
  
  &lt;!-- block --&gt;
  &lt;div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4"&gt;
    &lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;
      &lt;div class="uk-panel-teaser"&gt; &lt;img class="tm-card-avatar" src="images/demo/avatar/team-1.jpg" alt="Diane Moreno - CEO"&gt;
        &lt;div class="tm-social-icons "&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-twitter" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-instagram" target="_self"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"&gt;&lt;/a&gt;
      &lt;div class="tm-card-content"&gt;
        &lt;h3 class="uk-panel-title"&gt;Diane Moreno&lt;/h3&gt;
        &lt;h4 class="tm-card-title"&gt;CEO&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- block --&gt;
  &lt;div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4"&gt;
    &lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;
      &lt;div class="uk-panel-teaser"&gt; &lt;img class="tm-card-avatar" src="images/demo/avatar/team-2.jpg" alt="Israel Carter - CTO"&gt;
        &lt;div class="tm-social-icons "&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-twitter" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-instagram" target="_self"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"&gt;&lt;/a&gt;
      &lt;div class="tm-card-content"&gt;
        &lt;h3 class="uk-panel-title"&gt;Israel Carter&lt;/h3&gt;
        &lt;h4 class="tm-card-title"&gt;CTO&lt;/h4&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- block --&gt;
  &lt;div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4"&gt;
    &lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;
      &lt;div class="uk-panel-teaser"&gt; &lt;img class="tm-card-avatar" src="images/demo/avatar/team-3.jpg" alt="Sharon Berry - CFO"&gt;
        &lt;div class="tm-social-icons "&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-twitter" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-instagram" target="_self"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"&gt;&lt;/a&gt;
      &lt;div class="tm-card-content"&gt;
        &lt;h3 class="uk-panel-title"&gt;Sharon Berry&lt;/h3&gt;
        &lt;h4 class="tm-card-title"&gt;CFO&lt;/h4&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- block --&gt;
  &lt;div class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-4"&gt;
    &lt;div class="uk-panel uk-panel-box tm-panel-card"&gt;
      &lt;div class="uk-panel-teaser"&gt; &lt;img class="tm-card-avatar" src="images/demo/avatar/team-4.jpg" alt="Kerry Clayton - Head Finance"&gt;
        &lt;div class="tm-social-icons "&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-facebook" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-linkedin" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-twitter" target="_self"&gt;&lt;/a&gt;
          &lt;a href="#" class="uk-icon-button uk-icon-instagram" target="_self"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;a class="tm-card-link" href="#tm1" data-uk-modal="{center:true}"&gt;&lt;/a&gt;
      &lt;div class="tm-card-content"&gt;
        &lt;h3 class="uk-panel-title"&gt;Kerry Clayton&lt;/h3&gt;
        &lt;h4 class="tm-card-title"&gt;Head Finance&lt;/h4&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- modal box --&gt;
&lt;div aria-hidden="true" class="uk-modal" id="tm1"&gt;
  &lt;div class="uk-modal-dialog uk-modal-dialog-large uk-modal-dialog-lightbox tm-modal-dialog"&gt;
    &lt;a class="uk-modal-close uk-close uk-close-alt" href=""&gt;&lt;/a&gt;
    &lt;div class="uk-grid uk-grid-collapse" data-uk-grid-margin=""&gt;
      &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="tm-modal-image"&gt;&lt;img alt="Diane Moreno" class="uk-width-1-1" height="478" src="images/demo/avatar/team-1-big.jpg" width="420"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="uk-width-medium-1-2"&gt;
        &lt;div class="uk-panel uk-panel-space"&gt;
          &lt;h3 class="uk-module-title"&gt;Diane Moreno&lt;/h3&gt;
          &lt;h4 class="uk-margin-remove"&gt;Chief Executive Officer&lt;/h4&gt;&lt;br&gt;
          &lt;p&gt;Diane Moreno is an British Board Certified (BBE) and London Board Certified Periodontist (LBCP) who joined Sandal from The Endomics Dental Team.&lt;/p&gt;
          &lt;p&gt;She received her Doctorate in Medical Dentistry from the Boston University School of Dental. She later completed an extensive training in Conscious Sedation from Cambridge.&lt;/p&gt;&lt;a class="uk-button-primary uk-button" href="#" target="_self"&gt;Read More&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code>
                      </div>
                    </div>

                  </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>