Elements - Sandal

English

- 8:00 am to 10:00 pm

### Talk to us now

+49 555 000 000

### Visit our offices

Mirage Plaza - Hamburg

### Send us an email

hello@sandal.com

### We are open all day

8:00 am to 10:00 pm daily

# Elements

## Slider

To create a slideset of panels with filters, use the `uk-slideset` class. The attributes can be used configure the parameters of the slider. See this table for all the available settings options.

You can create filters using the data-uk-filter attribute.

markup

    <ul class="uk-subnav uk-flex-center">
      <li class="uk-active" data-uk-filter=""><a href="#">All</a></li>
      <li data-uk-filter="design"><a href="#">design</a></li>
      <li data-uk-filter="mockup"><a href="#">mockup</a></li>
    </ul>

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

- ### Your title here

  Lorem ipsum dolor sit amet, consectetur adipisicing elit

### Show code

`<div class="tm-slideset-sandal" data-uk-slideset="{default: 1,small: 2,medium: 2,large: 3, xlarge: 3, animation: 'slide-horizontal'}"> <ul class="uk-subnav uk-flex-center"> <li class="uk-active" data-uk-filter=""><a href="#">All</a></li> <li data-uk-filter="design"><a href="#">design</a></li> <li data-uk-filter="mockup"><a href="#">mockup</a></li> <li data-uk-filter="illustration"><a href="#">illustration</a></li> <li data-uk-filter="brochure"><a href="#">brochure</a></li> <li data-uk-filter="architecture"><a href="#">architecture</a></li> </ul> <div class="uk-slidenav-position uk-margin"> <ul class="uk-grid uk-slideset uk-grid-match uk-flex-center"> <!-- slideset panel --> <li data-uk-filter="brochure"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/1.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/1.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Butternut ravioli</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="illustration"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/2.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/2.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Grilled snapper</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="mockup"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/3.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/3.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Roasted mockup</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="architecture,illustration"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/4.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/4.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Golden Prawns</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="design"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/5.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/5.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">French Salad</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="design"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/6.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/6.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Focaccia Bread</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> <!-- slideset panel --> <li data-uk-filter="brochure"> <div class="uk-panel uk-panel-box uk-panel-box-hover uk-overlay-hover uk-text-left"> <a data-uk-lightbox="{group:'slideset'}" class="uk-position-cover uk-position-z-index" href="images/demo/gallery/7.jpg"></a> <div class="uk-text-center uk-panel-teaser"> <div class="uk-overlay "> <img src="images/demo/gallery/7.jpg" class="uk-overlay-scale" alt="title" width="605" height="605" url="#"> <div class="uk-overlay-panel uk-overlay-background uk-overlay-icon uk-overlay-fade"></div> <div class="tm-overlay-box"></div> </div> </div> <h3 class="uk-panel-title">Spaghetti Bolognese</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit </div> </li> </ul> <a href="" class="uk-slidenav uk-slidenav-previous uk-hidden-touch" data-uk-slideset-item="previous"></a> <a href="" class="uk-slidenav uk-slidenav-next uk-hidden-touch" data-uk-slideset-item="next"></a> </div> <ul class="uk-slideset-nav uk-dotnav uk-flex-center uk-margin-bottom-remove"> <li data-uk-slideset-item="0"> <a></a> </li> </ul> </div>`

Sandal LLC.
Hamburg, Germany
One Street | Two Drive,
10th Floor, Site Wing
+49 555 000 000
hello@sandal.com
support@sandal.com

### Recent Posts

- Have faith in your abilities
  Believe in yourself! Have faith in your abilities! Without a...
- Live in the only moment
  Always continue the climb. It is possible for you to...

### Our Work

- Gaucho Cafe
- Fontaine Corp
- Saffron Magazine
- Celsius gallery
- Fidelity business
- Lighthouse Church
- Sauna Spa

### Our Values

Do not dwell in the past, do not dream of the future, concentrate the mind on now.

Let reality be reality. Let things flow naturally. Do not dwell in the past, do not dream of the future.

Copyright © Sandal Template by arrowthemes