Bluemercury.com Styleguide

Foundation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum.

500 results




    Jump to Section

    Color Palette

    • white-overlay

    Type Treatments

    • h1

      Vestyibulum Ipsum Tellus

      h1.h1-nocap

      Vestyibulum Ipsum Tellus

      h1.h1-light

      Vestyibulum Ipsum Tellus

    • h2

      Vestyibulum Ipsum Tellus

      h2.light

      Vestyibulum Ipsum Tellus

      h2.h2-nocap

      Vestyibulum Ipsum Tellus

      h2.h2-nocap.light

      Vestyibulum Ipsum Tellus

    • h3

      Vestyibulum Ipsum Tellus

    • h4

      Vestyibulum Ipsum Tellus

    • h5

      Vestyibulum Ipsum Tellus

      h5.h5-light

      Vestyibulum Ipsum Tellus
    • h6

      Vestyibulum Ipsum Tellus
    • p display

      Cras justo odio, dapibus ac facilisis in, egestas eget quam.

    • p large

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    • p

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    • p small

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    • p credit

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum.

    • p fine

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

    Lists + Menus

    Standard Unordered List

    Standard Ordered List

    1. List Item 1
    2. List Item 2
    3. List Item 3
    4. List Item 4

    Breadcrumb List

    Tag List

    Tag List .clamped

    Standard Menu

    Forms and Inputs

    Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    Select Label
    Slider
    Image Picker
    Form Heading 2

    Links + Buttons

    • a.link-inline

      Link Inline

    • a.link-cta

      Link CTA
    • a.tag

      Link Tag
    • a.icon-left

      Link w/ Icon
    • a.cta-block

      Link CTA
    • a.cta-block-lg

      Link CTA
    • button

    • .button-sm

    • .button-lg

    • .button-white

    • .button-grey

    • .button-light

    • .button-pos

    • .button-neg

    • .button-pos-hov

    • .button-neg-hov

    • button.cta-block

    • button.cta-block-lg

    • button.tag

    • button.tag-x

    • button.button-w-info

    • button.icon-left.button-w-info

    • button.button-w-info active

    • button.icon-left.button-w-info active

    • button.button-sub

    • button.icon-left.button-sub

    • .button-icon-round

    • .button-icon-square

    • button.icon-left

    Icons

    • BlueRewards

      • tier-silver

        tier-silver

      • tier-sapphire

        tier-sapphire

      • tier-platinum

        tier-platinum

      • tier-silver-color

        tier-silver-color

      • tier-sapphire-color

        tier-sapphire-color

      • tier-platinum-color

        tier-platinum-color

      Rewards
      • beauty-card

        beauty-card

      • birthday-gift

        birthday-gift

      • birthday-treatment

        birthday-treatment

      • surprises

        surprises

      • free-shipping

        free-shipping

      • free-two-day-shipping

        free-two-day-shipping

      • exclusive-event-invitations

        exclusive-event-invitations

      • annual-gift

        annual-gift

    • Conscious Beauty

      • cb-seal

        cb-seal

      • cb-vegan-cruelty-free

        cb-vegan-cruelty-free

      • cb-mindful-ingredients

        cb-mindful-ingredients

      • cb-naturally-derived

        cb-naturally-derived

      • cb-wellness

        cb-wellness

    • Stores

      • store

        store

      • store

        store-color

      • target

        target

      • pin

        pin

      Store Services
      • calender

        calender

      • store-services-spa

        store-services-spa

      • store-services-free-sampling

        store-services-free-sampling

      • store-services-makeup-application

        store-services-makeup-application

      • store-services-free-shipping

        store-services-free-shipping

      • store-services-order-online

        store-services-order-online

      • store-services-order-online-2

        store-services-order-online-2

      • store-services-curbside-pick-up

        store-services-curbside-pick-up

      • store-services-curbside-pick-up-2

        store-services-curbside-pick-up-2

      • store-services-in-store-pick-up

        store-services-in-store-pick-up

      • store-services-brand-events

        store-services-brand-events

      • store-services-masterclass

        store-services-masterclass

      • store-services-expert-advice

        store-services-expert-advice

      • store-services-gift-wrapping

        store-services-gift-wrapping

      Safety
      • store-safety-temperature

        store-safety-temperature

      • store-safety-cleaning

        store-safety-cleaning

      • store-safety-face-coverings

        store-safety-face-coverings

      • store-safety-cashless

        store-safety-cashless

      • store-safety-gloves

        store-safety-gloves

      • store-safety-store-capacity

        store-safety-store-capacity

    • Simple

      • minus

        minus

      • plus

        plus

      • x

        x

      • check

        check

      • ellipsis

        ellipsis

      • up

        arrow-up

      • right

        arrow-right

      • down

        arrow-down

      • left

        arrow-left

      Large
      • large-arrow-up

        large-arrow-up

      • large-arrow-right

        large-arrow-right

      • large-arrow-down

        large-arrow-down

      • large-arrow-left

        large-arrow-left

      Small
      • pointer

        pointer

      • asterisk

        asterisk

      • small-info

        small-info

      • small-alert

        small-alert

      • dollar

        dollar

      • circle

        circle

      • circle-fill

        circle-fill

      • small-check

        small-check

      • small-minus

        small-minus

      • small-plus

        small-plus

      • small-x

        small-x

      • small-check-bold

        small-check-bold

      • small-minus-bold

        small-minus-bold

      • small-plus-bold

        small-plus-bold

      • small-x-bold

        small-x-bold

      • star

        star

      • star-half

        star-half

      • star-full

        star-full

      • small-arrow-up

        small-arrow-up

      • small-arrow-right

        small-arrow-right

      • small-arrow-down

        small-arrow-down

      • small-arrow-left

        small-arrow-left

    • Alerts

      • alert

        alert

      • alert-circle

        alert-circle

      • alert-diamond

        alert-diamond

    • Function

      • menu

        menu

      • my account

        my-account

      • search

        search

      • filter

        filter

      • view

        view

      • sort

        sort

      • download-1

        download-1

      • download-2

        download-2

      • share-1

        share-1

      • share-2

        share-2

      • print

        print

      • edit

        edit

      • lock

        lock

      • unlock

        unlock

      • visible

        visible

      • hidden

        hidden

      • info

        info

    • Communication

      • chat

        chat

      • email

        email

      • phone

        phone

      • website

        website

    • Shopping

      • bag empty

        bag-empty

      • bag add

        bag-add

      • bag full

        bag-full

      • wishlist

        wishlist

      • wishlist add

        wishlist-add

      • wishlist-fill

        wishlist-fill

      • card credit

        card-credit

      • card gift

        card-gift

      • card multiple

        card-multiple

      • notify

        notify

      • review

        review

      • reorder

        reorder

    • Product

      • coming-soon

        coming-soon

      • gift

        gift

      • travel-size

        travel-size

      • new-arrival

        new-arrival

      • best-seller

        best-seller

      • limited-edition

        limited-edition

      • beauty-expert-approved

        beauty-expert-approved

      • exclusive

        exclusive

      • cbd

        cbd

      • sold-out

        sold-out

      • discontinued

        discontinued

      • dangerous

        dangerous

      Ingredients
      • gluten-free

        gluten-free

      • spf

        spf

      • vegan

        vegan

    • Shipping

      • shipping ground

        shipping-ground

      • shipping air

        shipping-air

      • return

        return

      • return 30 day

        return-30-day

      • return-60-day

        return-60-day

      • return-90-day

        return-90-day

      • package

        package

      • packages

        packages

      • gift-wrap

        gift-wrap

    • Flags

      • United States of America

        america

      • Canada

        canada

      • Mexico

        mexico

      • Colombia

        colombia

      • Brazil

        brazil

      • Ecuador

        ecuador

      • Spain

        spain

    • Social

      Small Filled
      • social email

        social-email

      • social facebook

        social-facebook

      • social instagram

        social-instagram

      • social pinterest

        social-pinterest

      • social twitter

        social-twitter

      • social youtube

        social-youtube

    Loyalty


    Silver
    Sapphire
    Platinum


    $100 to your next Beauty Card


    Spend $75 to reach Sapphire


    Spend $50 to reach Platinum


    Spend $25 to maintain Platinum next year