Übersicht

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dicta distinctio ducimus ex exercitationem nobis nulla vitae, voluptas voluptatibus! Dolores ea, earum esse facilis magni modi officia optio! Nesciunt, voluptate.

A at dolor expedita fuga fugit magni molestias nam neque saepe voluptatem? Blanditiis dolorum eius enim eos, eum hic in natus nulla numquam perferendis quia sed sit voluptatem voluptates voluptatum.

Atque culpa, delectus eligendi fugit impedit labore minus nesciunt nisi nulla officiis porro quia quos repudiandae temporibus totam? Ad alias architecto beatae dolor enim maxime perspiciatis quis reprehenderit sapiente soluta?

Assumenda, aut, dicta eveniet fugit illum in minus molestiae nam nihil quia quos repellendus voluptatem. Dicta excepturi nulla voluptatibus. Accusantium amet assumenda est excepturi, facere incidunt nobis nulla provident voluptatem.

Ad, autem beatae doloremque, enim explicabo ipsa, laudantium magnam nihil officiis omnis quod sunt vero voluptatibus? Ab dignissimos eos in incidunt magnam molestias nesciunt praesentium quis suscipit veritatis. Minima, numquam?

Aliquid earum eveniet in iusto natus omnis, quia rem sed sint totam! A at dicta dolorum expedita fugiat iure libero, necessitatibus odio porro recusandae repudiandae sapiente tempora totam voluptates voluptatum.

Dolorum ea sunt tempore. Animi consectetur dolor eaque et fugit in inventore minima necessitatibus nihil quasi. Aliquam architecto deserunt, error eum eveniet inventore laboriosam maxime, obcaecati odit officiis qui, vel!

Amet cumque dicta earum facilis fugiat illum iste iure laborum minima modi odio qui quidem, quos rem rerum sed, unde! Ab accusamus delectus eos eveniet explicabo fuga maiores similique vitae!

Officia, quibusdam recusandae. Consequatur eveniet minima modi suscipit. Alias aliquam atque culpa dignissimos dolor dolore, ducimus eveniet ex excepturi incidunt iste, molestiae, numquam odio optio porro repellat similique voluptatum! Sed?

Accusantium, ad adipisci amet animi asperiores aspernatur beatae consectetur culpa dicta distinctio dolore ea error, iure molestias necessitatibus nesciunt odio, odit perferendis possimus quos ratione reprehenderit rerum sunt temporibus totam.

Bestellungen

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores consectetur dicta, eaque hic mollitia nihil odio quaerat quam quisquam ut.

Aut, beatae dolorem enim esse facilis iure magnam molestiae nam natus nobis non odit optio placeat quas qui ut velit!

Accusantium adipisci atque blanditiis consectetur dicta dolorem doloremque error, et hic laboriosam magnam nam, nihil nobis officiis sit suscipit ut!

Dolorum fugit illo nemo quaerat quas sapiente voluptatem. Aliquam delectus dolores enim fugit labore nesciunt rerum sit veniam voluptatibus voluptatum!

Accusantium ad adipisci, asperiores consequuntur corporis deleniti dolore dolorem harum magni nemo nesciunt perspiciatis possimus quibusdam vero voluptatibus. Doloribus, ipsa.

Sed sequi soluta voluptas! Animi dignissimos fugit pariatur. Aliquid animi architecto dicta dolore est exercitationem illo nesciunt numquam quaerat veniam.

Alias dolore est harum hic illo itaque labore molestiae natus non nostrum placeat porro quasi similique ullam, veniam! Ex, possimus?

Amet aut autem maxime mollitia perspiciatis, placeat quasi quisquam reiciendis. Accusantium, at consequatur ipsa ipsam quasi quod! Asperiores, maiores, sint?

Wunschliste

Gespeicherte Suchen

Persönliche Daten

Adressen

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos distinctio dolor doloremque, eum exercitationem facilis soluta temporibus totam ut vel. Cum dolorem est modi mollitia perferendis totam voluptate voluptatibus? Enim libero possimus rem. A accusantium ad adipisci autem cumque distinctio doloribus eaque hic laboriosam modi mollitia perferendis porro quisquam recusandae, repellat rerum saepe sed suscipit temporibus ullam. Accusamus aliquam aspernatur atque beatae distinctio dolor ea enim exercitationem explicabo harum illo inventore labore natus nemo nisi, possimus provident quibusdam quod sapiente sint, tempora, veniam veritatis. Atque cum ea eaque earum soluta tempora. Accusamus assumenda consectetur delectus, fugiat libero praesentium soluta vitae!

Übersicht

Bestellungen

Wunschliste

Gespeicherte Suchen

Persönliche Daten

Adressen

Form Elements

Example address form

Multiselect Test

Select Variants






Special types














X-Radio-Group Elements

Calendar

Start Ende

Common

Code
        
            <div class="button-box">
            {% render "button", label: "Primary", icon: "cart" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "invert", label: "Invert", icon: "lock" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "dark", label: "Dark", icon: "lock" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "invert", label: "Icon right", icon_right: "arrow-right" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "invert", label: "Two Icons", icon: "arrow-left", icon_right: "arrow-right" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "invert", label: "Icon primary", icon: "calendar-check", icon_class: "primary" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", type: "invert", label: "No Icon" %}
            </div>
        
        

Common with a tag

Code
        
            <div class="button-box">
            {% render "button", tag: "a", href: "tel:12345", label: "Primary", icon: "cart" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Invert", icon: "lock" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "dark", label: "Dark", icon: "lock" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Icon right", icon_right: "arrow-right" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Two Icons", icon: "arrow-left", icon_right: "arrow-right" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Icon primary", icon: "calendar-check", icon_class: "primary" %}
            </div>
        
        
Code
        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "No Icon" %}
            </div>
        
        

Auto width (button with class auto)

Code
        
            <div class="button-box">
            {% render "button", label: "Primary", icon: "cart", width: "auto" %}
            </div>
        
        

Button-Box 2 Buttons

Code
        
            <div class="button-box">
            {% render "button", label: "Anrufen", icon: "phone" %}
            {% render "button", label: "Mail schreiben", icon: "mail" %}
            </div>
        
        

Button-Box 3 Buttons

Code
        
            <div class="button-box">
            {% render "button", label: "Anrufen", icon: "phone" %}
            {% render "button", label: "Mail schreiben", icon: "mail" %}
            {% render "button", label: "Whatsapp", icon: "whatsapp" %}
            </div>
        
        

Experte

Code
        
            <div class="button-box">
            {% render "button", label: "Anrufen", icon: "phone" %}
            {% render "button", label: "Mail schreiben", icon: "mail" %}
            {% render "button", label: "Whatsapp", icon: "whatsapp" %}
            </div>
        
        

Detail CTA

Code
        
            <div class="button-box vertical">
            {% render "button", label: "Kaufen", icon: "cart" %}
            {% render "button", type: "invert", label: "Reservieren", icon: "lock" %}
            </div>
        
        

About CTA

Code
            
                <div class="button-box vertical">
                {% render "button", type: "dark", label: "Testfahrt buchen", icon: "calendar-check", icon_right: "arrow-right", icon_right_class: "primary" %}
                </div>
                <div class="button-box vertical">
                {% render "button", type: "dark", label: "Motorrad mieten", icon: "motorbike", icon_right: "arrow-right", icon_right_class: "primary" %}
                </div>
            
        

Icons

If an icon needs to be rotated, rotate the after pseudo, not the span.icon, otherwise Firefox shows artifacts!

sort
<span class="icon sort"></span>
arrow-left
<span class="icon arrow-left"></span>
arrow-right
<span class="icon arrow-right"></span>
arrow-up
<span class="icon arrow-up"></span>
arrow-down
<span class="icon arrow-down"></span>
calculator
<span class="icon calculator"></span>
calendar-check
<span class=icon calendar-check"></span>
cart
<span class="icon cart"></span>
check
<span class="icon check"></span>
check-large
<span class="icon check-large"></span>
checkbox keep-svg
<span class="icon checkbox keep-svg"></span>
checkbox active keep-svg
<span class="icon checkbox active keep-svg"></span>
close
<span class="icon close"></span>
color
<span class="icon color"></span>
delivery
<span class="icon delivery"></span>
edit
<span class="icon edit"></span>
euro
<span class="icon euro"></span>
filter
<span class="icon filter"></span>
guarantee
<span class="icon guarantee"></span>
heart
<span class="icon heart"></span>
info
<span class="icon info"></span>
key
<span class="icon key"></span>
lock
<span class="icon lock"></span>
mail
<span class="icon mail"></span>
menu
<span class="icon menu"></span>
minus
<span class="icon minus"></span>
motorbike
<span class="icon motorbike"></span>
nav-down
<span class="icon nav-down"></span>
nav-left
<span class="icon nav-left"></span>
nav-up
<span class="icon nav-up"></span>
nav-right
<span class="icon nav-right"></span>
phone
<span class="icon phone"></span>
pin
<span class="icon pin"></span>
plus
<span class="icon plus"></span>
price
<span class="icon price"></span>
radio-btn keep-svg
<span class="icon radio-btn keep-svg"></span>
radio-btn active keep-svg
<span class="icon radio-btn active keep-svg"></span>
search
<span class="icon search"></span>
share
<span class="icon share"></span>
sort
<span class="icon sort"></span>
speed
<span class="icon speed"></span>
trash
<span class="icon trash"></span>
return
<span class="icon return"></span>
verified
<span class="icon verified"></span>
whatsapp
<span class="icon whatsapp"></span>
condition
<span class="icon condition"></span>
truck
<span class="icon truck"></span>
time
<span class="icon time"></span>
label
<span class="icon label"></span>
refresh
<span class="icon refresh"></span>
burger
<span class="icon burger"></span>
arrow-long-up
<span class="icon arrow-long-up"></span>
arrow-long-down
<span class="icon arrow-long-down"></span>
arrow-long-left
<span class="icon arrow-long-left"></span>
arrow-long-right
<span class="icon arrow-long-right"></span>
warning
<span class="icon warning"></span>
profile
<span class="icon profile"></span>
success, check-circle
<span class="icon success"></span>
<span class="icon check-circle"></span>

Accordion

Wie funktioniert der Online-Kauf?Ein-/ausklappen

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, 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.

Was prüft ihr beim Qualitätscheck eurer Maschinen?Ein-/ausklappen

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.

Wie kommt mein Motorrad zu mir?Ein-/ausklappen

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, 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.

Kann ich mein bisheriges Motorrad in Zahlung geben?Ein-/ausklappen

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, 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.

Sind bei der Zulassung über euch Wunschkennzeichen möglich?Ein-/ausklappen

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.

Muss ich in der Garantielaufzeit zu euch zum Service kommen?Ein-/ausklappen

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, 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.

Kann ich auch ohne Erfahrungen eine Testfahrt bei euch buchen?Ein-/ausklappen

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, 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.

Code
    
        {% assign accordion_items = section.blocks | where: "type", "accordion-item" %}
        {% render 'accordion' with accordion_items as items %}
    
        
Experte

Fabio Limbächer

Experte

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet architecto aut consectetur dolorum ducimus eaque harum id incidunt iusto.

Weiter lesenEin-/ausklappen
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet architecto aut consectetur dolorum ducimus eaque harum id incidunt iusto, laboriosam laborum laudantium, magni natus neque, nostrum obcaecati officia officiis omnis perspiciatis placeat quae quam quis quo sed sint unde.
Code
    
        <section class="lim-expert">
        <div class="expert-card">
        <header>
        <span>{{ expert_heading }}</span>
        <h2>{{ expert_name }}</h2>
        </header>
        <img src="{{ expert_img | asset_url }}" alt="{{ img_alt }}">
        <p>{{ expert_short_description }}</p>
        <accordion-box>
        {%- assign open = false -%}
        {%- assign label = "general.read_more" | t -%}
        {%- render "accordion-item", open: open, label: label, content: expert_description -%}
        </accordion-box>
        <div class="button-box">
        {%- assign label = "label.phone_call" | t -%}
        {% render "button", tag: "a", href: expert_phone_url, label: label, icon: "phone" %}
        {%- assign label = "label.send_mail" | t -%}
        {% render "button", tag: "a", href: expert_email_url, label: label, icon: "mail" %}
        {%- assign label = "label.whatsapp_message" | t -%}
        {% render "button", tag: "a", href: expert_whatsapp_url, label: label, icon: "whatsapp" %}
        </div>
        </div>
        </section>
    
    

STD Scroller

KTM 390 ADVENTURE
  • Neu
  • 0 km
  • 43 PS
KTM 390 ADVENTURE 7.089 Reutlingen, Filderstadt
KTM 890 ADVENTURE
Sonderangebot
  • Neu
  • 0 km
  • 104 PS
KTM 890 ADVENTURE 14.479 Reutlingen, Filderstadt
YAMAHA NEO'S
  • Neu
  • 0 km
  • 2 PS
YAMAHA NEO'S 3.824 Reutlingen
KTM 1290 SUPER ADVENTURE S
  • 03.2019
  • 12.596 km
  • 160 PS
KTM 1290 SUPER ADVENTURE S 12.989 Filderstadt
KAWASAKI VERSYS 650 GRAND TOURER
  • 03.2020
  • 4.194 km
  • 69 PS
KAWASAKI VERSYS 650 GRAND TOURER 7.489 Filderstadt
KAWASAKI KLX 250E
Neu
  • 09.1994
  • 23.305 km
  • 24 PS
KAWASAKI KLX 250E 1.450 Filderstadt
Code
    
        <section class="std-scroller">
        <h2>STD Scroller</h2>
        <span class="scroller-nav icon nav-left" data-dir="prev"></span>
        <span class="scroller-nav icon nav-right" data-dir="next"></span>
        <div class="scroller snap">
        {% for product in collections.all.products limit: 6 %}
        {%- render "product-tile", item: product -%}
        {%- endfor -%}
        </div>
        </section>