Krass Styleguide

Hinweis zu den Messages: Template messages.phtml sollte nicht zu weit vom Standard abweichen. Manche Error messages verwenden nicht das Theme Template, sondern fallen auf Vendor zurück!

Colors

#000000
#ffffff
#e20613
#7f7f7f
#dddddd
#f5f5f6
#f4bb1b
#f7cf5f
#fbeaba
#00ab74
#6bbe94
#95ccac
#008cbd
#54a7cb
#84bad6
#7b3b78
#986997
#af8cad

Typography

Headline h1

Headline h2

Headline h3

Headline h4

Headline h5
Headline h6

COPY TEXT Lorem ipsum dolor TEXTLINK 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 abore 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.

COPY TEXT Lorem ipsum dolor textlink 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 abore 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.

CAPTION Lorem ipsum dolor TEXTLINK 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 abore 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.

CAPTION Lorem ipsum dolor Textlink 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 abore 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.

Flag Style

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Price

77,00 €

Buttons

Form Elements

Please enter a valid email address (Ex: johndoe@domain.com).

Radio Buttons

This is a required field.

Checkbox

Checkbox - required

Checkbox - required - note

This is a required field.

Special Select

Checkout loader

Loader Trigger

Products Grid (Placeholder)

Address

Max Mustermann
Mustermannstr. 1
11111 Musterstadt
Deutschland

Icons

  • arrow-left

  • arrow-right

  • arrow-up

  • arrow-down

  • search

  • bin

  • cookie-bowl

  • close

  • pencil

  • check

  • filter

  • letter

  • pin

  • target

  • upload

  • diamond

  • sun

  • circle-filled

  • information

  • eye

  • focus-eye

  • camera-focus

  • menu

  • check-square

  • check-shield

  • lightbulb

  • rocket

  • handshake

  • money

  • owl

  • facebook

  • instagram

  • bookmarks

  • camera

  • eye-filled

  • pin-filled

  • zoom-in

  • zoom-out

  • check-bold

Accordion

Accordion-Trigger 1
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
Accordion-Trigger 2
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

Overlays

Example Overlay Content

Lorem ipsum dolor TEXTLINK 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 abore 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 textlink 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 abore 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.

Off-Canvas

Offcanvas-Trigger

Offcanvas Content

Lorem ipsum dolor TEXTLINK 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 abore 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 textlink 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 abore 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.

Product Slider

Logos

tables

xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy
xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy xyxyxy

bulma tables

Sphäre
Zylinder
Achse
PD
Auge links
-0.25
0
30
27
Auge rechts
0.25
-0.25
25
26.5
Sphäre
Zylinder
Achse
PD
Auge links
-0.25
0
30
27
Auge rechts
0.25
-0.25
25
26.5

Your browser is not compatible with our Store. If you want to browse without errors, please use one of these up-to-date browser:

  1. Chrome
  2. Firefox