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 ZusatzHeadlineH1 Headline 2 ZusatzHeadlineH2 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. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Formulare Formular Anrede Selectbox Pflichtfeld Herr Frau Anrede Selectbox OK Herr Frau Anrede Bitte füllen sie das Feld aus. Selectbox Error Herr Frau Selectbox Standard Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Nachname Name (z.B. Mustermann) Nachname Bitte füllen sie das Feld aus. Optionales Feld Textarea Checkboxes Angemeldet bleiben Bitte stimmen Sie den Bedingungen der Verarbeitung Ihrer Daten zu. Angemeldet bleiben Radiobuttons Option 1 Option 2 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: Link Button Folgende Arten von Buttons sind definiert: .btn Simple Simple (disabled) btn.btn-default Default Default (disabled) .btn.btn-primary Primary Primary (disabled) .btn.btn-secondary Secondary Secondary (disabled) .btn.btn-border Zum Vergleich Zum Vergleich (disabled) .btn.btn-danger Danger Danger (disabled) .btn.btn-basket in den Warenkorb in den Warenkorb (disabled) 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 Button Dropdown Punkt 1 Punkt 2 Punkt 3 Modals Launch demo modal SCHLIESSEN Modal title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facilis ipsum minus nemo, neque officia repellat soluta veritatis voluptates voluptatibus?
Sprache auswählen
English