Styleguide
Fonts
- OptimaAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
&.,?!@()#$%*+-=:;.font--optima-regular - Akzidenz GroteskAaBb
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
&.,?!@()#$%*+-=:;TODO add helper class
Typography
- Headline - Large (Primary)I am a Primary Headline.headline--large OR .headline--primary
- Headline - Medium (Secondary)I am a Secondary Headline.headline--medium OR .headline--secondary
- Headline - tertiaryI am a Tertiary Headline.headline--tertiary
Colors
- Brand ColorsWhite
#fff
$color-whiteNavy
#040a2b
$color-navy
Icons
<svg role="img" aria-labelledby="my-unique-id" class="icon icon--twitter"> <title id="my-unique-id">ADA title goes here</title> <use xlink:href="#twitter"></use> </svg>
Prodcat Service
- Quantity Selector.elc-quantity-selector
- Product Brief Wrapper.elc-product-brief
- Product Cross Sell.elc-product-cross-sell
- Image Navigation Menu.elc-image-nav-menu-item
- Shade Picker.elc-shade-picker
- Shade Picker Button.elc-shade-picker-button
- Size Picker.elc-size-picker
Toggle
Code
Code