Brand colors
@theme__color__primary
@theme__color__secondary
@theme__color__primary-alt
Text colors
@heading__color__base
@od-heading__color--secondary
@od-p__color--primary
@od-p__color--secondary
@link__color
@form-element-input__focus__color
@form-element-input-placeholder__color
System colors
@button-primary__background
@button__background
@form-element-input__border-color
@form-element-input__disabled__background
Background colors
@page__background-color
@od-product__background
@od-background__color--primary
@od-background__color--secondary
@od-background__color--tertiary
@od-overlay__background
State colors
@message-success__color
@error__color
@od-state-inactive__color
@od-state-active__color
Order-status colors
@od-processing__color
@od-pending__color
@od-complete__color
@od-canceled-closed__color
Other colors
@od-line-separator
@od-discount__color
Headlines
Headline 1 (H1)
Headline 1 (H1 mobile)
Headline 1 (H1) - PDP
Headline 1 (H1 mobile) - PDP
Headline 2 (H2)
Headline 2 (H2 mobile)
Headline 3 (H3)
Headline 3 (H3 mobile)
Headline 4 (H4)
Headline 5 (H5)
Headline 6 (H6)
Text
Paragraph
Lists
Ordered list:
- Item
- Item
- Item
Unordered list:
- Item
- Item
- Item
Details list:
- Description Term
- Description Details
- Description Term
- Description Details
- Description Term
- Description Details
Indents
@indent__base
@indent__xs
@indent__s
@indent__m
@indent__l
@indent__xl
@od-indent__xxl
@od-indent__xxxl
@od-indent__xxxxl
Browser default button
Primary button
Secondary button
Accent button
Mixin .lib-button-reset();
Mixin .lib-button-as-link();
Mixin .lib-link-as-button();
Mixin .lib-button-revert-secondary-color();
Page Builder buttons without URL <div>
Page Builder buttons as links
Actions toolbar
@actions-toolbar-actions__position: left; @actions-toolbar-actions__reverse: false;
@actions-toolbar-actions__position: center; @actions-toolbar-actions__reverse: false;
@actions-toolbar-actions__position: right; @actions-toolbar-actions__reverse: false;
@actions-toolbar-actions__position: justify; @actions-toolbar-actions__reverse: false;
@actions-toolbar-actions__position: left; @actions-toolbar-actions__reverse: true;
@actions-toolbar-actions__position: center; @actions-toolbar-actions__reverse: true;
@actions-toolbar-actions__position: right; @actions-toolbar-actions__reverse: true;
@actions-toolbar-actions__position: justify; @actions-toolbar-actions__reverse: true;
How to use
<i class="od-icon-{iconName}"></i>
.selector::[before|after] { .od-icon(@od-icon-{iconName}); }
All icons
account-circle
@od-icon-account-circle
<i class="od-icon-account-circle"></i>
account
@od-icon-account
<i class="od-icon-account"></i>
account1
@od-icon-account1
<i class="od-icon-account1"></i>
anti-bacterial
@od-icon-anti-bacterial
<i class="od-icon-anti-bacterial"></i>
arrow-down
@od-icon-arrow-down
<i class="od-icon-arrow-down"></i>
arrow-left-alt
@od-icon-arrow-left-alt
<i class="od-icon-arrow-left-alt"></i>
arrow-left-circle
@od-icon-arrow-left-circle
<i class="od-icon-arrow-left-circle"></i>
arrow-left
@od-icon-arrow-left
<i class="od-icon-arrow-left"></i>
arrow-right-alt
@od-icon-arrow-right-alt
<i class="od-icon-arrow-right-alt"></i>
arrow-right-circle
@od-icon-arrow-right-circle
<i class="od-icon-arrow-right-circle"></i>
arrow-right
@od-icon-arrow-right
<i class="od-icon-arrow-right"></i>
arrow-up
@od-icon-arrow-up
<i class="od-icon-arrow-up"></i>
attachment
@od-icon-attachment
<i class="od-icon-attachment"></i>
bag
@od-icon-bag
<i class="od-icon-bag"></i>
bar
@od-icon-bar
<i class="od-icon-bar"></i>
bell
@od-icon-bell
<i class="od-icon-bell"></i>
calendar
@od-icon-calendar
<i class="od-icon-calendar"></i>
camera
@od-icon-camera
<i class="od-icon-camera"></i>
card
@od-icon-card
<i class="od-icon-card"></i>
cart-left
@od-icon-cart-left
<i class="od-icon-cart-left"></i>
cart-right-alt
@od-icon-cart-right-alt
<i class="od-icon-cart-right-alt"></i>
cart-right
@od-icon-cart-right
<i class="od-icon-cart-right"></i>
chat
@od-icon-chat
<i class="od-icon-chat"></i>
clipboard
@od-icon-clipboard
<i class="od-icon-clipboard"></i>
clock
@od-icon-clock
<i class="od-icon-clock"></i>
close-sqaru
@od-icon-close-sqaru
<i class="od-icon-close-sqaru"></i>
close
@od-icon-close
<i class="od-icon-close"></i>
colour-variation
@od-icon-colour-variation
<i class="od-icon-colour-variation"></i>
compare
@od-icon-compare
<i class="od-icon-compare"></i>
compass
@od-icon-compass
<i class="od-icon-compass"></i>
cross-circle-filled
@od-icon-cross-circle-filled
<i class="od-icon-cross-circle-filled"></i>
cross-circle
@od-icon-cross-circle
<i class="od-icon-cross-circle"></i>
cross-sqare
@od-icon-cross-sqare
<i class="od-icon-cross-sqare"></i>
cross
@od-icon-cross
<i class="od-icon-cross"></i>
cursor
@od-icon-cursor
<i class="od-icon-cursor"></i>
delete-alt
@od-icon-delete-alt
<i class="od-icon-delete-alt"></i>
delete-empty
@od-icon-delete-empty
<i class="od-icon-delete-empty"></i>
delete
@od-icon-delete
<i class="od-icon-delete"></i>
delivery
@od-icon-delivery
<i class="od-icon-delivery"></i>
download
@od-icon-download
<i class="od-icon-download"></i>
edit
@od-icon-edit
<i class="od-icon-edit"></i>
@od-icon-email
<i class="od-icon-email"></i>
enlarge
@od-icon-enlarge
<i class="od-icon-enlarge"></i>
error-mage
@od-icon-error-mage
<i class="od-icon-error-mage"></i>
error
@od-icon-error
<i class="od-icon-error"></i>
eye
@od-icon-eye
<i class="od-icon-eye"></i>
fIlter
@od-icon-fIlter
<i class="od-icon-fIlter"></i>
facebook-icon
@od-icon-facebook-icon
<i class="od-icon-facebook-icon"></i>
@od-icon-facebook
<i class="od-icon-facebook"></i>
fast-forward
@od-icon-fast-forward
<i class="od-icon-fast-forward"></i>
filter
@od-icon-filter
<i class="od-icon-filter"></i>
flag
@od-icon-flag
<i class="od-icon-flag"></i>
floor-application
@od-icon-floor-application
<i class="od-icon-floor-application"></i>
four-columns
@od-icon-four-columns
<i class="od-icon-four-columns"></i>
google-plus
@od-icon-google-plus
<i class="od-icon-google-plus"></i>
hamburger-menu
@od-icon-hamburger-menu
<i class="od-icon-hamburger-menu"></i>
heart-filled
@od-icon-heart-filled
<i class="od-icon-heart-filled"></i>
heart
@od-icon-heart
<i class="od-icon-heart"></i>
help
@od-icon-help
<i class="od-icon-help"></i>
ideas
@od-icon-ideas
<i class="od-icon-ideas"></i>
info
@od-icon-info
<i class="od-icon-info"></i>
information
@od-icon-information
<i class="od-icon-information"></i>
@od-icon-instagram
<i class="od-icon-instagram"></i>
linkedin-icon
@od-icon-linkedin-icon
<i class="od-icon-linkedin-icon"></i>
@od-icon-linkedin
<i class="od-icon-linkedin"></i>
location-filled
@od-icon-location-filled
<i class="od-icon-location-filled"></i>
location-icon
@od-icon-location-icon
<i class="od-icon-location-icon"></i>
location-message
@od-icon-location-message
<i class="od-icon-location-message"></i>
location
@od-icon-location
<i class="od-icon-location"></i>
lock
@od-icon-lock
<i class="od-icon-lock"></i>
logo-amber
@od-icon-logo-amber
<i class="od-icon-logo-amber"></i>
logo_trade
@od-icon-logo_trade
<i class="od-icon-logo_trade"></i>
mail-radius
@od-icon-mail-radius
<i class="od-icon-mail-radius"></i>
@od-icon-mail
<i class="od-icon-mail"></i>
map-pin
@od-icon-map-pin
<i class="od-icon-map-pin"></i>
message
@od-icon-message
<i class="od-icon-message"></i>
messenger
@od-icon-messenger
<i class="od-icon-messenger"></i>
minus-square
@od-icon-minus-square
<i class="od-icon-minus-square"></i>
minus
@od-icon-minus
<i class="od-icon-minus"></i>
mute
@od-icon-mute
<i class="od-icon-mute"></i>
navigation
@od-icon-navigation
<i class="od-icon-navigation"></i>
padlock-alt
@od-icon-padlock-alt
<i class="od-icon-padlock-alt"></i>
padlock
@od-icon-padlock
<i class="od-icon-padlock"></i>
pause
@od-icon-pause
<i class="od-icon-pause"></i>
pencil
@od-icon-pencil
<i class="od-icon-pencil"></i>
phone-icon
@od-icon-phone-icon
<i class="od-icon-phone-icon"></i>
phone
@od-icon-phone
<i class="od-icon-phone"></i>
pinterest-fill
@od-icon-pinterest-fill
<i class="od-icon-pinterest-fill"></i>
pinterest-icon
@od-icon-pinterest-icon
<i class="od-icon-pinterest-icon"></i>
@od-icon-pinterest
<i class="od-icon-pinterest"></i>
play
@od-icon-play
<i class="od-icon-play"></i>
plus-circle
@od-icon-plus-circle
<i class="od-icon-plus-circle"></i>
plus-sqare
@od-icon-plus-sqare
<i class="od-icon-plus-sqare"></i>
plus
@od-icon-plus
<i class="od-icon-plus"></i>
project-list
@od-icon-project-list
<i class="od-icon-project-list"></i>
question
@od-icon-question
<i class="od-icon-question"></i>
scratch-stain-resistant
@od-icon-scratch-stain-resistant
<i class="od-icon-scratch-stain-resistant"></i>
search-alt
@od-icon-search-alt
<i class="od-icon-search-alt"></i>
search-icon
@od-icon-search-icon
<i class="od-icon-search-icon"></i>
search
@od-icon-search
<i class="od-icon-search"></i>
send
@od-icon-send
<i class="od-icon-send"></i>
settings
@od-icon-settings
<i class="od-icon-settings"></i>
share
@od-icon-share
<i class="od-icon-share"></i>
shopping-cart
@od-icon-shopping-cart
<i class="od-icon-shopping-cart"></i>
skip
@od-icon-skip
<i class="od-icon-skip"></i>
slip-resistant
@od-icon-slip-resistant
<i class="od-icon-slip-resistant"></i>
snapchat-filled
@od-icon-snapchat-filled
<i class="od-icon-snapchat-filled"></i>
snapchat
@od-icon-snapchat
<i class="od-icon-snapchat"></i>
soun-on
@od-icon-soun-on
<i class="od-icon-soun-on"></i>
spot
@od-icon-spot
<i class="od-icon-spot"></i>
spotify
@od-icon-spotify
<i class="od-icon-spotify"></i>
star-filled
@od-icon-star-filled
<i class="od-icon-star-filled"></i>
star
@od-icon-star
<i class="od-icon-star"></i>
success-circle
@od-icon-success-circle
<i class="od-icon-success-circle"></i>
success-filled
@od-icon-success-filled
<i class="od-icon-success-filled"></i>
success
@od-icon-success
<i class="od-icon-success"></i>
thickness
@od-icon-thickness
<i class="od-icon-thickness"></i>
thumb
@od-icon-thumb
<i class="od-icon-thumb"></i>
tick-box-full
@od-icon-tick-box-full
<i class="od-icon-tick-box-full"></i>
trash-2
@od-icon-trash-2
<i class="od-icon-trash-2"></i>
trash
@od-icon-trash
<i class="od-icon-trash"></i>
trashcan
@od-icon-trashcan
<i class="od-icon-trashcan"></i>
triangle-down
@od-icon-triangle-down
<i class="od-icon-triangle-down"></i>
triangle-left
@od-icon-triangle-left
<i class="od-icon-triangle-left"></i>
triangle-right
@od-icon-triangle-right
<i class="od-icon-triangle-right"></i>
triangle-up
@od-icon-triangle-up
<i class="od-icon-triangle-up"></i>
tumblr
@od-icon-tumblr
<i class="od-icon-tumblr"></i>
@od-icon-twitter
<i class="od-icon-twitter"></i>
two-columns
@od-icon-two-columns
<i class="od-icon-two-columns"></i>
upload
@od-icon-upload
<i class="od-icon-upload"></i>
wall-application
@od-icon-wall-application
<i class="od-icon-wall-application"></i>
warning-filled
@od-icon-warning-filled
<i class="od-icon-warning-filled"></i>
warning
@od-icon-warning
<i class="od-icon-warning"></i>
youtube
@od-icon-youtube
<i class="od-icon-youtube"></i>
zoom-in
@od-icon-zoom-in
<i class="od-icon-zoom-in"></i>
Static input
UI input
Select
Textarea
Checkboxes
Radio buttons
How to use
<update handle="od_faq_modal"/>
<move element="od.faq.modal" destination="page.wrapper" after="footer-container"/>
<button data-trigger="faq-modal">Open FAQ modal</button>
FAQ modal trigger example
Custom template {"od/swiper": {}}
Custom template with draggable scrollbar {"od/swiper": {"scrollbar": {"auto": true}}}
Custom template with media breakpoint {"od/swiper": {"breakpoint": "(max-width: 1025px)"}}
Custom template with thumbs {"od/swiper": {"slidesPerView": 1, "thumbs": {"swiper": ".js-swiper-thumbs"}}
Page Builder's Grid {"od/swiper": {"pageBuilder": true}}
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Page Builder's Grid with media breakpoint {"od/swiper": {"pageBuilder": true, "breakpoint": "(max-width: 1024px)"}}
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10