Save up to 15%

Buy more Save More

Customer Service Available at 781-335-2200

Content

This is the page content. This is a paragraph.

Headers

This is an H1 tag.

This is an H2 tag.

This is an H3 tag.

This is an H4 tag.

This is an H5 tag.
This is an H6 tag.

Flat colors

Textured colors

Input

Radio buttons

   
   

Checkboxes

   

Dropdown

Buttons

Table

Order # Date Ship To Total Status
100000068 05/04/14 Marc Acosta $1024.45 Pending
100000068 05/04/14 Marc Acosta $1024.45 Pending
100000068 05/04/14 Marc Acosta $1024.45 Pending

Responsive table

Order # Date Ship To Total Status
100000068 05/04/14 Marc Acosta some longer text. Even more text. $1024.45 Pending Reorder
100000068 05/04/14 Marc Acosta $1024.45 Pending Reorder
100000068 05/04/14 Marc Acosta $1024.45 Pending Reorder

Responsive table

Order # Date Ship To Total Status
100000068 05/04/14 Marc Acosta some longer text. Even more text. $1024.45 Pending Reorder
100000068 05/04/14 Marc Acosta $1024.45 Pending Reorder
100000068 4 cols span Empty Label

Ribbons

Hello, world!
This is a much, much, much longer ribbon!

Popups

Text popup

$.popup('Text goes here' [, options])

Demo

Dom popup

$.popup('.devStyleGuide-sprites' [, options]) or $('.devStyleGuide-sprites').popup([options])

Demo

Ajax popup

$.popup('http://www.candy.com/' [, options])

Demo
Options:
className - custom class for popup
onOpen - popup open callback
onClose - popup close callback

Confirm alert box

$.confirm([options], [accept callback] [, cancel callback])

Options:
title - title of the popup (default: "Are you sure?")
body - body of the popup
accept - text of accept button (default: "Yes")
cancel - text of cancel button (default: "Cancel")

Demo

Thumbnails

  • All thumbnails (tile images) have proportionate container*:
    • Product: 1:1 (this applies to product details page, product image slides' thumbnail)
    • Category: 350:220
    • Homepage What's New: 260:280
    • Homepage Trending: 260:280
    • Homepage Trending - wide tile: 540:280
    • Homepage Best Sellers: 1:1
    • Homepage Featured Category: (same as Category)
  • The image must be scaled to fit the container height and have the width cropped/centered inside the container.
*: All proportionate containers are reponsive and width based. Height = (Height/Width ratio) * Width
For example: A 350:220 ratio container should has 201px height on 320px width. 201 = (220/350) * 320

Grids

  • Product Grids
    • 4 columss by default
    • 3 columns in ipad portrait and iphone landscape
    • 2 columns in iphone portrait

PNG Sprites

(toggle background)

ribbon_right_purple
stamp_new
ribbon_right_blue
ribbon_right_orange
ribbon_left_layerstate
ribbon_left_green
ribbon_left_blue
stamp_sale
slider_arrow_left
ribbon_left_wide_blue
ribbon_right_pink
floated_back_to_top
ribbon_left_orange
ribbon_left_pink
ribbon_left_purple
slider_arrow_right
ribbon_right_green

SVG Sprites

(toggle background)

candybank_pig
checkmark_circle_grey
carat_left
shop_mobile_grey
share_grey
mycreations_inactive
close
money_coin_large
rewards_mobile_grey
heart_pink
addressbook_inactive
star_large_pink
carat_right
allnatural
search
facebook_details
kosher
social_coin_large
pig_no_review
sun
mcafee
speech_bubble_large
grid_pink
myclipboard_inactive
inspire_mobile_white
giftcard_white
create_mobile_white
email_details
checkmark_circle_orange
checkmark_circle_blue
hamburger_grey
question_mark
trashcan_hover
myinspirations_inactive
star_pink
print
arrow_mobile
review_coin_large
list_grey
pig_empty
phone
left_accent_line
usa
plus_pink
dashboard_active
twitter_details
hamburger_grey_new2
myclipboard_white
hamburger_pink_new2
search_hover
cart_utility
login_mobile_grey
glutenfree
instagram_footer
home_cupcake_coin
share_white
americanexpress
arrow_white
review_coin_small
envelope
dashboard_pig
carat_down
clear
gift_coin_small
star_large_grey
guarantee
verisign
chat_active
checkmark_circle_pink
grid_grey
cart_mobile_new_2
clear_all
mycreations_active
gift_message_pink
nutfree
speech_bubble_pink
phone_unavailable
quickview_camera
candy_logo_tablet
flourish_left
speech_bubble_grey
login_mobile_white
arrow
pig_utility_hover
pinterest_footer
support_mobile_white
candy_logo_ipad
support_mobile_grey
facebook_footer
star_grey
sun_large
myinspirations_active
home_money_coin
carat_up
candy_coin_small
twitter_footer
pencil_white
myinspirations_white
checkmark_large_white
emailpref_active
usda_organic
savedcreditcard_white
cart_mobile
quickview_cart
candybank_inactive
dashboard_white
trashcan
candybank_white
right_accent_line
cart_stamp
shop_mobile_white
flourish_right
login_utility
home_large_pig
quickview_eye
facebook_login
checkmark_pink
candy_c_mobile
carat_up_green
myclipboard_active
pencil
visa
savedcreditcard_inactive
myreviews_white
celebrate_mobile_grey
Truck_Pink
cart_pink
account_white
google_footer
emailpref_inactive
mastercard
cupacke_coin_small
celebrate_mobile_white
pig_coin_small
candy_calculator
myreviews_inactive
clear_all_white
pencil_blue
chat_unavailable
share_pink
support_utility
minus_pink
mobile_arrow_up
pig_coin_large
arrow_circle_right
mycreations_white
truck_grey
cheatsheet
track
my_invitation_white
pencil_hover
cart_large
giftcard_inactive