Mey Styleguide

Quality Claim

Variant CSS Class Description
Speaking Quality.

.quality-claim

font-size: 34px, letter-spacing: 5px

Colors

Color Hex Tailwind Classes Description
#ddbcb0 text-women, bg-women, border-women Women main color
#5b6770 text-men, bg-men, border-men Men main color
#191919 text-black, bg-black, border-black Brand Black
#ffffff text-white, bg-white, border-white White Color
#b81d71 text-brand, bg-brand, border-brand Brand Primary
#ecf8ff text-blue-50, bg-blue-50, border-blue-50
#b7c9d3 text-blue-100, bg-blue-100, border-100
#5282a7 text-blue-200, bg-blue-200, border-blue-200
#8b9d82 text-sustainability, bg-sustainability, border-sustainability Sustainability Color
#9fd6aa text-success-primary, bg-success-primary, border-success-primary Success Messages
#def1e2 text-success-secondary, bg-success-secondary, border-success-secondary Success Messages
#ea8b8b text-error-primary, bg-error-primary, border-error-primary Error Messages
#fde4e4 text-error-secondary, bg-error-secondary, border-error-secondary Error Messages
#f5f5f5 text-gray-50, bg-gray-50, border-gray-50 Backgrounds
#ebebeb text-gray-100, bg-gray-100, border-gray-100 Backgrounds
#d5d5d5 text-gray-200, bg-gray-200, border-gray-200 Borders, Backgrounds
#c4c4c4 text-gray-300, bg-gray-300, border-gray-300 Borders
#a7a7a7 text-gray-400, bg-gray-400, border-gray-400 Progressbar, Swatches
#8c8c8c text-gray-450, bg-gray-450, border-gray-450 Disabled Buttons
#787878 text-gray-500, bg-gray-500, border-gray-500 Link Hover State
#515151 text-gray-600, bg-gray-600, border-gray-600 Pager Hover State
#3b3b3b text-gray-700, bg-gray-700 Default Hyvä templates (not used)

Breakpoints

Breakpoint Tailwind Examples Available Types
410px xxs xxs:m-0, max-xxs:pt-5 Min / Max
480px xs xs:m-5, max-xs:pt-5 Min / Max
640px sm sm:block, max-sm:hidden Min / Max
768px md md:block, max-md:hidden Min / Max
1024px lg lg:block, max-lg:hidden Min / Max
1280px xl xl:block, max-xl:hidden Min / Max
1440px bp-2xl bp-2xl:block, max-2xl:hidden Min / Max
1600px bp-3xl bp-3xl:block Min
1920px bp-4k bp-4k:block Min

Special Breakpoints

Breakpoint Tailwind Examples
(min-width: 768px) and (max-height: 959px) pdp-md pdp-md:m-0
(min-width: 768px) and (min-height: 960px) pdp-lg pdp-lg:m-5
(min-width: 768px) and (max-height: 1366px) stores-tablet stores-tablet:block
(any-hover: none) touch touch:block
(any-hover: hover) no-touch no-touch:block
(any-hover: none), (any-hover: hover) and (max-width: 1279px) nav-mobile nav-mobile:block
(any-hover: hover) and (min-width: 1280px) nav-desktop nav-desktop:block

Grid System

.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-4 .g-col-xl-3
.g-col-12 .g-col-sm-6 .g-col-lg-12 .g-col-xl-3
.g-col-12 .g-col-md-6 .g-col-xl-4
.g-col-12 .g-col-md-6 .g-col-xl-4
.g-col-12 .g-col-xl-4
.g-col-6
.g-col-6
info circle We use Bootstrap 4 Grid System with custom prefixes for class names. Use this only in CMS elments (blocks, pages). For templates use Tailwind Grid or Flexbox classes.

Fonts

Font Example
CircularXX-Regular Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

CircularXX-Bold Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

CircularXX-BoldItalic Subset

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

Bota Regular

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

Bota Bold

Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«.

Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus.

Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft.

Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden. Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks

äÄöÖüÜß

© Mey

info circle We use subsets of Circular Webfonts for saving bandwidth and improving performance.

Text elements

Element HTML Tag Example
H1 h1

Das Layout ist fertig, der Text lässt auf sich warten.

H2 h2

The quick brown fox jumps over the lazy old dog

H3 h3

Ein kleines Bächlein namens Duden fließt durch ihren Ort

H4 h4

Ein kleines Bächlein namens Duden

Paragraph p

Manchmal benutzt man Worte wie Hamburgefonts.

Bold text strong

The quick brown fox jumps over the lazy old dog

Advanced text em

Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten.

Check list ul
  • Weit hinten, hinter den Wortbergen,
  • fern der Länder Vokalien und Konsonantien
  • leben die Blindtexte.
  • Abgeschieden wohnen sie in Buchstabhausen
  • an der Küste des Semantik
Unordered list ul
  • Weit hinten, hinter den Wortbergen,
  • fern der Länder Vokalien und Konsonantien
    • leben die Blindtexte.
    • Abgeschieden wohnen sie in Buchstabhausen
  • an der Küste des Semantik
Ordered list ol
  1. Weit hinten, hinter den Wortbergen,
  2. fern der Länder Vokalien und Konsonantien
    • leben die Blindtexte.
    • Abgeschieden wohnen sie in Buchstabhausen
  3. an der Küste des Semantik
info circle Headlines H5 & H6 have same styling like standard text.

Text examples

Verführerische Dessous für die Festtage.

Black is Beautiful

Mit Schwarz landen Sie garantiert immer einen Volltreffer. Gerade zur dunklen Jahreszeit ist der All-Time-Favourit unter den Farben besonders beliebt. Kombiniert mit hochwertiger Spitze und verführerischen Transparenzen ist die schwarze Wäsche quasi das Äquivalent zum klassischen "kleinen Schwarzen". So können Sie einen klassischen, zeitlosen, verführerischen Look erschaffen, der niemals aus der Mode kommt. Mit anschmiegsamen Dessous aus unserer Serie Luxurious sind Sie ein echter Eyecatcher - nicht nur für die Festtage.

Ein Negligé kann sowohl ein verführerisches Outfit für einen romantischen Abend, ein elegantes Nachthemd oder auch das sexy Unterkleid unter Ihrem Outfit sein, bei dem verführerisch die hochwertige Spitze hervorscheint. Ein Negligé zeigt nicht zuviel, aber auch nicht zu wenig Haut.

Icons

  • accessibility
  • advancepayment
  • advancepayment-en
  • amax
  • amazonpay
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • bars
  • check
  • check-success
  • close
  • close-circle
  • customer-account
  • dhl
  • edit
  • facebook
  • facebook-black
  • filter
  • gift
  • giftcard
  • heart
  • home
  • ideal
  • info-circle
  • instagram
  • instagram-black
  • invoice
  • klarna
  • long-arrow-right
  • marker
  • marker-2
  • mastercard
  • mey-eye
  • mey-eye-dash
  • paypal
  • pinterest
  • pinterest-black
  • plus
  • refresh
  • ruler
  • sale
  • search
  • shoppingbag
  • sort
  • star
  • star-full
  • trash
  • twint
  • twitter
  • twitter-black
  • upload
  • user
  • visa
  • wrapping
  • youtube
  • youtube-black
  • zoom

Forms

Buttons & Links

Pagebuilder Buttons

Pagebuilder Buttons Inverted

Pagebuilder Button Link Types

Template Buttons

Warenkorb anzeigen
Alternative Text

Hero Teaser Element

Lorem ipsum dolor

Content Slider

Hero Slider

Amasty Custom Forms

Form Styling (Styleguide)

Datei hochladen
Checkbox v.1
Checkbox v.2
Radio v.1
Radio v.2
Form field not yet supported
Array
(
    [type] => rating
    [name] => rating-1636365070991
    [entity_id] => 
    [label] => Rating
    [className] => amform-rating
    [style] => 
    [description] => 
    [layout] => one
    [parentType] => other
    [values] => Array
        (
            [0] => Array
                (
                    [label] => Star 1
                    [value] => star-1
                    [selected] => 1
                )

            [1] => Array
                (
                    [label] => Star 2
                    [value] => star-2
                )

            [2] => Array
                (
                    [label] => Star 3
                    [value] => star-3
                )

            [3] => Array
                (
                    [label] => Star 4
                    [value] => star-4
                )

            [4] => Array
                (
                    [label] => Star 5
                    [value] => star-5
                )

        )

    [dependency] => Array
        (
        )

    [validation_fields] => Array
        (
        )

)
1

H1 __ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

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

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

Textmodul ___ 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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam.

Textmodul ___ 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, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Images with aligned Buttons

Accordion

Hallo. Ich bin ein kleiner Blindtext.

Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man ergibt keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.

Small-Letter

dieser text hat eigentlich gar keinen wirklichen inhalt. aber er hat auch keine relevanz, und deswegen ist das egal. er dient lediglich als platzhalter. um mal zu zeigen, wie diese stelle der seite aussieht, wenn ein paar zeilen vorhanden sind. ob sich der text dabei gut fühlt, weiß ich nicht. ich schätze, eher nicht, denn wer fühlt sich schon gut als platzhalter. aber irgendwer muss diesen job ja machen und deshalb kann ich es nicht ändern . ich könnte dem text höchstens ein bisschen gut zureden, dass er auch als platzhalter eine wichtige rolle spielt und durchaus gebraucht wird. könnte mir vorstellen, dass ihm das gut tut. denn das gefühl gebraucht zu werden tut doch jedem gut, oder? klar, er ist austauschbar. das darf ich ihm natürlich nicht verraten.

Blindtexte müssen nicht langweilig sein

Namens paarmal nie Tundra Doge Afrika, erhielt Diele Bar siech patrouillierendem Adorno, bindend nur falls, gen Zitze B auflegendem äst adlige Habsburg was zus Most C da Pfand sein geschimmert biegt.

Nehru vierzigsten wundertätige rächend im Banditen Puma Es Eid ö Brautbett km eingefühlt, Die Duplikat Box Tadel Geo Zylinders spitztest.