colors
Typography
Light Text - .lightNormal Text
Strong Text - strong
Italic Text - em
Ultrabold Text - .ultrabold
Heading Styles
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Link Styles
Paragraph Styles
This is a regular paragraph. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
This is an callout paragraph. Add the class .callout to a paragraph. Phasellus rutrum bibendum justo nec cursus. Maecenas posuere eros sit amet lorem volutpat varius. Sed ornare tincidunt ligula eu hendrerit. Morbi bibendum tellus vel nisl hendrerit blandit. Maecenas convallis, diam non tincidunt dignissim, nibh nisl venenatis purus, ac auctor risus diam id nibh.
List Styles
- OL Example
- OL Example
- OL Example
- Nested OL Example
- Nested OL Example
- Nested OL Example
- OL Example
- OL Example
- OL Example
- UL Example
- UL Example
- UL Example
- Nested OL Example
- Nested OL Example
- Nested OL Example
- UL Example
- UL Example
- UL Example
- Definition Term
- Definition Description
- Definition Description
- How to make websites
- CSS
- HTML
- Definition Term
- Definition Description
- Defintion Description
Long List
- List Item in Long List. class: long_list
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
- List Item in Long List
Blockquote Styles
This is the Default Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the left float Blockquote Style Example. Use classleft in a blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the right float Blockquote Style Example. Use classright in a blockquote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
HR Styles
hrule1
hrule2
hrule3
WSM Inquiry Form
Button Styles
Refer to section 2.13 Buttons in the style guide section of style.css. To apply classes to buttons, you have to put the class name in the overall button section which turns it into a button, then also put the class name the primary, secondary, alt1, or alt2 section. Alternatively if available, you can apply the button class names to the element you want to be a button, but I recommend the latter.
WSM Button Styles
Product Detail
.wsm-prod-button
.wsm-prod-button.wsm-addtocart-button
.wsm-prod-button.wsm-addwishlist-button
.wsm-prod-button.wsm-inquiry-button
.wsm-prod-button.wsm-tellafriend-button
Cart
.wsm_interface_cart_btn
.wsm_interface_cart_btn.wsm_interface_cart_catalog_btn
.wsm_interface_cart_btn.wsm_interface_cart_checkout_btn
.wsm_interface_cart_btn.wsm_interface_cart_update_btn
.wsm_cart_btn.wsm_interface_cart_shipping_tool_button
Catalog
.wsm-cat-button
.wsm-cat-button.wsm-moreinfo-button
.wsm-cat-button.wsm-details-button
.wsm-cat-button.wsm-config-button
.wsm-cat-button.wsm-addtocartprice-button
.wsm-cat-button.wsm-addtocart-button
Checkout
.wsm_interface_btn
.wsm_interface_btn.wsm_interface_btn_checkout_submit
.wsm_interface_btn.wsm_interface_btn_checkout_login
Images
Panels
This is a regular panel that you can use to bring attention to certain items. Just add the class panel to the element.
This is an alternate panel that you can use to bring attention to certain items. Just add the class panel callout to the element.