DimBuy Style Guide Version 0.2Update Log
Styles
[ Class ] [ Value ]
Dimbuy - Brand
-
text-pink-l
#FF0684 -
text-pink
#EC0077 -
text-pink-d
#D3006A -
text-pink-dd
#B9005D
-
text-black
#1E1E1E
Dimbuy - Channels
#Logistics
-
text-log-l
#19BDCE -
text-log
#16A8B7 -
text-log-d
#1393A1 -
text-log-dd
#117E8A
#Help you buy
-
text-help-l
#45C96C -
text-help
#37BE5F -
text-help-d
#31AA55 -
text-help-dd
#2C964B
#Eshop
-
text-shop-l
#FFBC1A -
text-shop
#FFB400 -
text-shop-d
#E6A200 -
text-shop-dd
#CC9000
Gray
-
text-gray-01
#222222 -
text-gray-02
#2F2F2F -
text-gray-03
#3C3C3C -
text-gray-04
#323232
-
text-gray-05
#5E5E5E -
text-gray-06
#777777 -
text-gray-07
#919191 -
text-gray-08
#AAAAAA
-
text-gray-09
#D4D4D4 -
text-gray-10
#E1E1E1 -
text-gray-11
#EEEEEE -
text-gray-12
#F0F0F0
Typography
"Source Sans Pro","Microsoft YaHei", "微软雅黑","Microsoft JhengHei","微軟正黑體", "STHeiti", "Lantinghei",Arial,sans-serif
font-head"Open Sans", "Microsoft JhengHei", "微軟正黑體", "STHeiti", "Lantinghei", Georgia, Times, serif
font-contentExamples:
HEADING 1
HEADING 2
HEADING 3
HEADING 4
HEADING 5
HEADING 6
Paragraph text.Security is a strong brand differentiator. Your customers deserve the respect they are entitled to.
Text-Size
text-xs
text-xs
text-s
text-s
text-m
text-m
text-l
text-l
text-xl
text-xl
text-xxl
text-xxl
text-xxxl ( Special Case : Price /KG )
text-xxxl
text-xxxxl ( Special Case : Price /KG )
text-xxxxl
text-xxxxxl ( Special Case : Price /KG )
text-xxxxxl
Text - Transform
text-lowercase
text-lowercase
text-uppercase
text-uppercase
text-capitalize
text-capitalize
Text - Decoration
text-underline
text-underline
text-crossout
text-crossout
Text - Weight
text-bold
text-bold
text-normal
text-normal
text-light
text-light
Responsive Class
text-md-bold
text-md-bold
text-sm-normal
text-sm-normal
text-xs-light
text-xs-light
Background
bg-white
bg-white
bg-gray-01-l
bg-gray-01-l
bg-gray-01
bg-gray-01
bg-gray-02
bg-gray-02
bg-gray-03
bg-gray-03
bg-gray-04
bg-gray-04
bg-gray-05
bg-gray-05
bg-gray-06
bg-gray-06
bg-gray-07
bg-gray-07
bg-gray-08
bg-gray-08
bg-gray-09
bg-gray-09
bg-gray-10
bg-gray-10
bg-gray-11
bg-gray-11
bg-gray-12
bg-gray-12
bg-menu
bg-menu-darker
bg-log
bg-log
bg-log-d
bg-log-d
bg-pink
bg-pink
Border
border-log
border-log
border-light
border-light
border-dark
border-dark
border-pink
border-pink
Border - Side
border-b-log
border-b-log
border-t-log
border-t-log
border-l-log
border-l-log
border-r-log
border-r-log
Border - Width
border-w-0
border-w-0
border-w-1
border-w-1
border-w-2
border-w-2
border-w-3
border-w-3
border-w-4
border-w-4
border-w-5
border-w-5
Border - Side Width ( * From 0 To 5 )
border-t-*
border-t-
border-b-*
border-b-
border-l-*
border-l-
border-r-*
border-r-
Border - Radius
border-radius-no
border-radius-no
border-radius-s
border-radius-s
border-radius-m
border-radius-m
border-radius-l
border-radius-l
Margin
Margin-Style
margin-t-b-10
margin-t-b-10
margin-t-10
margin-t-10
margin-b-10
margin-b-10
Margin-Value ( Multiples of 5. For example 0, 5, 10, 15 .. 50)
margin-t-b-0
to
margin-t-b-50
to
margin-t-b-50
Responsive Class
margin-md-t-b-*
margin-md-t-b-*
margin-sm-t-b-*
margin-sm-t-b-*
margin-xs-t-b-*
margin-xs-t-b-*
Padding
Padding-Style
padding-t-b-10
padding-t-b-10
padding-t-10
padding-t-10
padding-b-10
padding-b-10
Padding-Value ( Multiples of 5. For example 0, 5, 10, 15 .. 50)
padding-t-b-0
to
padding-t-b-50
to
padding-t-b-50
Responsive Class
padding-md-t-b-*
padding-md-t-b-*
padding-sm-t-b-*
padding-sm-t-b-*
padding-xs-t-b-*
padding-xs-t-b-*
list
list-unstyled
- Item1
- Item2
- Item3
- Item4
list-unstyled
list-inline
- Item1
- Item2
- Item3
- Item4
list-inline
list-inside
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores, ut omnis repudiandae dolores accusantium consequatur quidem tempora unde incidunt.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur ipsum repellat facere veniam, illum maxime dolor deserunt ab, sapiente doloribus.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo asperiores delectus, pariatur officiis deserunt non, vel doloremque voluptatem eos maxime?
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur tempore reprehenderit vitae ipsam libero laborum fugit quia eveniet distinctio magnam.
list-inside
list-outside
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque inventore unde deleniti atque praesentium amet tempora hic veritatis sint.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas itaque explicabo dignissimos laudantium asperiores temporibus tenetur enim iste aliquam aperiam.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere sunt distinctio quisquam dolores, sit iste reprehenderit saepe quibusdam dolorem veritatis.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores molestias illo quidem ab aliquam optio magnam eum repudiandae id saepe!
list-outside
list-dot-style-log
- Item1
- Item2
- Item3
- Item4
list-dot-style-log
LOGO
Dimbuy - Logo
<img src="/styleGuide/v1/asset/img/dimbuy-logo/dimbuy.svg" alt="Dimbuy">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/logistics.svg" alt="Dimbuy - Logistics">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/logistics-white.svg" alt="Dimbuy - Logistics">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/help.svg" alt="Dimbuy - HelpYouBuy">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/help-white.svg" alt="Dimbuy - HelpYouBuy">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/eshop.svg" alt="Dimbuy - eShop">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/eshop-white.svg" alt="Dimbuy - eshop">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/logistics-xmas2016.svg" alt="Dimbuy - Logistics">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/help-xmas2016.svg" alt="Dimbuy - HelpYouBuy">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/eshop-xmas2016.svg" alt="Dimbuy - eShop">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/logistics-cny2017.svg" alt="Dimbuy - Logistics">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/help-cny2017.svg" alt="Dimbuy - HelpYouBuy">
<img src="/styleGuide/v1/asset/img/dimbuy-logo/eshop-cny2017.svg" alt="Dimbuy - eShop">
Courier
<img class="logo-acs logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_acs.svg" alt="ACS">
<img class="logo-FedEx logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_fedex.svg" alt="FedEx">
<img class="logo-DHL logo-w-2" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_DHL.svg" alt="DHL">
<img class="logo-Kerry logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_kerry.svg" alt="嘉里快遞">
<img class="logo-SF logo-h-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sf-standard_logo.svg" alt="順豐速運">
<img class="logo-SF logo-SF-standard logo-w-2" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sf-standard.svg" alt="順豐速運">
<img class="logo-SF logo-SF-stop logo-w-2" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sf-stop.svg" alt="指定順豐站">
<img class="logo-SF logo-SF-shop logo-w-2" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sf-shop.svg" alt="順豐授權便利店">
<img class="logo-SF logo-SF-locker logo-h-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sf-locker.svg" alt="順便智能櫃">
<img class="logo-circle-k logo-h-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_circle-k.svg" alt="OK">
<img class="logo-7-11 logo-h-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_seven-eleven.svg" alt="7-11">
<img class="logo-sinope logo-h-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_sinopec.svg" alt="Sinopec">
<img class="logo-vango logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_vango.svg" alt="VanGO">
<img class="logo-unitop logo-w-2" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_unitop.svg" alt="Unitop">
<img class="logo-locker-life-locker logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_locker-life-locker.svg" alt="LockerLife智能櫃">
<img class="logo-locker-life-711 logo-w-1" src="/styleGuide/v1/asset/img/courier-logo/ship-logo_locker-life-711.svg" alt="LockerLife智能櫃 (7-11便利店)">
Country
<img class="flag-img" src="/styleGuide/v1/asset/img/country/cn.svg" alt="中國">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/tw.svg" alt="台灣">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/jp.svg" alt="日本">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/kr.svg" alt="韓國">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/us.svg" alt="美國">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/de.svg" alt="德國">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/gk.svg" alt="英國">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/au.svg" alt="澳洲">
<img class="flag-img" src="/styleGuide/v1/asset/img/country/global.svg" alt="國際">
Flag Without Shadow
no-shadow
Flag Size
flag-m
flag-s
Icons
Dimbuy - icon
<i class="icon-brand-log"></i>
<i class="icon-brand-help"></i>
<i class="icon-brand-eshop"></i>
<i class="icon-box"></i>
<i class="icon-calulator"></i>
<i class="icon-user"></i>
<i class="icon-close-round"></i>
<i class="icon-up-open-big"></i>
<i class="icon-down-open-big"></i>
<i class="icon-left-open-big"></i>
<i class="icon-right-open-big"></i>
<i class="icon-menu"></i>
<i class="icon-close"></i>
<i class="icon-help-circled"></i>
<i class="icon-search"></i>
<i class="icon-android-add"></i>
<i class="icon-android-remove"></i>
<i class="icon-triangle-down"></i>
<i class="icon-tags"></i>
<i class="icon-speakerphone"></i>
<i class="icon-clone"></i>
<i class="icon-check"></i>
<i class="icon-declare"></i>
<i class="icon-order-history"></i>
<i class="icon-personal-info"></i>
<i class="icon-warehouse"></i>
<i class="icon-address"></i>
<i class="icon-flight"></i>
<i class="icon-android-boat"></i>
<i class="icon-shopping-cart"></i>
<i class="icon-dot-menu"></i>
<i class="icon-exclamation-circle"></i>
Other Icon
Ungroup
<img src="/styleGuide/v1/asset/img/other-logo/cvv.svg" alt="CVV">
<img src="/styleGuide/v1/asset/img/other-logo/ssl.png" alt="SSL">
<img src="/styleGuide/v1/asset/img/other-logo/logo-ping-an.svg" alt="中國平安">
Payment
<img src="/styleGuide/v1/asset/img/other-logo/master.svg" alt="Master">
<img src="/styleGuide/v1/asset/img/other-logo/visa.svg" alt="Visa">
<img src="/styleGuide/v1/asset/img/other-logo/alipay.svg" alt="支付寶">
<img src="/styleGuide/v1/asset/img/other-logo/Octopus.jpg" alt="八達通">
<img src="/styleGuide/v1/asset/img/other-logo/pay.svg" alt="運費到付">
<img src="/styleGuide/v1/asset/img/other-logo/dim-dollar.svg" alt="點多拿">
Plans
<img src="/styleGuide/v1/asset/img/svg/index-icon-001.svg" alt="單件快遞">
<img src="/styleGuide/v1/asset/img/svg/index-icon-002.svg" alt="合併快遞">
<img src="/styleGuide/v1/asset/img/svg/index-icon-003.svg" alt="無限配送">
<img src="/styleGuide/v1/asset/img/svg/index-icon-004.svg" alt="特大配送">
<img src="/styleGuide/v1/asset/img/svg/index-icon-005.svg" alt="香港退件">
<img src="/styleGuide/v1/asset/img/svg/index-icon-006.svg" alt="國內退件">
<img src="/styleGuide/v1/asset/img/svg/index-icon-007.svg" alt="Express Checkout">
Pros
<img src="/styleGuide/v1/asset/img/svg/home-cp.svg" alt="性價比高">
<img src="/styleGuide/v1/asset/img/svg/home-network.svg" alt="龐大網絡">
<img src="/styleGuide/v1/asset/img/svg/home-promise.svg" alt="質量保證">
<img src="/styleGuide/v1/asset/img/svg/home-services.svg" alt="服務承諾">
Flow
<img src="/styleGuide/v1/asset/img/svg/flow-address.svg" alt="寄往倉庫">
<img src="/styleGuide/v1/asset/img/svg/flow-group.svg" alt="組單">
<img src="/styleGuide/v1/asset/img/svg/flow-send.svg" alt="寄送">
<img src="/styleGuide/v1/asset/img/svg/flow-pickup.svg" alt="收貨">
Functions
Tool tips
Tooltips - Hover
<span data-toggle="tooltip-hover" title="tooltip-txt"> Tooltips - Hover </span>
Tooltips - Click
<span data-toggle="tooltip-click" title="tooltip-txt"> Tooltips - Click </span>
Pop over
Popover - Hover
<a rel="popover-img-hover" title="Popover Title" data-img="/styleGuide/v1/asset/img/dimbuy-logo/dimbuy.svg" alt="Dimbuy" > Popover - Hover </a>
Popover - Click
<a rel="popover-img-click" title="Popover Title" data-img="/styleGuide/v1/asset/img/dimbuy-logo/dimbuy.svg" alt="Dimbuy" > Popover - Click </a>
Text Roater
Change Language
千葉県成田市十余三37-1、サンリツ, #DBAIR371015 ENG
Click Copy Text
The text will be copied!<span class="click-copy-text > text </span>
Components
Tabs
-
中國
-
台灣
-
日本
-
韓國
-
美國
-
德國
-
英國
-
澳洲
倉庫地址
東莞市虎門鎮赤崗富馬工業園點買貨運中轉站 + ( 閣下之姓氏+您手機號 *例如：張61234567 ）
郵遞區號
52392
收件人
（閣下之姓名）
電話
15362446417
倉庫地址
台北市松山區撫遠街249巷31, #DBAIR371015
郵遞區號
105
收件人
（閣下之姓名）
電話
02-27606269
倉庫地址
千葉県成田市十余三37-1、サンリツ, #DBAIR371015 ENG
郵遞區號
286-0101
收件人
（閣下之英文姓名）
電話
476-36-6777
倉庫地址
인천시 중구 운서동 인천 자유무역지대 블럭 B1, C204호 ㈜코차이나 로지스틱스, #DBKDS371015 ENG
郵遞區號
22379
收件人
（閣下之英文姓名）
電話
02-713-0061
-
空運 - RD (Rancho Dominguez)
-
空運 - MP (Monterey Park)
-
船運 - RD (Rancho Dominguez)
倉庫地址
19201 Susana Road, #DB371015AIR
城市
Rancho Dominguez
州份
CA
國家
United States
郵遞區號
90221
收件人
（閣下之英文姓名）
電話
(310) 537-2000 (1204)
倉庫地址
912 Hershey Ave, #DB371015AIR
城市
Monterey Park
州份
CA
國家
United States
郵遞區號
91755
收件人
（閣下之英文姓名）
電話
(626) 500-7369
倉庫地址
19201 Susana Road, #DBOCE371015
城市
Rancho Dominguez
州份
CA
國家
United States
郵遞區號
90221
收件人
（閣下之英文姓名）
電話
(310) 537-2000 (1204)
倉庫地址
NADO, Am Gruenen Weg 2a, #371015DBKDS
城市
Kelsterbach
國家
Germany
郵遞區號
65451
收件人
（閣下之英文姓名）
電話
+49-6107-9897-266
倉庫地址
[ line 1 ] Western Eye (DEPT C) / Safestore
[ line 2 ] c/o DimBuy #371015
[ line 2 ] c/o DimBuy #371015
地區
Northway Filton
城市
Bristol
國家
United Kingdom
郵遞區號
BS34 7QG
收件人
（閣下之英文姓名）
電話
0117 – 9696016
-
中國
-
台灣
-
日本
-
韓國
-
美國
-
德國
-
英國
-
澳洲
-
中國
-
台灣
-
日本
-
韓國
-
美國
-
德國
-
英國
-
澳洲
-
中國
-
台灣
-
日本
-
韓國
-
美國
-
德國
-
英國
-
澳洲
Select
#Desktop - STYLED select
#Mobile - NATIVE select
< select class="form-control styleSelect" > < option value="" > 中國< /option > < /select >
Vertical Tabs
- 提供全面物流技術方案，透過倉存管理系統，協助商戶更靈活處理貨物流向。
- 商戶可預存商品或換領禮品，經集運處理，有效降低運輸成本及提升配送時效。
- 網上系統查詢服務，高透明度運作及實時管理。
- 24小時保安及紅外線監測系統，保障商品安全存放。
- 重新包裝服務，如禮品包裝、分貨、貼標纖處理等。
- 與6大型派送商合作，建立強大的本地配送網絡，送貨服務覆蓋工商業區及住宅區。
- 與多間派送商的物流系統連接，供商戶即時查看送貨狀態。
- 與多間物流合作伙伴, 因應不同客戶需求，提供最合適的物流服務，如冷凍貨品及極 速配送服務等。
- 提供中國、台灣、日本、韓國、美國、德國、英國、澳洲及本地之集運及轉運服務，商戶可選用空運、陸運及船運服務。
- 全港超過400個換領點，包括DimBuy換領中心、順豐站、順便智能櫃、OK便利店、VanGo便利店及中石化加油站，方便客人換領貨物。
- 提供多元化換領服務，如手機驗証、換領信、優惠券、即買即換、退款退貨等
- 代收貨款及貨品、產品展示及推銷服務。
- 為不同規模的公司提供度身訂造的宣傳方案，擅長於透過網上平台、電子郵件及社交媒體推展推廣活動及分享訊息，開發不同的顧客溝通渠道，建立互動關係，接觸廣大的顧客群，以滿足商戶不同的銷售目標。
- 全系統化操作, 利用API應用程式與客戶系統對接，資料得以互傳，系統實時更新，令資料更快更準確到手，同時減少內部人手操作。擁有專業的IT 團隊，提供系統研發及管理、系統整合等IT 相關服務。
- 提供客戶服務專線讓企業客戶查詢貨件庫存情況，同時為消費者客戶端提供換領貨品、退貨或更換貨品之售後服務。
- 為客戶度身訂造增值服務，包括代收現金、物流保險、質量檢查、共同包裝及重新包裝、禮品包裝、貨件標籤及條碼處理、退件等。
Carousel
#Desktop - 3, Tablet 3 , Mobile 1
-
貨到付款
運費到付，不需再於網上登入付款
-
貨到付款
運費到付，不需再於網上登入付款
-
貨到付款
運費到付，不需再於網上登入付款
owl-carousel-3-3-1
Wizard Step
#Desktop has connect, Mobile has no.
1. 取件
運費到付
2. 取件
運費到付
3. 取件
運費到付
4. 取件
運費到付