Text & Fonts
Default text // Class: 'text-default'
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.
Larger text // Class: 'text-larger'
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.
Smaller text // Class: 'text-smaller'
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.
Condensed text // Class: 'text-condensed'
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.
Headlines
Heading 01 // Class: 'heading-1'
Heading 01
Heading 02 // Class: 'heading-2'
Heading 02
Heading 03 // Class: 'heading-3'
Heading 03
Title // Class: 'title-1'
Title Secondary // Class: 'title-2'
Title Menu Promo // Class: 'title-3'
Fonticons
-
// Class: 'icon icon-arrow_up'
-
// Class: 'icon icon-arrow_down'
-
// Class: 'icon icon-arrow_left'
-
// Class: 'icon icon-arrow_right'
-
// Class: 'icon icon-arrow_circle_up'
-
// Class: 'icon icon-arrow_circle_down'
-
// Class: 'icon icon-arrow_circle_left'
-
// Class: 'icon icon-arrow_circle_right'
-
// Class: 'icon icon-arrow_double_right'
-
// Class: 'icon icon-arrow_left_2'
-
// Class: 'icon icon-arrow_right_2'
-
// Class: 'icon icon-arrow_next'
-
// Class: 'icon icon-arrow_previous'
-
// Class: 'icon icon-cart'
-
// Class: 'icon icon-close'
-
// Class: 'icon icon-check'
-
// Class: 'icon icon-checkbox_checked'
-
// Class: 'icon icon-checkbox_unchecked'
-
// Class: 'icon icon-checkbox_noborder'
-
// Class: 'icon icon-checkbox_unchecked_noborder'
-
// Class: 'icon icon-checkout_progress_address'
-
// Class: 'icon icon-checkout_progress_overview'
-
// Class: 'icon icon-checkout_progress_payment'
-
// Class: 'icon icon-checkout_progress_done'
-
// Class: 'icon icon-foot_normal'
-
// Class: 'icon icon-foot_slender'
-
// Class: 'icon icon-login'
-
// Class: 'icon icon-logout'
-
// Class: 'icon icon-logo'
-
// Class: 'icon icon-mail
-
// Class: 'icon icon-menu
-
// Class: 'icon icon-status_delivery'
-
// Class: 'icon icon-status_open'
-
// Class: 'icon icon-benefit_addresses'
-
// Class: 'icon icon-newsletter
-
// Class: 'icon icon-package
-
// Class: 'icon icon-mail
-
// Class: 'icon icon-play
-
// Class: 'icon icon-seal
-
// Class: 'icon icon-search
-
// Class: 'icon icon-zoom_in
-
// Class: 'icon icon-zoom_out
-
// Class: 'icon icon-zoom_in2
-
// Class: 'icon icon-zoom_out2
-
// Class: 'icon icon-trash
-
// Class: 'icon icon-user
-
// Class: 'icon icon-user_2
-
// Class: 'icon icon-values_payment
-
// Class: 'icon icon-values_shipment
-
// Class: 'icon icon-values_shop
-
// Class: 'icon icon-values_tradition
-
// Class: 'icon icon-warning
-
// Class: 'icon icon-facebook'
-
// Class: 'icon icon-pinterest'
-
// Class: 'icon icon-twitter'
-
// Class: 'icon icon-instagram'
-
// Class: 'icon icon-facebook_circle'
-
// Class: 'icon icon-pinterest_circle'
-
// Class: 'icon icon-twitter_circle'
-
// Class: 'icon icon-instagram_circle'
-
// Class: 'icon icon-dots'
-
// Class: 'icon icon-360'
-
// Class: 'icon icon-message'
-
// Class: 'icon icon-message_sent'
-
// Class: 'icon icon-phone'
-
// Class: 'icon icon-benefit_delivery'
-
// Class: 'icon icon-benefit_time'
Forms
Buttons
-
Standard Button // Class: 'button'
-
White Button // Class: 'button button-white'
-
Transparent Button // Class: 'button button-trans'
-
Large Button // Class: 'button button-large'
-
Disabled Button
-
Text Button
-
Disabled Text Button
Inputfields (Standard)
Inputfields (Validation Error) // Class: 'validation-error'
Forms
-
Default
-
Restricted Width // Class: 'form-row-75/66/50/33/25'
-
Multipe Inputs in a Row (Wrap on Mobile Devices) // Class: 'form-row-multi'
-
Multipe Inputs in a Row (No Wrap on Mobile Devices) // Class: 'form-row-multi nowrap'
-
Multipe Checkboxes in a Row // Class: 'form-row-checkbox-multi'
-
Multipe Radios in a Row // Class: 'form-row-radio-multi'
-
Button Row // Class: 'form-row-button'
Messages
Sliders & Banners
Banner (& usage of Picture-Tag)
Banner Grid
Toggle Content Examples
This is the lead content. It can contain multiple tags and lines of text. !Sourrounding tag must have class "toggle"!
This is the content which is initially hidden. !Sourrounding tag must have class "toggle"!
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, 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.
This is the lead content. It can contain multiple tags and lines of text. Duration of the sliding effect can be adapted by "data-toggle-duration".
!Sourrounding tag must have class "toggle"!
This is the content which is initially hidden. !Sourrounding tag must have class "toggle-content"!
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, 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.
This is the lead content. It can contain multiple tags and lines of text. Style can be adapted by certain CSS-Classes. !Sourrounding tag must have class "toggle"!
This is the content which is initially hidden. !Sourrounding tag must have class "toggle"!
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, 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.