Styleguide

Um unseren Shop in vollem Umfang nutzen zu können, empfehlen wir Dir Javascript in Deinem Browser zu aktivieren.

Lorem Ipsum dolor sit amet

Cookie-Einstellungen

Table of Contents:

CMS helpers
Colors
Fonts
Buttons & Links
Shadows
Alerts
Forms

CMS helpers:

Class	Description	Location
`cms-helper-indent`	Rückt den Content im größten Viewport ein (only desktop)	Block-Einstellungen Layout CSS-Klassen
`cms-helper-seo`	Spezielle formatierung des SEO-Beschreibungstextes	Sektion-Einstellungen CSS-Klassen
`cms-helper-padding`	Abstand der einzelnen Sektionen nach oben und unten (mobile & desktop)	Sektion-Einstellungen CSS-Klassen
`cms-helper-background`	Weißer Hintergrund der gesamten Sektion	Sektion-Einstellungen CSS-Klassen
`cms-helper-repeat`	Wiederholt (kachelt) das hinterlegte Bild	Sektion-Einstellungen CSS-Klassen

Colors:

Color	Hexcode	Variable	Class
	`#31a534`	`$sw-color-brand-primary`	`text-sw-color-brand-primary` `bg-sw-color-brand-primary` `border border-sw-color-brand-primary` `hover-sw-color-brand-primary`
	`#0c7f95`	`$sw-color-brand-secondary`	`text-sw-color-brand-secondary` `bg-sw-color-brand-secondary` `border border-sw-color-brand-secondary` `hover-sw-color-brand-secondary`
	`#8f1f20`	`$sw-color-brand-tertiary`	`text-sw-color-brand-tertiary` `bg-sw-color-brand-tertiary` `border border-sw-color-brand-tertiary` `hover-sw-color-brand-tertiary`
	`#e57226`	`$sw-color-brand`	`text-sw-color-brand` `bg-sw-color-brand` `border border-sw-color-brand` `hover-sw-color-brand`

	`#f9f9f9`	`$sw-color-gray-200`	`text-sw-color-gray-200` `bg-sw-color-gray-200` `border border-sw-color-gray-200` `hover-sw-color-gray-200`
	`#e2e2e2`	`$sw-color-gray-400`	`text-sw-color-gray-400` `bg-sw-color-gray-400` `border border-sw-color-gray-400` `hover-sw-color-gray-400`
	`#cecece`	`$sw-color-muted`	`text-sw-color-muted` `bg-sw-color-muted` `border border-sw-color-muted` `hover-sw-color-muted`
	`#8f8f8f`	`$sw-color-gray-600`	`text-sw-color-gray-600` `bg-sw-color-gray-600` `border border-sw-color-gray-600` `hover-sw-color-gray-600`
	`#5d5d5d`	`$sw-color-gray-800`	`text-sw-color-gray-800` `bg-sw-color-gray-800` `border border-sw-color-gray-800` `hover-sw-color-gray-800`
	`#252525`	`$sw-text-color`	`text-sw-text-color` `bg-sw-text-color` `border border-sw-text-color` `hover-sw-text-color`

	`#3cc261`	`$sw-color-success`	`text-sw-color-success` `bg-sw-color-success` `border border-sw-color-success` `hover-sw-color-success`
	`#26b6cf`	`$sw-color-info`	`text-sw-color-info` `bg-sw-color-info` `border border-sw-color-info` `hover-sw-color-info`
	`#ffbd5d`	`$sw-color-warning`	`text-sw-color-warning` `bg-sw-color-warning` `border border-sw-color-warning` `hover-sw-color-warning`
	`#e52427`	`$sw-color-danger`	`text-sw-color-danger` `bg-sw-color-danger` `border border-sw-color-danger` `hover-sw-color-danger`

Fonts:

Sizes:

Example	Size	Class
Shopware 6 Monsterzeug Theme	40px	`h1`
Shopware 6 Monsterzeug Theme	32px	`h2`
Shopware 6 Monsterzeug Theme	28px	`h3`
Shopware 6 Monsterzeug Theme	24px	`h4`
Shopware 6 Monsterzeug Theme	20px	`h5`
Shopware 6 Monsterzeug Theme	16px	`h6`
Shopware 6 Monsterzeug Theme	14px	`small`
Shopware 6 Monsterzeug Theme	12px	`tiny`

Families:

Example	Family	Class
Shopware 6 Monsterzeug Theme	Proxima	`font-family-heading`
Shopware 6 Monsterzeug Theme	Roboto	`font-family-base`

Weights:

Example	Weight	Class
Shopware 6 Monsterzeug Theme	Normal	`font-weight-normal`
Shopware 6 Monsterzeug Theme	Bold	`font-weight-bold`

Hinweis: Die oben genannten Weights gelten nur für font-family-base

Buttons & Links:

Button	Class
Jetzt kaufen	`btn btn-primary btn-sm`
Jetzt kaufen	`btn btn-primary`
Jetzt kaufen	`btn btn-primary btn-icon`
Jetzt kaufen	`btn btn-primary btn-lg`
Jetzt kaufen	`btn btn-primary btn-block`
Jetzt kaufen	`btn btn-secondary`
Jetzt kaufen	`btn btn-dark`
Jetzt kaufen	`btn btn-outline-light`
Jetzt kaufen	`link`

Shadows:

Shadow	Class
	`shadow-sm`
	`shadow`
	`shadow-lg`

Alerts:

Primary Lorem ipsum dolor

Primary Lorem ipsum dolor

Primary Lorem ipsum dolor

Primary Lorem ipsum dolor

Forms:

Trusted Shops Bewertungen für monsterzeug.de

Du hast eine Frage? Kontaktiere jetzt unseren Kundenservice...