Hero
guide de style
Styleguide Preheading

Collection: Styleguide Mainheading Yes

Simple Image
Teaser Image
Image Text
Teaser Image

Image Left Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio it amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio it amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio quasi suscipit vel!

Button
Teaser Image

Image Right Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio quasi suscipit vel!

Button
Teaser Image

Image Left Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio it amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio it amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio quasi suscipit vel!

Button
Text Teaser

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid amet at autem blanditiis consequatur culpa dignissimos, earum eos esse exercitationem fugiat, hic incidunt maxime natus neque non possimus praesentium provident quaerat quia recusandae similique tempora unde, veritatis voluptates. Doloremque id impedit inventore laudantium magnam nihil numquam qui similique. Culpa cupiditate dolor dolores eligendi enim facilis illum ipsa itaque magni, modi odio officia quam rem saepe tempora veniam vero! Accusamus animi architecto distinctio dolore ex facilis fugiat, fugit itaque laborum minus, nemo perferendis quae quisquam tempora tempore totam ut vit

Mehr erfahren
Bild Teaser
Teaser Image

Image Left Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio quasi suscipit vel!

Button
Teaser Image

Image Right Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aperiam asperiores, dignissimos, ducimus excepturi inventore ipsam minus perferendis provident quaerat quas repellat sequi vel. Excepturi inventore odio quasi suscipit vel!

Button
Backgrounds + Text + Button Colors

bg-light-orange

Text-Black

button--primary

bg-primary / orange

Text-Black

button--light-orange

bg-melone

text-white

button--dark-blue

bg-dark-green

text-white

button--light-green

bg-light-green

text-white

button--dark-green

bg-light-baby-blue

text-black

button--dark-blue

bg-dark-blue

text-white

button--light-baby-blue

bg-red-brown

text-white

button--secondary (dark brown)

bg-light-beige

text-black

button--secondary (dark brown)

bg-blue

text-white

button--blue (dark blue)

2023 Colors

bg-deep-orange

text-Light Lemon

button--primary

bg-primary / light-lemon

text-Deep Orange

button--deep-orange

bg-pale-rose

text-red-rose

button--red-rose

bg-red-rose

text-pale-rose

button--primary

bg-lavender

text-vivid-violet

button--vivid-violet

bg-vivid-violet

text-lavender

button--primary

bg-light-azure

text-electric-blue

button--electric-blue

bg-electric-blue

text-light-azure

button--dark-blue

bg-apple-green

text-celtic-green

button--celtic-green

bg-celtic-green

text-apple-green

button--apple-green
Content for Layout (Flexibel Components)

Collection: Styleguide Mainheading Yes

Tous les composants possibles sont répertoriés ici.

Collapsible content

FAQ

Benefits - Marquee
Natuerlich snacken 1 Hoechste Qualitaet 2 Hello 3 Alles fein 4 Hello 5 gut 6 Hello 7 schlecht 8 Hello 9
Typography - Prose

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Horizontal Rule


Paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequatur dolore dolorem earum est maxime neque nihil omnis quibusdam sed temporibus, ullam voluptas voluptatibus. Beatae commodi consequuntur eius, exercitationem inventore ipsam ipsum natus nisi quibusdam quos rem similique suscipit voluptatem.

Blockquote

As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, citations almost always appear as part of the quotation – it’s highly conventional.

Defintion List

Glossary

RSS
An XML format for aggregating information from websites whose content is frequently updated.
Weblog
Contraction of the term "web log", a weblog is a website that is periodically updated, like a journal

Image

Macaque in the trees
A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

Lists

Ordered

  1. Lorem ipsum dolor sit.
  2. Ab harum iste pariatur.
  3. Et modi recusandae vitae.
  4. Cupiditate ea impedit quae!
  5. Debitis dolore explicabo nulla!

Unordered

  • Lorem ipsum dolor sit.
  • Corporis exercitationem illo ipsam.
  • Asperiores consectetur in maxime!
  • Cum, distinctio, hic. Atque.
  • Dignissimos exercitationem iusto quaerat.

Nested

  1. Nested lists are rarely a good idea.
    • You might feel like you are being really "organized" or something but you are just creating a gross shape on the screen that is hard to read.
    • Nested navigation in UIs is a bad idea too, keep things as flat as possible.
    • Nesting tons of folders in your source code is also not helpful.
  2. Since we need to have more items, here's another one.
    • I'm not sure if we'll bother styling more than two levels deep.
    • Two is already too much, three is guaranteed to be a bad idea.
    • If you nest four levels deep you belong in prison.
  3. Two items isn't really a list, three is good though.
    • Again please don't nest lists if you want people to actually read your content.
    • Nobody wants to look at this.
    • I'm upset that we even have to bother styling this.

Table

Wrestler Origin Finisher
Bret "The Hitman" Hart Calgary, AB Sharpshooter
Stone Cold Steve Austin Austin, TX Stone Cold Stunner
Randy Savage Sarasota, FL Elbow Drop
Vader Boulder, CO Vader Bomb
Razor Ramon Chuluota, FL Razor's Edge
Card - Custom
Badges
Épuisé -10% Nouveau 24,00€
Buttons
Anchor Link

Anchor Link











Default Button Class


Secondary Button Class


blue Button Class


Dark Green Button Class


Button Ghost


Button Small


Button Full

Inputs

Default input ({ inputValue01 })

Search input ({ inputValue02 })

Account Addresses

Kontaktdaten

Use a permanent address where you can recieve mail.

Patrick Ludewig
Gurkgasse 51/19
11400 Berlin
Deutschland

  • Patrick Ludewig
    Gurkgasse 51/19
    11400 Berlin
    Deutschland

    Adresse bearbeiten

  • Standard

    Patrick Ludewig
    Gurkgasse 53
    11400 Berlin
    Deutschland

    Adresse bearbeiten

Dropdowns
Tabs
Tab 1 content
Sidebar
Popup
Grid - Card - Custom
Vegane Kakap OVERNIGHT OATS MIT KÜRBISKERNEN

Die veganen Kakao Overnight Oats mit Kuerbiskernen und Mandeln sorgen für einen genussvollen Start in den Tag

Vegane Kaka KÜRBISKERNEN

Die veganen Kakao Overnight Oats mit Kuerbiskernen

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Slider - Card - Custom
Previous
[force excerpt] Vegane OATS MIT KÜRBISKERNEN

Tous les composants possibles sont répertoriés ici.

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Next
Previous
[force excerpt] Vegane OATS MIT KÜRBISKERNEN

Tous les composants possibles sont répertoriés ici.

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Vegane OATS MIT KÜRBISKERNEN

Die veganen Kakao Oln sorgen für einen genussvollen Start in den Tag

Next
Product Recommendations

You can also use productIds to get product recommendations for this product id's:

Shopify Product Recommendations

Previous
Next

You can also use addProductHandles to add specific products to the recommendations:

Specific Product Recommendations

Previous
Next

You can also use both together:

Mixed Product Recommendations

Previous
Next
Progress bars

Change the input to increase the progress bars

Toaster
Warning


Danger


Info


Success