0 0
Dieser Online-Shop verwendet Cookies für ein optimales Einkaufserlebnis. Dabei werden beispielsweise die Session-Informationen oder die Spracheinstellung auf Ihrem Rechner gespeichert. Ohne Cookies ist der Funktionsumfang des Online-Shops eingeschränkt. Sind Sie damit nicht einverstanden, klicken Sie bitte hier.

styleguide

Colors

$color-primary
$color-secondary
$color-black
$color-darker-gray
$color-dark-gray
$color-gray
$color-light-gray
$color-lighter-gray
$color-white
 
$color-blue
$color-green
$color-red
$color-yellow
$color-light-blue ?
$color-light-green
$color-light-red
$color-light-yellow ?

Fonts

Montserrat

Montserrat 300 Light: Lorem ipsum dolor 123.
Montserrat 400 Regular: Lorem ipsum dolor 123.
Montserrat 500 Medium: Lorem ipsum dolor 123.

Standardlayout

Headings

 

Heading 1

 

Zusatz
Headline
H1

 

Headline 2

 

Zusatz
Headline
H2

 

Headline H3

 

Headline H4

 
Headline H5
 
Headline H6
 

Copy text

Normal copy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam corporis doloribus eius explicabo ipsam, iure odio provident qui quo, veniam vero? Cumque laudantium magni necessitatibus nobis porro quibusdam voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, architecto corporis cupiditate dicta dignissimos fuga harum minima nesciunt nihil nulla, numquam optio porro quis quisquam quod similique soluta ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam corporis doloribus eius explicabo ipsam, iure odio provident qui quo, veniam vero? Cumque laudantium magni necessitatibus nobis porro quibusdam voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, architecto corporis cupiditate dicta dignissimos fuga harum minima nesciunt nihil nulla, numquam optio porro quis quisquam quod similique soluta ullam velit.

Small copy

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam corporis doloribus eius explicabo ipsam, iure odio provident qui quo, veniam vero? Cumque laudantium magni necessitatibus nobis porro quibusdam voluptate.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, architecto corporis cupiditate dicta dignissimos fuga harum minima nesciunt nihil nulla, numquam optio porro quis quisquam quod similique soluta ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, architecto corporis cupiditate dicta dignissimos fuga harum minima nesciunt nihil nulla, numquam optio porro quis quisquam quod similique soluta ullam velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, architecto corporis cupiditate dicta dignissimos fuga harum minima nesciunt nihil nulla, numquam optio porro quis quisquam quod similique soluta ullam velit.

Inline Elemente

Strong

Lorem ipsum dolor sit amet perferendis vitae!

Small

Lorem ipsum dolor sit amet perferendis vitae!

Link

Lorem ipsum dolor sit amet perferendis vitae!

Listen

  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  • Lorem ipsum dolor.
  1. Lorem ipsum dolor.
  2. Lorem ipsum dolor.
  3. Lorem ipsum dolor.
  4. Lorem ipsum dolor.
  1. Lorem ipsum dolor.
  2. Lorem ipsum dolor.
  3. Lorem ipsum dolor.
  4. Lorem ipsum dolor.

Formulare

Formular

Bitte füllen sie das Feld aus.
(z.B. Mustermann)
Bitte füllen sie das Feld aus.

Checkboxes

Bitte stimmen Sie den Bedingungen der Verarbeitung Ihrer Daten zu.

Radiobuttons

Buttons

Bitte beachten: Buttons haben keine feste Breite oder eine Breite in Abhängigkeit von Padding. Die Breite der Buttons ist vom jeweiligen Einsatzort abhängig und beträgt entweder 100% (des zur Verfügung stehenden Platzes wie vom Elternelement definiert) oder entspricht einer ganzen Spaltenzahl des Haupt-Grids. Beim Einsatz der Buttons beachten!

Die folgenden Buttons sollten alle identisch aussehen:



Folgende Arten von Buttons sind definiert:
.btn


btn.btn-default


.btn.btn-primary


.btn.btn-secondary


.btn.btn-border


.btn.btn-danger


.btn.btn-basket


Komponenten

Tabellen

Standard-Tabelle (ohne Klasse)

Lorem ipsum dolor. Ducimus nesciunt, sequi. Facilis fuga, reprehenderit.
Lorem ipsum dolor sit amet, consectetur. Corporis error eum reprehenderit unde voluptatem. Ad explicabo molestias officia recusandae sunt.
Lorem ipsum dolor sit amet, consectetur. Animi consequuntur delectus est quasi quibusdam? Delectus dolorem doloribus eligendi enim neque.
Lorem ipsum dolor sit amet, consectetur. Earum fuga harum nostrum perspiciatis ullam. Aperiam, commodi nulla. Architecto, nihil, nostrum?

Tabelle gestreift (.table-striped .table-bordered)

Lorem ipsum dolor. Ducimus nesciunt, sequi. Facilis fuga, reprehenderit.
Lorem ipsum dolor sit amet, consectetur. Corporis error eum reprehenderit unde voluptatem. Ad explicabo molestias officia recusandae sunt.
Lorem ipsum dolor sit amet, consectetur. Animi consequuntur delectus est quasi quibusdam? Delectus dolorem doloribus eligendi enim neque.
Lorem ipsum dolor sit amet, consectetur. Earum fuga harum nostrum perspiciatis ullam. Aperiam, commodi nulla. Architecto, nihil, nostrum?

Trennlinie


Alerts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, quia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, quia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, quia!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, quia!

Dropdowns

Modals



nach oben