Icon font

  • i-arrow_down
  • i-arrow_left
  • i-arrow_right
  • i-arrow_up
  • i-awards
  • i-car
  • i-car_speed
  • i-catalog
  • i-checkmark
  • i-click_collect
  • i-close
  • i-cursor
  • i-date
  • i-free_returns
  • i-gift
  • i-gift2
  • i-gift_list
  • i-gift_wrap
  • i-grid_view
  • i-help
  • i-home
  • i-info
  • i-list_view
  • i-live_chat
  • i-lock
  • i-mail
  • i-menu-nav
  • i-minus
  • i-order_tracking
  • i-people
  • i-plane
  • i-plus
  • i-print
  • i-quick_view
  • i-screen
  • i-shopping_basket
  • i-size_guide
  • i-small_arrow
  • i-social_chat
  • i-social_fb
  • i-social_google
  • i-social_instagram
  • i-social_linkedin
  • i-social_pinterest
  • i-social_twitter
  • i-social_youtube
  • i-store_finder
  • i-voucher
  • i-wish_list

Global accordion

Base HTML Markup (mobile only):

            
               <div class="b-accordion_wrapper js-accordion_wrapper">
                    <div class="b-accordion_title js-accordion_title">Toggler text</div>
                    <div class="b-accordion_container js-accordion_container">Toggle content</div>
               </div>
           
       

Desktop HTML Markup (add "m-apply-desktop" modifier class to "b-accordion_wrapper"):

            
               <div class="b-accordion_wrapper js-accordion_wrapper m-apply-desktop">
                    <div class="b-accordion_title js-accordion_title">Toggler text</div>
                    <div class="b-accordion_container js-accordion_container">Toggle content</div>
               </div>
           
       

Tablets HTML Markup (add "m-apply-tablet" modifier class to "b-accordion_wrapper"):

            
               <div class="b-accordion_wrapper js-accordion_wrapper m-apply-tablet">
                    <div class="b-accordion_title js-accordion_title">Toggler text</div>
                    <div class="b-accordion_container js-accordion_container">Toggle content</div>
               </div>
           
       

Desktop Example:

Toggler text

Toggle content

Global tabs

Base HTML Markup (Standart tabs):

        
            <div class="b-tabs js-tabs">
                <ul class="b-tabs-menu">
                    <li class="m-active">
                        <a href="#tab1" class="b-tabs-menu_link">Tab 1</a>
                    </li>

                    <li>
                        <a href="#tab2" class="b-tabs-menu_link">Tab 2</a>
                    </li>
                </ul>

                <div class="b-tabs-wrapper">
                    <div id="tab1" class="b-tabs-content m-active">
                        Tab content 1
                    </div>

                    <div id="tab2" class="b-tabs-content">
                        Tab content 2
                    </div>
                </div>
            </div>
        
    

Example:

Tab content 1
Tab content 2

Base HTML Markup (Tabs with accordion in mobile. Add new modifiers and new classes to "tabs". Look code standart ):

        
            <div class="b-tabs m-accordion js-tabs">
                <ul class="b-tabs-menu">
                    <li class="m-active">
                        <a href="#tab3" class="b-tabs-menu_link">Tab 3</a>
                    </li>

                    <li>
                        <a href="#tab4" class="b-tabs-menu_link">Tab 4</a>
                    </li>
                </ul>

                <div class="b-tabs-wrapper">
                    <div id="tab3" class="b-tabs-content b-accordion_wrapper js-accordion_wrapper js-content_wrapper m-active">
                        <div class="b-accordion_title h-visible-mobile js-accordion_title">Tab 1</div>
                        <div class="b-accordion_container js-accordion_container">Tab content 1</div>
                    </div>

                    <div id="tab4" class="b-tabs-content b-accordion_wrapper js-accordion_wrapper js-content_wrapper">
                        <div class="b-accordion_title h-visible-mobile js-accordion_title">Tab 4</div>
                        <div class="b-accordion_container js-accordion_container">Tab content 4</div>
                    </div>
                </div>
            </div>
        
    

Example:

Tab 3
Tab content 3
Tab 4
Tab content 4

Colors

Font-family classes

class="t-font-arial" ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ;:[]{}@`,./_?!"#$%&'()=^~\|*-+
class="t-font-times" ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ;:[]{}@`,./_?!"#$%&'()=^~\|*-+
class="t-font-mc-regular" ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ;:[]{}@`,./_?!"#$%&'()=^~\|*-+
class="t-font-mc-thin" ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ;:[]{}@`,./_?!"#$%&'()=^~\|*-+

Butons