CBM Design UI Kit
ELEMENTS CTAs Sale 1
Primary: Editorial, Campaigns etc
PRIMARY CTA
Category or Price
42px
SALE CTA
SHOES
270px PULLOVER & STRICKJACKEN
Maximum characters: 30 Sale 2
BOOTS & STIEFEL
12px CLICKETY CLICKY CLICKY BUTTON 12px 12px 12px
SALE CTA
Performance
Spacing
Size Pannel
20px PERFORMANCE CTA
PRIMARY CTA 40px Top 5 Small CTA
SMALL CTA
Maximum characters: 12
S
M
L
10
11
12
Premium
PREMIUM
CBM Design UI Kit
ELEMENTS Text Main Headline
Subline / Headline
24/30 Arial Bold Subline
Secondary Headline (for Editorial NL)
18/24 Arial Bold
Maximum characters: 30
Headline
Maximum characters: 60 (1 line: 30)
Headline
Maximum characters: 60 (1 line: 30)
Subline
18/24 Arial Regular Headline / Subline Text Body
14/24 Arial Regular Short Disclaimer
Subline
Maximum characters: 30
14/24 Arial Regular CTA 12/18 ARIAL BOLD UPPERCASE
Headline / Text Body
Headline
Maximum characters: 60 (1 line: 30)
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
Maximum characters: 150
standard dummy text ever since the 1500s.
Subline / Headline Left aligned
Subline
Maximum characters: 30
Headline
Maximum characters: 60 (1 line: 30)
Vouchercode
VOUCHER CODE**:
CLICKETY CLICKY CLICK
SKU Description 450 px viewport
Maximum characters: 30 Maximum characters: 20
SKU Description with commodity
Version 1
173px
25px
Brand Name
Brand Name
United Colours of Benetton
Maximum characters: 30 (1 line)
99,99 €
99,99 €
T-shirt
Maximum characters: 25
99,99 €
Maximum characters: 25
SKU Description 320 px viewport
Brand Name
Brand Name
99,99 €
99,99 €
Brand Name
Brand Name
99,99 €
99,99 €
Short disclaimer
* This is left aligned disclaimer. Click here.
Alt Text
THIS IS ALT TEXT
CBM Design UI Kit
ELEMENTS Colours PRIMARY BLACK #1A1A1A
DARK GREY #4A4A4A
MEDIUM GREY #CCCCCC
LIGHT GREY #F3F3F3
Text, Primary CTA, Premium CTA
Footer base part
Social Icons
Applied to images with white BG Footer upper part
ZALANDO ORANGE #FF6900
Performance CTA, text etc
SALE RED #DA331B
Sale
CBM Design UI Kit
ELEMENTS Header & Footer GENDER HEADER
OPTIONAL HEADER
Web view
Web view
DAMEN
HERREN
KINDER
Get The Look
Neu In
10 ch
10 ch
10 ch
12
12 ch
FOOTER
Kostenlose Hotline 0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr Mail us service@zalando.de Answer in 24h FAQ
Free Delivery
100 Days Return
Brands USP
Zalando Apps:
Finde mehr Inspiration:
Newsletter von Zalando.de abbestellen* Alle werblichen Nachrichten (der Zalando SE) abbestellen.* Impressum: Zalando.de ist ein Angebot der: Zalando SE Tamara-Danz-Str. 1, 10243 Berlin Telefax: +49 (0)30 2759 46 93 E-Mail: service@zalando.de Vorstand: Robert Gentz, David Schneider, Rubin Ritter Vorsitzender des Aufsichtsrates: Lothar Lanz Eingetragen beim Amtsgericht Charlottenburg Berlin, HRB 158855 B Umsatzsteuer-ID: DE 260543043 Steuernummer: 37/132/45004 Verantwortlicher für eigene Inhalte der Zalando SE gem. § 55 RStV: Robert Gentz
Bekleidung 12 ch
CBM Design UI Kit
SPACING 450px viewport
450px viewport Web view
DAMEN
Web view
HERREN
KINDER
DAMEN Fixed space after header
40px
HERREN
KINDER
40px
Headline 10px
Subline 20px
Fixed space after header
TEASER
TEASER 20px
Headline 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
20px
Fixed space after header
PRIMARY CTA 10px
20px
PRIMARY CTA PRIMARY CTA 40px
Space between blocks 40px
Shop by size
Headline
20px
30px
S
M
L 40px
36
37
38
25px
40px PRIMARY CTA 40px
40px Brand Name
Brand Name
99,99 €
99,99 €
Brand Name
Brand Name
25px
10px Brand Name 5px 99,99 €
Brand Name 99,99 €
99,99 €
99,99 € 20px PRIMARY CTA 40px
Kostenlose Hotline
0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr Mail us Brand Name
service@zalando.de
Brand Name
99,99 €
Answer in 24h FAQ
99,99 € 20px PRIMARY CTA 40px
FREE DELIVERY
100 DAYS RETURN
BRAND USP
Kostenlose Hotline 0800 33 00 900 Erreichbar von Mo - So 8-22 Uhr
Zalando Apps:
Mail us service@zalando.de Answer in 24h FAQ
Finde mehr Inspiration:
Free Delivery
100 Days Return
Brands USP Newsletter von Zalando.de abbestellen*
Zalando Apps: Alle werblichen Nachrichten (der Zalando SE) abbestellen.* Impressum: Zalando.de ist ein Angebot der: Zalando SE Tamara-Danz-Str. 1, 10243 Berlin Telefax: +49 (0)30 2759 46 93
Finde mehr Inspiration:
E-Mail: service@zalando.de Vorstand: Robert Gentz, David Schneider, Rubin Ritter Vorsitzender des Aufsichtsrates: Lothar Lanz Eingetragen beim Amtsgericht Charlottenburg Berlin, HRB 158855 B Umsatzsteuer-ID: DE 260543043 Steuernummer: 37/132/45004
Newsletter von Zalando.de abbestellen* Alle werblichen Nachrichten (der Zalando SE) abbestellen.* Impressum: Zalando.de ist ein Angebot der: Zalando SE Tamara-Danz-Str. 1, 10243 Berlin Telefax: +49 (0)30 2759 46 93 E-Mail: service@zalando.de Vorstand: Robert Gentz, David Schneider, Rubin Ritter Vorsitzender des Aufsichtsrates: Lothar Lanz Eingetragen beim Amtsgericht Charlottenburg Berlin, HRB 158855 B Umsatzsteuer-ID: DE 260543043 Steuernummer: 37/132/45004 Verantwortlicher für eigene Inhalte der Zalando SE gem. § 55 RStV: Robert Gentz
Verantwortlicher für eigene Inhalte der Zalando SE gem. § 55 RStV: Robert Gentz
CBM Design UI Kit
MODULES Module 1
Module 1.2
Teaser_Headline_Subline_1-3_CTA
Teaser_Headline_Text_1-3_CTA
SNIPPET: headline_subline_divider_image_headline_text_3cta_disclaimer
SNIPPET: headline_subline_divider_image_headline_text_3cta_disclaimer
Headline
Headline
Subline
TEASER
TEASER
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna PRIMARY CTA
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here. PRIMARY CTA
* This is a disclaimer. Click here.
Module 2
Module 2.1
Teaser_Headline_Subline_Voucher_1-3_CTA
Teaser_Headline_Text_Voucher_1-3_CTA
SNIPPET: image_headline_text_voucher_1cta_disclaimer
SNIPPET: image_headline_text_voucher_1cta_disclaimer
Headline
Headline
Subline
TEASER TEASER
Lorem Ipsum is simply dummy text of the printing and VOUCHER CODE**:
typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
VOUCHERCODE VOUCHER CODE**:
VOUCHERCODE
PRIMARY CTA
* This is a disclaimer. Click here.
PRIMARY CTA
* This is a disclaimer. Click here.
Module 3
Module 3.1
Teaser_Headline_Subline_Voucher_Steps_1-3_CTA
Teaser_Headline_Text_Voucher_Steps_1-3_CTA
SNIPPET: image_headline_ _voucher_3step_3cta_disclaimer
SNIPPET: image_headline_text_voucher_3step_3cta_disclaimer
Headline
Headline
Subline
TEASER TEASER
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed VOUCHER CODE**:
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
VOUCHERCODE
ullamco laboris nisi ut aliquip. VOUCHER CODE**:
30 ch
Lorem ipsum dolor sit amet
100 ch
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
100 ch
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit
100 ch
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit
VOUCHERCODE
Lorem ipsum dolor sit amet 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
PRIMARY CTA
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit
PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here. PRIMARY CTA
* This is a disclaimer. Click here.
CBM Design UI Kit
MODULES Module 4
Module 4.1
Teaser_Headline_Subline_Steps_1-3_CTA
Teaser_Headline_Text_Steps_1-3_CTA
SNIPPET: image_headline_text_3step_3cta_disclaimer
SNIPPET: image_headline_text_3step_3cta_disclaimer
Headline
Headline
Subline
TEASER
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
Lorem ipsum dolor sit amet 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit
PRIMARY CTA
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here. PRIMARY CTA
* This is a disclaimer. Click here.
Module 5
Module 6
Teaser_Headline_Text_Size_Panel_1-3_CTA
Headline_Subline_Teaser_1-3_CTA
SNIPPET: image_headline_text_6size_3cta_disclaimer
SNIPPET: Hheadline_subline_divider_image_1cta.html
Headline
Headline Subline
TEASER TEASER
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Shop by size S
M
L
36
37
38
PRIMARY CTA
PRIMARY CTA
PRIMARY CTA
* This is a disclaimer. Click here.
Module 7 Headline_Subline_Teaser_CTA_Teaser_CTA SNIPPET: headline_subline_divider_image_1cta_image_1cta
Headline Subline
TEASER
PRIMARY CTA
TEASER
PRIMARY CTA
PRIMARY CTA
CBM Design UI Kit
MODULES Module 8
Module 9
Teaser_Headline_Subline_Wave_1-3_CTA
Headline_Subline_1-3_CTA
SNIPPET: headline_subline_divider_image_headline_value_text_3cta_disclaimer
SNIPPET: headline_text_1cta_disclaimer
Headline Subline
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
PRIMARY CTA
TEASER 900x500 * This is a disclaimer. Click here.
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Maximum characters: 60 (1 line: 30)
-20% Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.
PRIMARY CTA
PRIMARY CTA
PRIMARY CTA
* This is a disclaimer. Click here.
Module 10
Module 11
Headline_Subline_Voucher_Steps_1-3_CTA
Headline_Subline_Voucher_1-3_CTA
SNIPPET: headline_text_voucher_3step_1cta_disclaimer
SNIPPET: -
Headline
Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip.
ullamco laboris nisi ut aliquip.
VOUCHER CODE**:
VOUCHER CODE**:
VOUCHERCODE
VOUCHERCODE
Lorem ipsum dolor sit amet
PRIMARY CTA
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit
PRIMARY CTA
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here. PRIMARY CTA
PRIMARY CTA
* This is a disclaimer. Click here.
CBM Design UI Kit
MODULES Module 17
Module 18
Flex_Step_1
Flex_Step_2
SNIPPET: flex_image_headline_text_step1_of3_1cta_disclaimer
SNIPPET: flex_image_headline_text_voucher_step2_of3_1cta_disclaimer
Headline
Headline
TEASER
TEASER
Lorem Ipsum is simply dummy text of the printing and
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry’s
typesetting industry. Lorem Ipsum has been the industry’s
standard dummy text ever since the 1500s.
standard dummy text ever since the 1500s. VOUCHER CODE**:
Und so geht’s
30 - 60 ch
VOUCHERCODE 100 ch
1
Our website has fresh, new look.
Und so geht’s 100 ch
2
100 ch
3
Shop our petite, tall and plus size collections.
Save items to your wish list and get notified when something you like goes on sale.
PRIMARY CTA
1
Our website has fresh, new look.
2
Shop our petite, tall and plus size collections.
3
Save items to your wish list and get notified when something you like goes on sale.
PRIMARY CTA
CBM Design UI Kit
MODULES Module 14 | Brandwall
Module 38 | Bottom CTAs SNIPPET: headline_divider_3cta
SNIPPET: headline_subline_brandwall
Headline Subline
Headline PRIMARY CTA
PRIMARY CTA
PRIMARY CTA
CBM Design UI Kit
MODULES Module 20 | SALE
Module 21 | SALE
SALE_Headline_Voucher_1-3_CTA
SALE_Headline_Subline_1-3_CTA
SNIPPET: banner_sale_headline_voucher_3cta_disclaimer
SNIPPET: sale_headline_text_3button
Headline VOUCHER CODE**:
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
VOUCHERCODE
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here.
Module 22 | SALE
Module 23 | SALE
SALE_Headline_Subline_Voucher_1-3_CTA
SALE_Teaser_Headline_Subline_1-3_CTA
SNIPPET: sale_headline_text_voucher_3button_disclaimer
SNIPPET: sale_image_headline_text_3button_disclaimer
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
TEASER
aliqua. Ut enim ad minim veniam, quis nostrud exercitation VOUCHER CODE**:
VOUCHERCODE
PRIMARY CTA
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
PRIMARY CTA
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
PRIMARY CTA PRIMARY CTA
* This is a disclaimer. Click here.
PRIMARY CTA
PRIMARY CTA
* This is a disclaimer. Click here.
CBM Design UI Kit
MODULES Module 24 | SALE
Module 25 | SALE
sale_subline_headline_4price_1cta
sale_image_subline_headline_4price_1cta
Subline
Headline TEASER €75 €50 €25
Subline 5000CHF
Headline
PRIMARY CTA
€75 €50 €25 5000CHF
PRIMARY CTA
Module 26 | SALE
Module 27 | SALE
sale_headline_text_3voucher_1cta_disclaimer
sale_headline_divider_subline_6size_1cta
Headline Subline
Headline Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
Lorem ipsum dolor sit amet S
M
L
10
11
12
€50** VOUCHER CODE**:
VOUCHERCODE
PRIMARY CTA
€50** VOUCHER CODE**:
VOUCHERCODE
€50**
Module 28 | SALE
VOUCHER CODE**:
VOUCHERCODE sale_headline_divider_image_subline_6size_1cta
PRIMARY CTA
Headline Subline
* This is a disclaimer. Click here.
TEASER
Lorem ipsum dolor sit amet S
M
L
10
11
12
PRIMARY CTA
CBM Design UI Kit
MODULES Module 30
Module 31
Simple banner: banner_text.html
Icon banner: banner_icon_text.html
Maximum characters: 70
Maximum characters: 100 8px
20px 20px
Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing 20px
20px
20px
@
60px 20px 8px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 20px 20px 20px
60px Text centered
Examples with coloured background
Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing
Icon 60x60
Text left aligned
Examples with coloured background (check colours with graphics)
@
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
@
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
Lorem ipsum dolor sit amet, consectetur adipiscing elit adipiscing
Module 32
Module 35
Sale banner / normal banner: banner_sale_headline_2cta_disclaimer.html
Short disclaimer
Maximum characters: 60
* This is a disclaimer. Click here.
Lorem ipsum dolor sit amet sitamet dolor sit amet sitamet PRIMARY CTA
PRIMARY CTA
* This is a disclaimer. Click here.
Module 39 Banner with voucher: banner_sale_headline_voucher_1cta_disclaimer.html Maximum characters: 60
Lorem ipsum dolor sit amet sitamet dolor sit amet sitamet VOUCHER CODE**:
VOUCHERCODE
PRIMARY CTA
* This is a disclaimer. Click here.
CBM Design UI Kit
MODULES Module 33
Module 34
2 handpicked SKU’s
4 handpicked SKU’s
255px
173px Brand Name
Brand Name
Brand Name
Brand Name
99,99 €
99,99 €
99,99 €
99,99 €
Brand Name
Brand Name
99,99 €
99,99 €
Module 36
Module 37
4 recommendations SKU’s
6 recommendations SKU’s
Top picks for you
Top picks for you
Brand Name
Brand Name
Brand Name
Brand Name
99,99 €
99,99 €
99,99 €
99,99 €
Brand Name
Brand Name
Brand Name
Brand Name
99,99 €
99,99 €
99,99 €
99,99 €
Brand Name
Brand Name
99,99 €
99,99 €
CBM Design UI Kit
Dynamic Elements Module 40
Module 41
Dynamic countdown
Subscription promo
Active
20 09 04 29 DAYS
HOURS
MINUTES
Join our subscriber’s club
SECONDS
900 x 500 Inactive
Oops, 20 09 04 29 Sorry! You the offer is over our sale is over DAYS
HOURS
MINUTES
SECONDS
Your current benefits Product recommendations Image option
Exclusive offers Expert tips on trends & styling
JOIN TODAY
CBM Design UI Kit
MODULES Module 15 zStars PE Banner
PRIMARY CTA
Module 16 zStars_NL_Banner
PRIMARY CTA
CBM Design UI Kit
ICONS App icons 52x52@2x #CCCCCC Android app
Apple app
Windows app
Social icons 52x52@2x #CCCCCC Facebook
Free delivery
Free returns
Address book
Mobile
USP for footer 38x38@2x Hotline
Brands
Icon Banner 60x60@2x Newsletter
Giftcard
@
Custom Icons Play Button 1
Play button 2
Commodity Icons 80x80@2x
Star rating transparent 40x40@2x
Star rating white BG 40x40@2x
Star rating active 40x40@2x
FAQ
CBM Design UI Kit
Whatsapp templates
CBM Design UI Kit
Sports Modules
Looking for something different
Looking for something different
What’s your sport?
What’s your sport?
Training
15 ch
Tennis
Hiking
Yoga
Yoga
Hiking
Training
ALL DISCIPLINES
Training
ALL DISCIPLINES