Skip to main content

Switcher

The Switcher element displays a tabbed navigation which transitions through content slides. It has Title, Meta, Content, Image, Link, Navigation Label and Navigation Thumbnail fields.

  • Ultra Lightweight Frame

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Read more

  • The Durability of the Velvø Touring Bike

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Read more

  • Hight Quality Material

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Read more

Animation and Content Height

Choose one of the different switcher animations. Optionally, expand all content slides to the same height to prevent subsequent content from jumping when switching between slides.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    • Etiam ultricies nisi vel augue curabitur ullamcorper ultricies nisi
    • Curabitur ultricies nisi nam eget dui maecenas tempus
    • Donec sodales magna
    • Quisque rutrum

    Material & Care Instructions

  • Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum.

    • Maecenas tempus tellus eget
    • Donec sodales magna
    • Quisque rutrum
    • Lorem ipsum dolor sit amet
    Size Guide

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    Delivery Time

    Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
    Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget.

Navigation

Add a tab, subnav or a thumbnav navigation to navigate to the previous and next slides. The pill and divider styles are only available for horizontal subnavs.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut.

Position and Alignment

Select the position and alignment of the navigation in regards to the content. If aligned to the left or right, the navigation column width can be the same size as its items, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the navigation stacks.

  • What is the role of my consultant?

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

  • Do we really need a business plan?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

  • How does the process work?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

  • What are your qualifications?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

  • How do I contact the team?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

  • How big is a project team?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit pellentesque habitant. Dictum non consectetur a erat nam at. Sed egestas egestas fringilla phasellus. Dui accumsan sit amet nulla facilisi. Id volutpat lacus laoreet non. Integer quis auctor elit sed vulputate mi. A arcu cursus vitae congue mauris rhoncus. Pretium quam vulputate dignissim suspendisse in est.

    Euismod nisi porta lorem mollis aliquam ut porttitor. Euismod quis viverra nibh cras pulvinar. Amet dictum sit amet justo donec enim. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Egestas congue quisque egestas diam in arcu cursus. A erat nam at lectus. Condimentum lacinia quis vel eros. Ac odio tempor orci dapibus.

Thumbnav

If the thumbnav is selected, set the width and the height for the thumbnail image and define whether thumbnails wrap into multiple lines if the container is too small. SVG images can be injected into the page markup and further styled with CSS. Optionally, select a different image for the thumbnail.
  • Tennis Court
  • Gastronomy
  • Spa Area
  • Events

  • Tennis Court

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  • Gastronomy

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  • Spa Area

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  • Events

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.

  • "At vero eos et accusam et justo
    duo dolores et ea rebum."

  • "Amet consectetur adipiscing elit
    pellentesque habitant."

  • “Stet clita kasd gubergren, no sea
    takimata sanctus est.”

  • "Sed egestas fringilla phasellus. Dui
    accumsan sit amet nulla."

  • "Ut enim ad mini veniam, quis nostrud
    exercitation ullamco laboris nisi."

  • "At vero eos et accusam et justo<br class="uk-visible@s"> duo dolores et ea rebum."
  • "Amet consectetur adipiscing elit<br class="uk-visible@s"> pellentesque habitant."
  • “Stet clita kasd gubergren, no sea<br class="uk-visible@s"> takimata sanctus est.”
  • "Sed egestas fringilla phasellus. Dui<br class="uk-visible@s"> accumsan sit amet nulla."
  • "Ut enim ad mini veniam, quis nostrud<br class="uk-visible@s"> exercitation ullamco laboris nisi."

Image Alignment

The switcher item image can be aligned in regards to the content. If aligned to the left or right, the image column width can be the same size as the image, a fixed width or percentage. Additionally, define the grid gaps and set the breakpoint from which the image stacks.
  • Empower Your Team

    Work With the
    Best Software

    Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua.
    Read more
  • Stay in Touch

    Collaborate With
    Your Team

    Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua.
    Read more
  • Optimize Productivity

    Work More Efficiently With Integrated Apps

    Lorem ipsum dolor sit amet consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat sed diam voluptua.
    Read more

More Settings

Options for the different content fields are very similar across all elements. They are described in the corresponding Headline, Text, Image and Button element documentation.

  • Fully Equipped Kitchen

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Read more

  • High-end Bathroom

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Read more

  • Our Living Room Is Equipped With “Smart Home”

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Read more

  • Modern and Contemporary Bedroom Design

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Read more