Styleguide

Fonts

  • Optima
    AaBb

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
    a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
    1​2​3​4​5​6​7​8​9​0​
    &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    .font--optima-regular
  • Akzidenz Grotesk
    AaBb

    A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
    a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
    1​2​3​4​5​6​7​8​9​0​
    &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;

    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 - tertiary
    I am a Tertiary Headline
    .headline--tertiary

Colors

  • Brand Colors
    White
    #fff
    $color-white
    Navy
    #040a2b
    $color-navy

Icons

    • aerin_star
    • checkbox
    • checkbox--checked
    • close
    • dropdown
    • el_star
    • gift-icon
    • information
    • left_arrow
    • left_arrow_2
    • microphone
    • minus
    • package_spirit
    • pinterest
    • plus
    • review_star
    • right_arrow
    • right_arrow_2
    • weibo
    <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>
    

Buttons

  • Button
    Button
    .button
  • Button - Dark background
    Button
    .button .button--dark
  • Button - Secondary
    Button
    .button .button--secondary
  • Button - Light background
    Button
    .button .button--light

Text Links

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
Top