Typografie
h1 Headline
h2 Headline
h3 Headline
h4 Headline
h5 Headline
h6 Headline
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. 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.
Basisschrift 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.
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.
h1 Headline
h2 Headline
h3 Headline
h4 Headline
h5 Headline
h6 Headline
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. 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.
Basisschrift 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.
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.
Farben
Background
hsl: 217, 56.76%, 97.75%
rgb: 246, 249, 253
hex: #f6f9fd
rgb: 246, 249, 253
hex: #f6f9fd
hsl: 217, 56.76%, 92.75%
rgb: 226, 234, 247
hex: #e2eaf7
rgb: 226, 234, 247
hex: #e2eaf7
hsl: 217, 56.76%, 87.75%
rgb: 206, 220, 241
hex: #cedcf1
rgb: 206, 220, 241
hex: #cedcf1
hsl: 217, 56.76%, 82.75%
rgb: 186, 205, 236
hex: #bacdec
rgb: 186, 205, 236
hex: #bacdec
hsl: 217, 56.76%, 77.75%
rgb: 166, 191, 230
hex: #a6bfe6
rgb: 166, 191, 230
hex: #a6bfe6
hsl: 217, 56.76%, 72.75%
rgb: 146, 176, 225
hex: #92b0e1
rgb: 146, 176, 225
hex: #92b0e1
hsl: 217, 56.76%, 67.75%
rgb: 126, 162, 219
hex: #7ea2db
rgb: 126, 162, 219
hex: #7ea2db
hsl: 217, 56.76%, 62.75%
rgb: 106, 147, 214
hex: #6a93d6
rgb: 106, 147, 214
hex: #6a93d6
hsl: 217, 56.76%, 57.75%
rgb: 86, 133, 208
hex: #5685d0
rgb: 86, 133, 208
hex: #5685d0
hsl: 217, 56.76%, 52.75%
rgb: 66, 119, 203
hex: #4277cb
rgb: 66, 119, 203
hex: #4277cb
hsl: 217, 56.76%, 47.75%
rgb: 53, 106, 191
hex: #356abf
rgb: 53, 106, 191
hex: #356abf
hsl: 217, 56.76%, 42.75%
rgb: 47, 95, 171
hex: #2f5fab
rgb: 47, 95, 171
hex: #2f5fab
hsl: 217, 56.76%, 37.75%
rgb: 42, 84, 151
hex: #2a5497
rgb: 42, 84, 151
hex: #2a5497
hsl: 217, 56.76%, 32.75%
rgb: 36, 72, 131
hex: #244883
rgb: 36, 72, 131
hex: #244883
hsl: 217, 56.76%, 27.75%
rgb: 31, 61, 111
hex: #1f3d6f
rgb: 31, 61, 111
hex: #1f3d6f
hsl: 217, 56.76%, 22.75%
rgb: 25, 50, 91
hex: #19325b
rgb: 25, 50, 91
hex: #19325b
hsl: 217, 56.76%, 17.75%
rgb: 20, 39, 71
hex: #142747
rgb: 20, 39, 71
hex: #142747
hsl: 217, 56.76%, 12.75%
rgb: 14, 28, 51
hex: #0e1c33
rgb: 14, 28, 51
hex: #0e1c33
hsl: 217, 56.76%, 7.75%
rgb: 9, 17, 31
hex: #09111f
rgb: 9, 17, 31
hex: #09111f
hsl: 217, 56.76%, 2.75%
rgb: 3, 6, 11
hex: #03060b
rgb: 3, 6, 11
hex: #03060b
Primary
hsl: 216, 55.17%, 97.75%
rgb: 246, 249, 252
hex: #f6f9fc
rgb: 246, 249, 252
hex: #f6f9fc
hsl: 216, 55.17%, 92.75%
rgb: 226, 234, 247
hex: #e2eaf7
rgb: 226, 234, 247
hex: #e2eaf7
hsl: 216, 55.17%, 87.75%
rgb: 207, 220, 241
hex: #cfdcf1
rgb: 207, 220, 241
hex: #cfdcf1
hsl: 216, 55.17%, 82.75%
rgb: 187, 206, 235
hex: #bbceeb
rgb: 187, 206, 235
hex: #bbceeb
hsl: 216, 55.17%, 77.75%
rgb: 167, 192, 230
hex: #a7c0e6
rgb: 167, 192, 230
hex: #a7c0e6
hsl: 216, 55.17%, 72.75%
rgb: 147, 178, 224
hex: #93b2e0
rgb: 147, 178, 224
hex: #93b2e0
hsl: 216, 55.17%, 67.75%
rgb: 127, 164, 218
hex: #7fa4da
rgb: 127, 164, 218
hex: #7fa4da
hsl: 216, 55.17%, 62.75%
rgb: 108, 150, 212
hex: #6c96d4
rgb: 108, 150, 212
hex: #6c96d4
hsl: 216, 55.17%, 57.75%
rgb: 88, 135, 207
hex: #5887cf
rgb: 88, 135, 207
hex: #5887cf
hsl: 216, 55.17%, 52.75%
rgb: 68, 121, 201
hex: #4479c9
rgb: 68, 121, 201
hex: #4479c9
hsl: 216, 55.17%, 47.75%
rgb: 55, 108, 189
hex: #376cbd
rgb: 55, 108, 189
hex: #376cbd
hsl: 216, 55.17%, 42.75%
rgb: 49, 97, 169
hex: #3161a9
rgb: 49, 97, 169
hex: #3161a9
hsl: 216, 55.17%, 37.75%
rgb: 43, 86, 149
hex: #2b5695
rgb: 43, 86, 149
hex: #2b5695
hsl: 216, 55.17%, 32.75%
rgb: 37, 74, 130
hex: #254a82
rgb: 37, 74, 130
hex: #254a82
hsl: 216, 55.17%, 27.75%
rgb: 32, 63, 110
hex: #203f6e
rgb: 32, 63, 110
hex: #203f6e
hsl: 216, 55.17%, 22.75%
rgb: 26, 52, 90
hex: #1a345a
rgb: 26, 52, 90
hex: #1a345a
hsl: 216, 55.17%, 17.75%
rgb: 20, 40, 70
hex: #142846
rgb: 20, 40, 70
hex: #142846
hsl: 216, 55.17%, 12.75%
rgb: 15, 29, 50
hex: #0f1d32
rgb: 15, 29, 50
hex: #0f1d32
hsl: 216, 55.17%, 7.75%
rgb: 9, 18, 31
hex: #09121f
rgb: 9, 18, 31
hex: #09121f
hsl: 216, 55.17%, 2.75%
rgb: 3, 6, 11
hex: #03060b
rgb: 3, 6, 11
hex: #03060b
.button-filled
.button-sm
.button-lg
.button-outline
.button-sm
.button-lg
.button-blank
.button-filled .button-primary
.button-outline .button-primary
.button-filled .button-primary .button-invert
.button-outline .button-primary .button-invert
.button-filled .button-black
.button-outline .button-black
.button-filled .button-white
.button-outline .button-white
Icons
.svg-icon-primary
.svg-icon-primary-hover
.svg-icon-primary-disabled
.svg-icon-primary-contrast
.svg-icon-white
.svg-icon-black
.svg-icon-xs
.svg-icon-sm
.svg-icon-md
.svg-icon-lg
.svg-icon-xl
Schatten
Schatten (small)
.shadow_sm
Schatten (normal)
.shadow_md
Schatten (large)
.shadow_lg
Abstände
–base_clearance_xs
–base_clearance_sm
–base_clearance_md
–base_clearance_lg
–base_clearance_xl
–base_clearance_xxl
Listen
.list-style-1
- Lorem ipsum dolor sit amet
- Dolor sit amet consetetur sadipscing
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
- Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
- Duis autem vel eum iriure dolor in hendrerit
.list-style-2
- Lorem ipsum dolor sit amet
- Dolor sit amet consetetur sadipscing
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
- Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
- Duis autem vel eum iriure dolor in hendrerit
.list-style-3
- Lorem ipsum dolor sit amet
- Dolor sit amet consetetur sadipscing
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
- Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
- Duis autem vel eum iriure dolor in hendrerit
.list-style-4
- Lorem ipsum dolor sit amet 9.00 €
- Dolor sit amet consetetur sadipscing 7.50 €
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat 21.00 €
- Et nonumy sed tempor et kasd magna no vero voluptua 23.50 €
- Duis autem vel eum iriure dolor in hendrerit +2 €
.list-style-5
- Lorem ipsum dolor sit amet
- Dolor sit amet consetetur sadipscing
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
- Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
- Duis autem vel eum iriure dolor in hendrerit
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
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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Sed diam nonummy nibh
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ut wisi enim ad minim veniam
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
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. 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
- Lorem ipsum dolor sit amet
- Dolor sit amet consetetur sadipscing
- At accusam aliquyam diam diam dolore dolores duo eirmod eos erat
- Et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum sanctus sea sed takimata ut vero voluptua
- Duis autem vel eum iriure dolor in hendrerit
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
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. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur