Style Guide

Ü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

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

Primary

Code

        
            <div class="button-box">
            {% render "button", tag: "a", href: "tel:12345", label: "Primary", icon: "cart" %}
            </div>

Invert

Code

        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Invert", icon: "lock" %}
            </div>

Dark

Code

        
            <div class="button-box">
            {% render "button", tag: "a", type: "dark", label: "Dark", icon: "lock" %}
            </div>

Icon right

Code

        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Icon right", icon_right: "arrow-right" %}
            </div>

Two Icons

Code

        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Two Icons", icon: "arrow-left", icon_right: "arrow-right" %}
            </div>

Icon primary

Code

        
            <div class="button-box">
            {% render "button", tag: "a", type: "invert", label: "Icon primary", icon: "calendar-check", icon_class: "primary" %}
            </div>

No Icon

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

arrow-left

arrow-right

arrow-up

arrow-down

calculator

calendar-check

cart

check

check-large

checkbox keep-svg

checkbox active keep-svg

close

color

delivery

edit

euro

filter

guarantee

heart

info

key

lock

mail

menu

minus

motorbike

nav-down

nav-left

nav-up

nav-right

phone

plus

price

radio-btn keep-svg

radio-btn active keep-svg

search

share

sort

speed

trash

return

verified

condition

truck

time

label

refresh

burger

arrow-long-up

arrow-long-down

arrow-long-left

arrow-long-right

warning

profile

success, check-circle

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

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.

Anrufen Mail schreiben Whatsapp

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

Sonderangebot

02.2024
348 km
12 PS

YAMAHA NMAX 125 3.589 €4.024 € Filderstadt

06.2010
54.048 km
148 PS

DUCATI MULTISTRADA 1200 6.479 € Filderstadt

04.2023
10.998 km
114 PS

DUCATI HYPERMOTARD 950 SP 19.188,09 € Filderstadt

Neu
0 km
87 PS

HONDA REBEL CMX 1100 T 12.190 € Reutlingen

Neu
0 km
87 PS

HONDA REBEL CMX 1100 T DCT 13.190 € Reutlingen

Neu
0 km
87 PS

HONDA REBEL CMX 1100 11.490 € Reutlingen

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>

Übersicht

Bestellungen

Wunschliste

Gespeicherte Suchen

Persönliche Daten

Adressen

Ü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

Common

Common with a tag

Auto width (button with class auto)

Button-Box 2 Buttons

Button-Box 3 Buttons

Experte

Detail CTA

About CTA

Icons

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

Accordion

STD Scroller

Modal Test