Web Style Guide

Table of Contents

Typography

Headings

H1
Main Page Header: 20px #111111
H2
Secondary Header: 16px #111111
H3
Tertiary Header: 14px #111111
H4
Quaternary Header: 13px #111111
H5
Quinary Header: 12px #111111
H6
Senary Header: 11px #111111

Content Elements

Body text. Default style is 11px #111111. Paragraph does not have vertical padding by default.

"Intro" text. Default style is 11px #111111. Paragraph has 12px bottom padding by default.

"Note" text. Default style is 11px #555555. Paragraph does not have vertical padding by default.

Basic Link: #026dcf

Alternative Link Style: #026DCF underlined Used for availability links on sku page.

Icon Style Link: 10px #026DCF

Price

Sku List Sku Detail Cart
$123.45 $123.45 $123.45
14px #CC0000 Bold 16px #CC0000 Bold 14px #CC0000 Normal
Back to Top

Buttons

b1 b1 - cart b1 - cart: big_a b1a b1a: checkout b1a: secure checkout b2 b3: pre-order

Buttons v1.2

These buttons do not require extra markup. They are truly modular and with the addition of class names to ANY element, will behave properly. When in doubt, add a class to the element instead of a new CSS rule!

| | Link Three Submit Submit A Span
Back to Top

Structural Modules

modStyle0

Header 16px #111111 - Outside of box

Box has no width applied. Content is padded at 12px. Border: 1px solid #C8C8C8

modStyle0 + modStyle4

Header 16px #111111 - Outside of box

Box has no width applied. Content is padded at 12px. Border: 1px solid #C8C8C8. Background color:#F6F6F6. (Example: Billing info in checkout.)

modStyle1

Header 16px #111111 - Background: #F8F0CC with transparent gradient applied

Box fills parent width. Content is padded at 12px.

Background: #F8F5E6 (Order by Item)

modStyle2

Header 16px #FFFFFF - Background: #CC0000 with transparent gradient applied

Box fills parent width. Content is padded at 12px.

modStyle3

Header 16px #FFFFFF

Box fills parent width. Content is padded at 12px. (Original proposed BGT style. Not currently used in site.)

modStyle4

Header 16px #111111 - Background: Transparent gradient applied; Border: #C8C8C8

Box fills parent width. Content is padded at 12px.

modStyle5

Header 16px #CC0000 - Background: Transparent gradient applied

Box fills parent width. Content is padded at 12px.

modStyle5 - "Depot"

Header 16px #CC0000

Box fills parent width. Content is padded at 12px. Class "modStyle5i" is added to content box div.

Header 16px #CC0000

Box fills parent width. Content is padded at 12px. Class "modStyle5i" is added to content box div.

Header 16px #CC0000

Box fills parent width. Content is padded at 12px. Class "modStyle5i" is added to content box div.

Header 16px #CC0000

Box fills parent width. Content is padded at 12px. Class "modStyle5i" is added to content box div.

Header 16px #CC0000

Box fills parent width. Content is padded at 12px. Class "modStyle5i" is added to content box div.

modStyle6

Header 16px #FFFFFF - Background: #FF8000 with transparent gradient applied

Box fills parent width. Content is padded at 12px.

modStyle7

Used on "Thank You" page. Content is padded at 12px.

modStyle8

Header 16px #FFFFFF - Background: #427730 with transparent gradient applied

Box fills parent width. Content is padded at 12px. Not currently used in site.

modStyle9

Header 14px #111111 - Background: #F3F3F3

No interior box specified.

modStyle10

Box has no width applied. Background:#F8F5E6; Content is padded at 4px 6px 2px 12px. Used for PayPal banners at top of page in checkout flow.

modStyle11

Header 16px #CC0000

  • Box fills parent width.
  • Content is not padded.
  • Used on PageBuilder for left nav and chat box.

modStyle12

Header 16px #CC0000 - Background: #F5F5F5 transparent gradient applied; Border: 1px solid #C8C8C8

Box fills parent width. Content is padded at 12px. Used in BSD Bulletin board side column.
Back to Top

Other Structures

Accordion

Accordion Closed

Accordion Open

Header Style: Font: 12px #CC0000; Background: #F5F5f5 with transparent overlay

Chat

Need Help?

Chat NowTalk with a Representative
Chat Now

Chat - Alt

Need Help?
Chat NowTalk with a Representative
Chat Now

Modal

Data Table

Background: #E7E7E7 Head
Bottom border: 1px solid #D8D8D8 Odd
Background: #EEEEEE Even (Alt)
Back to Top

Errors, Warnings & Validation


Page level

Thanks for your order

Thanks for your order

In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Your cart contains 8 items totalling $416.50
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Thanks for your order

In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Your cart contains 8 items totalling $416.50
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Thanks for your order

In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Your cart contains 8 items totalling $416.50
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Thanks for your order

In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Thanks for your order

Your cart contains 8 items totalling $416.50
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49
In stock Dell� Inspiron 15 - Series 3000 Laptop Computer With 15.6"
Screen & Intel� Celeron� Dual-Core Processor, i3531-1200BK Item # 703765 		$17.49

Section level


Lorem ipsum dolor sit amet

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.

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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

Lorem ipsum dolor sit amet

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.

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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

Lorem ipsum dolor sit amet

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.

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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident

Lorem ipsum dolor sit amet

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.

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 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident


Line level


Password strength is good

Remember your username

Please set a stronger password

Your password needs to be at least 8 characters long

Legacy (instances of the style below needs to be migrated to the styles above)

Errors

Attention (#ff0000):

  • Font: 12px bold #111111.
  • Takes a list.

Order by Item error: Font: 16px #FF0000 bold; Border: solid 1px #FF0000

The SKU number is not valid. Please check the number and try again.

Form error text and border color: #CC0000; Field background color: #F2BFBF;

  1. 'Field Label:' is a required field.

Warnings

Font: #4890C7; Background: #E4F1FB; Border: 1px solid #B4D8F4; Radius: 5px;
Example: Product has already been added to cart or purchase quantity exceeded.

Validation

The following error was found with your cart.

[Header: Font:16px #000; Border: 2px solid #F9A216; Background: #FFFFEE; Radius: 8px]

Back to Top

Icons & Symbols

CSS Icons

Pop-up help Store Locator Catalog Customer Service Home List View Grid View JS Open JS Close
Radio On Radio Off Compare: Active Compare: Default Coupon Help Delivery

CSS Arrows

GlobalDev Icons

Subscription Subscription Subscription Subscription No Alerts Subscription Wth Alerts Subscription Canceled
Back to Top