Brand

Utility

Greyscale

Avalon

.text-avalon-book
@include font-avalon-book

.text-avalon-demi
@include font-avalon-demi

.text-avalon-bold
@include font-avalon-bold

Sephora Sans

.text-sephora-sans
@include font-sephora-sans

Sephora Serif

.text-sephora-book
@include font-sephora-serif

.text-sephora-italic
@include font-sephora-serif-italic

.page-title

.page-title-italic

.h1

.h2

.h3

.h4

.h5

p

{{ text }}

.rule-header

Navigation and Menu

Orders and Shipping Status

Payment Types

My Account

Beauty Pass

Functions

Social Media and Email

Flags

Booking Services

Others

Input States

Empty Field

Pug

.form-group.floating-labels
  label.control-label for='email' Email (Empty Field)
  input#email.form-control type='email'

Filled Field

Pug

.form-group.floating-labels
  label.control-label(for='email2') Email (Filled Field)
  input#email2.form-control(type='email' value='test@email.com')

Field Error

Pug

.form-group.has-error.floating-labels
  label.control-label(for='email3') Email (Field Error)
  input#email3.form-control(type='email' value='testemail')
  .form-control-feedback= 'Error: Email is incorrect'
  .input-error

Prefilled (Editable)

Pug

.form-group.floating-labels.editable-verification
  label.control-label(for='text1') Prefilled (Editable)
  input#text1.form-control(type='text' value='Flora Wong')
  .input-success

Verified (Readonly Field)

Pug

.form-group.floating-labels.non-editable-verification
  label.control-label(for='text2') Verified (Readonly Field)
  input#text2.form-control(type='text' value='Flora Wong' readonly=true)
  .input-success

Readonly Field

Pug

.form-group.floating-labels
  label.control-label(for='email4') Email (Readonly Field)
  input#email4.form-control(type='email' value='testemail' readonly=true)

Disabled Field

Pug

.form-group.floating-labels
  label.control-label(for='email5') Email (Disabled Field)
  input#email5.form-control(type='email' value='testemail' disabled=true)

Input Types

Textarea

Pug

.form-group.floating-labels.textarea
  label.control-label(for='textarea1') Textarea
  textarea#textarea1.form-control

CSS

// Required CSS for textareas to look as per the style guide
.form-group.floating-labels.textarea {
  @include textarea(90px);
}

Prefilled (Editable)

Pug

.form-group.floating-labels.textarea.filled.focused
  label.control-label(for='textarea') Textarea
  textarea#textarea.form-control Change Me

Text Input

Pug

.form-group.floating-labels.filled.focused
  label.control-label(for='text') Text Input
  input#text.form-control(type='text' value='Text Input')

URL Input

Pug

.form-group.floating-labels.filled.focused
  label.control-label(for='url') URL Input
  input#url.form-control(type='url' value='https://url.input')

Telephone Input

Pug

.form-group.floating-labels.filled.focused
  label.control-label(for='telephone') Telephone Input
  input#telephone.form-control(type='tel' value='+65 9123 5678')

Password Input

Pug

.form-group.floating-labels.filled.focused
  label.control-label(for='password') Password Input
  input#password.form-control(type='password' value='Password Input')

Number Input

Pug

.form-group.floating-labels.filled.focused
  label.control-label for='number' Number Input
  input#number.form-control(type='number' value='123456')

Credit Card

Pug

.form-group.floating-labels.filled.focused
  label.control-label(for='credit-card') Credit Card
  input#credit-card.form-control(type='text' value='4111111111111111' maxlength=19)

Date of Birth

Pug

.clearfix
  label.control-title = 'Date of Birth'
  .form-group.floating-labels#date-group
    label.control-label(for='date') DD
    input#date.form-control(type='number' max=31 min=1 maxlength=2)
  .form-group.floating-labels#month-group
    label.control-label(for='month') MM
    input#month.form-control(type='number' max=12 min=1 maxlength=2)
  .form-group.floating-labels#year-group
    label.control-label(for='year') YYYY
    input#year.form-control(type='number' max=2999 min=1899)

CSS

// Required CSS for DOB fields to look as per the style guide
#date-group, #month-group {
  width: 50px;
  float: left;
  margin-right: 9px;
}

#year-group {
  width: 100px;
  float: left;
}

Checkboxes

Pug

.row
  .col-4
    .form-check
      label.form-check-label(@click='toggleCheckbox')
        span.form-check-input.checkbox(:class='{ "checked" : isCheckboxChecked }') Default 1
  .col-4
    .form-check.disabled
      label.form-check-label
        span.form-check-input.checkbox Disabled
  .col-4
    .form-check.disabled
      label.form-check-label
        span.form-check-input.checkbox.checked Disabled Checked

JavaScript

toggleCheckbox () {
  this.isCheckboxChecked = !this.isCheckboxChecked
}

Radio

Pug

.row
  .col-4
    .form-check
      label.form-check-label(@click='toggleRadio')
        span.form-check-input.radio(:class='{ "selected" : isRadioSelected }') Default 1
  .col-4
    .form-check.disabled
      label.form-check-label
        span.form-check-input.radio Disabled
  .col-4
    .form-check.disabled
      label.form-check-label
        span.form-check-input.radio.checked Selected

JavaScript

toggleRadio () {
  this.isRadioSelected = !this.isRadioSelected
}

Select

.form-group
  label.control-label-inline Select:
  select.form-control
    option.form-option.selected(:value='1') 1
    option.form-option(:value='2') 2
    option.form-option(:value='3') 3
  i.dropdown-arrow

Introduction

The grid is modelled closely to Bootsrap's Grid layout, thus you can refer to their very comprehensive documentation.

Grid with .container

Grid with .container-fluid

Pug

/- Define a method to be called on click that modifies showAlert
button.btn.alert-btn(data-target='alert' @click='alertSuccess') Success
transition(name='alert-fade')
  .alert.alert-success(role='alert' v-if='showAlert')
    .alert-container
      .alert-message You've successfully signed in.
      button.close(type='button' data-dismiss='alert' aria-label='Close' @click='closeAlerts')

JavaScript

alertSuccess () {
  this.showAlertSuccess = true

  // Prevent double rendering if button is clicked too fast
  clearTimeout(this.alertTimeout)

  this.alertTimeout = setTimeout(() => {
    this.showAlertSuccess = false
  }, 3500)
}

Group Collapsible

Pug

.accordion#default-accordion(aria-multiselectable='true' role='tablist')

  .card.card-primary
    .card-header.cursor#heading-one(role='tab' data-toggle='collapse' data-target='#collapse-one' aria-expanded='true' aria-controls='collapse-one')
      h3.h3
        | HEADING (PRIMARY)

    .collapse.show#collapse-one(aria-labelledby='heading-one' role='tabpanel' data-parent='#default-accordion')
      .card-block
        | Change Me

  .card.card-primary.card-disabled
    .card-header.cursor#heading-two(role='tab' data-toggle='collapse' data-target='#collapse-two' aria-expanded='false' aria-controls='collapse-two')
      h3.h3
        | HEADING (DISABLED)

    .collapse#collapse-two(aria-labelledby='heading-two' role='tabpanel' data-parent='#default-accordion')
      .card-block
        | Change Me

  .card
    .card-header.cursor#heading-three(role='tab' data-toggle='collapse' data-target='#collapse-three' aria-expanded='false' aria-controls='collapse-three')
      h3.h3
        | HEADING

    .collapse#collapse-three(aria-labelledby='heading-three' role='tabpanel' data-parent='#default-accordion')
      .card-block
        | Change Me

Sidebar

Pug

.accordion.accordion-sidebar#sidebar-accordion(role='tablist')
  .card.card-light
    .card-header#skin-concerns-heading(data-toggle='collapse' data-target='#skin-concerns-collapse' role='tab')
      i.collapse-arrow
      h4.h4 SKINCARE

    .collapse.show#skin-concerns-collapse(aria-labelledby='skin-concerns-heading' role='tabpanel' data-parent='#sidebar-accordion')
      .card-block
        ul
          li
            a(href='#0') Cleanser & Exfoliator
            span.badge.badge-default 512
          li
            a(href='#0') Toner
            span.badge.badge-default 304
          li
            a(href='#0') Moisturiser
            span.badge.badge-default 96

            ul.secondary
              li
                a(href='#0') Day Moisturiser
                span.badge.badge-default 17
              li
                a(href='#0') Night Cream
                span.badge.badge-default 8

          li
            a(href='#0') Masks & Treatments
            span.badge.badge-default 7

  .card.card-light
    .card-header.collapsed#brands-heading(data-toggle='collapse' data-target='#brands-collapse' role='tab')
      i.collapse-arrow
      h4.h4 BRANDS

    .collapse#brands-collapse(role='tabpanel' aria-labelledby='brands-heading' data-parent='#sidebar-accordion')
      .card-block
        ul
          li
            a(href='#0') Alpha-H
            span.badge.badge-default 16
          li
            a(href='#0') Aromatherapy Associates
            span.badge.badge-default 4
          li
            a(href='#0') tarte
            span.badge.badge-default 9

  .card.card-light
    .card-header.collapsed#price-heading(data-toggle='collapse' data-target='#price-collapse' role='tab')
      i.collapse-arrow
      h4.h4 PRICE

    .collapse#price-collapse(role='tabpanel' aria-labelledby='price-heading' data-parent='#sidebar-accordion')
      .card-block
        ul
          li
            a(href='#0') Under $25
          li
            a(href='#0') $25 - $50
          li
            a(href='#0') $50 - $100
          li
            a(href='#0') $100 - $150

Preview Settings

Variants

To change the colour, refer to the class names underneath the desired colour

button.btn.btn-sm.btn-primary Small
button.btn.btn-primary Default
button.btn.btn-lg.btn-primary Large
button.btn.btn-block.btn-primary Block

Breadcrumb with 2 items

1. Home
2. Benefit Cosmetics
3. They're Real! Lengthening Mascara

Breadcrumb with 3 items

1. Home
2. Makeup
3. Face
4. Concealer

Pug

ol.breadcrumb
  li.breadcrumb-item Home
  li.breadcrumb-item Makeup
  li.breadcrumb-item Face
  li.breadcrumb-item.active Concealer

Spinner

Pug

.loader-spinner

Top

Bottom

Sizes

Pug

a.btn(href='#sample-modal' data-toggle='modal') Open Modal

.modal.fade#sample-modal(aria-hidden='true' role='dialog' tabindex='-1')
.modal-dialog(role='document')
  .modal-content
    .modal-header
      .modal-title This is a normal modal
      button.close(type='button' data-dismiss='modal' aria-label='Close')
    .modal-body
      p Lorem ...

Default

Pug

table.table
  thead
    tr
      th Option
      th Shipping Time
      th Timeslot
  tbody.text-center
    tr
      td Standard Shipping
      td 3 - 5 business days
      td No
    tr
      td Standard+ Shipping
      td 3 business days
      td Yes
    tr
      td Premium Shipping
      td 1 business day
      td Yes

Default

Primary

Pug

.tabs-container
  ul.nav.nav-tabs.nav-tabs-default(role='tablist')
    li.nav-item
      a.nav-link.active(data-toggle='tab' href='#description' role='tab') Description
    li.nav-item
      a.nav-link(data-toggle='tab' href='#how-to' role='tab') How-To
    li.nav-item
      a.nav-link(data-toggle='tab' href='#ingredients' role='tab') Ingredients

.tab-content.tab-content-default
  .tab-pane.active#description(role='tabpanel')
    h4 About
    p Achieve eye perfection with this high-pigment, waterproof liner that stays put all day for a fade-, melt-, crack-, and run-resistant finish.

    h4 Benefits
    ul
      li Unlike traditional felt tip liners, this brush tip will not fray.
      li Cruelty-free; no animal-derived ingredients and not tested on animals.

  .tab-pane#how-to(role='tabpanel')
    .text.markdown
      p
        b Magenta Contour Brush:   
        span create the perfect contour, strobe or highlight with dense, flat bristles

      p
        b Pink Powder Brush:   
        span apply just the right amount of foundation or finishing powder for an airbrushed look.

      p
        b Green Blending Shadow Brush:   
        span defines the crease while blending out harsh lines.
  .tab-pane#ingredients(role='tabpanel')
    h4 Synthetic bristles
    p Achieve eye perfection with this high-pigment, waterproof liner that stays put all day for a fade-, melt-, crack-, and run-resistant finish.

To use the Primary styling change the following classes in the code snippet:

nav-tabs-default to nav-tabs-primary
tab-content-default to tab-content-primary

Slider

Pug

.range-slider
  input.js-range-slider(data-min='0' data-max='1000' data-step='20' data-prefix='$' data-from='0' data-to='600')

Pug

.col-6.col-md-3
  .product-card(name='product' @mouseover='mouseoverProductCard' @mouseleave='mouseleaveProductCard')
    a.product-card-image-container(href='#product-link')
        .out-of-stock(v-if='isOutOfStock') Out of stock
        img.product-card-image(src='examples/product1-400x400.png')
    .product-card-heart-filled(v-if='productIsWishListed' @click='setWishList')
    .product-card-heart(v-if='!productIsWishListed' @click='setWishList')
    .product-card-actions(v-show='showProductActions')
        button.btn.btn-sm.btn-block.btn-primary.product-card-add-to-bag Add to Bag
        .product-card-variants-carousel
        i.carousel-arrow-left.arrow-left
        i.carousel-arrow-right.arrow-right
        p.carousel-more-variants +2
        .product-card-variants.variants-overflow
        span.variant-container(name='variant1' @click='selectVariant')
            img.product-variant.active(src='examples/variant1.jpg')
        span.variant-container(name='variant2' @click='selectVariant')
            i.out-of-stock.icon-sm
            img.product-variant(src='examples/variant2.jpg')
    a.product-card-description(href='#product-link')
        p.product-card-label
          span.product-card-label-primary New
          span  | Limited Edition
        p.product-card-brand Clinique
        p.product-card-product Chubby Stick Moisturizing Lip Colour Balm
        p.product-price $26.00
        .product-card-rating.rating-container
          .rateit(data-rateit-resetable='false' data-rateit-readonly='true' data-rateit-starwidth='14.65' data-rateit-starheight='12' data-rateit-value='1' data-rateit-ispreset='true')
        .product-card-variants-count 13 shades

JavaScript

mouseoverProductCard () {
  this.showProductActions = true
},

mouseleaveProductCard () {
  this.showProductActions = false
},

setWishList(e) {
  const targetClass = e.target.className;
  if (targetClass === 'product-card-heart' || targetClass === 'product-card-heart-filled') {
    this.productIsWishListed = !this.productIsWishListed;
  }
}

Default (Home)

Discover masks that hydrate, brighten and soothe your skin

Discover masks that hydrate, brighten and soothe your skin

Pug

.container
  .row
    .col-12.col-md-6.offset-lg-6.offset-md-3
      .media-container-lg
        .video-panel
          iframe(width='100%' height='100%' src='//www.youtube.com/embed/VIDEOID?rel=0&autoplay=1&loop=1&mute=1&playlist=RvY-YNMp-1w&enablejsapi=1&modestbranding=1' frameborder='0' allowfullscreen)
          a.video-link.js-video-link(href='#lg-video' data-toggle='modal' data-video='lgVideo')
            .video-image-overlay
            img.video-image-lg(src='//img.youtube.com/vi/VIDEOID/maxresdefault.jpg')
            .video-play-icon
        a.video-link(href='#')
          span.video-text-container
            p.video-text Change me and VIDEOID

      .modal.fade.media-modal.js-video-modal#lg-video(aria-hidden='true' role='dialog' tabindex='-1')
        .modal-dialog(role='document')
          .modal-content
            .modal-header
              a.video-link(href='#')
                .modal-title Change me and VIDEOID
              button.close(type='button' data-dismiss='modal' aria-label='Close')
            .modal-body
              .modal-video
                iframe#lgVideo(width='100%' height='100%' src='//www.youtube.com/embed/VIDEOID?rel=0&enablejsapi=1&modestbranding=1' frameborder='0' allowfullscreen)

Note that .js-video-link and .js-video-modal classes is needed for autoplay and autopause

Regular Thumbnail (Learn More)

Your Beauty Questions Answered ft. Sephora PRO Jeffrey | Sephora

What’s New In Lips | Sephora

Pug

.media-container
  a.video-link(href='#md-video-one' data-toggle='modal' data-video='mdVideoOne')
    .video-image-overlay
    img.video-image(src='//img.youtube.com/vi/VIDEOID/maxresdefault.jpg')
    .video-play-icon
  a.video-link.js-video-link(href='#md-video-one' data-toggle='modal' data-video='mdVideoOne')
    p.video-text Change me and VIDEOID

.modal.fade.media-modal.js-video-modal#md-video-one(aria-hidden='true' role='dialog' tabindex='-1')
  .modal-dialog role='document'
    .modal-content
      .modal-header
        .modal-title Change me and VIDEOID
        button.close(type='button' data-dismiss='modal' aria-label='Close')
      .modal-body
        .modal-video
          iframe#mdVideoOne(width="560" height="315" src='//www.youtube.com/embed/VIDEOID?rel=0&enablejsapi=1&modestbranding=1' frameborder='0' allowfullscreen)

Note that .js-video-link and .js-video-modal classes is needed for autoplay and autopause

Small Thumbnail (Product Show)

Pug

.media-container-sm
  a.video-link.js-video-link(href='#sm-video-one' data-toggle='modal' data-video='smVideoOne')
    .video-image-overlay
    img.video-image-sm(src='//img.youtube.com/vi/VIDEOID/maxresdefault.jpg')
    .video-play-icon

.modal.fade.media-modal.js-video-modal#sm-video-one(aria-hidden='true' role='dialog' tabindex='-1')
  .modal-dialog(role='document')
    .modal-content
      .modal-header
        .modal-title Change me and VIDEOID
        button.close(type='button' data-dismiss='modal' aria-label='Close')
      .modal-body
        .modal-video
          iframe#smVideoOne(width='100%' height='100%' src='//www.youtube.com/embed/VIDEOID?rel=0&enablejsapi=1&modestbranding=1' frameborder='0' allowfullscreen)

Note that .js-video-link and .js-video-modal classes is needed for autoplay and autopause