Style Guide
1. Page Title
Tops
2. Breadcrumbs
3. Color Swatches
4. Buttons
5.Typography
Headings typography
Header Level 1 - Code <h1>Header Level 1</h1>
Header Level 2 - Code <h1>Header Level 2</h1>
Header Level 3 - Code <h1>Header Level 3</h1>
Header Level 4 - Code <h1>Header Level 4</h1>
Header Level 5 - Code <h1>Header Level 5</h1>
Header Level 6 - Code <h1>Header Level 6</h1>
Typography links
Base typography
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Paragraph Text. 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. 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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Small Text. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Typography lists
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
-
Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Tea
- Milk
- Coffee
- Black hot drink
- Milk
- White cold drink
Typography other tag
The WHO was founded in 1948.
A piece of computer code
Keyboard input
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
A piece of computer code
<b>/<strong> - Bold text
<i>/<em> - Italic text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins>/<u> - Underline text
<sub> - Subscript text
<sup> - Superscript text
<code> - Code text
Typography blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.
Ut a est eget ligula molestie gravida. Curabitur massa Author quotes
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
6.Form
Form Public - 1 Column
Form - 2 Column (only Apply For My Account Form)
Other Form Groups
Other Form
Type 1
Type 2
Type 3
Type 4
Type 5
Sidebar Form
7.Actions Toolbar
Other Actions Toolbar
Actions Toolbar - Miss secondary,primary box
Actions Toolbar - Public
8.Socials
Socials Links
Socials AddThis
9.Table
CMS Table - Basic Table
No Scroll - Responsive Table
| Column heading | Column heading | Column heading | Column heading | Column heading | Column heading | Column heading |
|---|---|---|---|---|---|---|
| Table cell content | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
| Table cell content | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
| Table cell content | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
have Scroll - Table scroll in responsive
| Column heading | Column heading | Column heading | Column heading | Column heading | Column heading | Column heading |
|---|---|---|---|---|---|---|
| Row heading | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
| Row heading | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
| Row heading | Table cell content | Table cell content | www.google.com | Table cell content | Table cell content | Table cell content |
Public Table (Account Table)
Table Public Product item - My Account,Gift registry
| Product Name | SKU | Price | Qty | Subtotal | Discount Amount | Row Total |
|---|---|---|---|---|---|---|
| Product name | WJ11-XS-Black | $69.00 | 1 | $69.00 | -$13.80 | $55.20 |
| Product name | WJ11-XS-Black | $69.00 | 1 | $69.00 | -$13.80 | $55.20 |
| Subtotal | $221.00 | |||||
| Shipping & Handling | $102.45 | |||||
| Discount | -$44.20 | |||||
| Gift Card | -$20.99 | |||||
| Store Credit | -$31.98 | |||||
| Estimated Total | $226.28 | |||||
| Refunded to Store Credit | $0.00 | |||||
| Product Name | Requested | Fulfilled | Remaining | Unit Price | Qty |
|---|---|---|---|---|---|
|
1 | 1 | 2 | -$71.80 | Fulfilled |
|
|
1 | 1 | 2 | -$71.80 | Fulfilled |
Other Table - PDP,Payment...
Type 1
| Size | XL |
|---|---|
| Size | XL |
Type 2
| Label | Payment Value |
|---|---|
| Label | Payment Value |
Type 3
| Type | Code | Length | Text |
|---|---|---|---|
| Total Weight | Text | Width | Text |
| Height | Text |
Type 4
| Subtotal | $543.00 |
|---|---|
| Discount | -$71.80 |
| Shipping (undefined - undefined) | $0.00 |
| Order Total | $471.20 |
| Cart Subtotal | $543.00 |
|---|---|
| Discount 12312323 | -$71.80 |
| Shipping United Parcel Service - 2nd Day Air | $26.94 |
| Order Total | $498.14 |
Type 5
| Select Method | Price | Method Title | Carrier Title |
|---|---|---|---|
| $0.00 | Ground | United Parcel Service | |
| $0.00 | Ground | United Parcel Service | |
Cart Page
| Item | Price | Qty | Subtotal | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
$77.00 |
|
$77.00 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
$77.00 |
|
$77.00 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
10.Message
11.Layout
One column page layout
Three columns page layout
Two columns page layout with sidebar on the left
Two columns page layout with sidebar on the right
12.Product Format
Ratings Product
Ratings - Base
Ratings - Grid Product
Ratings - PDP - Product Main Info
Ratings - PDP - Review Forms
-
One of my favorites b/c no chafing!One of my favorites b/c no chafing!
Posted on
-
bra stays comfy and dryI play field hockey and it gets crazy hot outside - bra stays comfy and pretty dry. Recommended!
Posted on
-
Not exactly true to sizeNot exactly true to size but still very comfortable.
Posted on
-
Snug fit without being too tightSnug fit without being too tight and no irritation or chafing.
Posted on
Ratings - Product Reviews
My Account - Product Reviews
| Created | Product Name | Rating | Review | |
|---|---|---|---|---|
| 7/15/16 | Chaz Kangeroo Hoodie | Ideal for cold-weather training or work outdoor... | See Details | |
| 7/15/16 | Chaz Kangeroo Hoodie | Ideal for cold-weather training or work outdoor... | See Details |
Swatches Product
Swatches - Grid Product
Swatches - Filters Options
Swatches - PDP
Product Label
Grid Products
- Sale
- Top Sellers
- New
-
New
PDP
- Sale
- Top Sellers
- New
-
New
Product Image
Product Name
Sidebar Block
Mini Cart - Order Review
-
Sprite Yoga Companion KitQty 2$122.00
Table
| Chaz Kangeroo Hoodie |
|
Product Attribute
Base
Grid Product
PDP
Product Options
Base
Gift Registry
Mini Cart
Checkout - Summary Items
Advanced Checkout
Sales
Cart Page
|
|
Checkout Order Review
|
|
Product Actions
Product Actions
Catalog,Reports,Catalog-Widget,Wishlist
Compare
Wishlist
Product Reports,Catalog
Prices
| $208.40 |
| $14.00 |
| $14.00 $14.00 $14.00 $14.00 $14.00 $14.00 |
| $14.00 $14.00 $14.00 $14.00 $14.00 $14.00 |
| $14.00 $14.00 |
|
Sprite Yoga Strap 6 foot
$99.99
|
-
$52.00
-
From $25.00
-
Special Price $10.00 was $92.00
-
From $61.00
To $77.00
-
$24.00
-
$56.99
Starting at $14.00
From $61.00
To $77.00
From $61.00
To $77.00
In stock
Product Grid - CDP
13.Sidebar Block format(Apply Block Left right column)
14.Banner Static
15.Block Form
fdsfdsfds
fdsfdsfds
fdsfdsfds
fdsfdsfds
| Order # | Date | Ship To | Order Total | Status | Action |
|---|---|---|---|---|---|
| 000000011 | 6/12/16 | $18.00 | Pending | View Reorder | |
| 000000010 | 6/12/16 | Tester Tester | $245.88 | Pending | View Reorder |
| 000000009 | 6/12/16 | Tester Tester | $216.40 | Pending | View Reorder |
| 000000007 | 5/14/16 | Tester Tester | $412.00 | Pending | View Reorder |
| 000000006 | 4/19/16 | Tester Tester | $226.28 | Closed | View Reorder |
rewrew erer
rewrew erer
Portland, Oregon, 97201
United States
T: 2434343243243
Sweet
Portland, Oregon, 97201
United States
T: 04242452452
-
Tester Tester
stagewset
Portland, Oregon, 97201
United States
T: 2434343243243
-
Tester Tester
asa
43fvfbdfb
ddsbs, Oregon, 54656
United States
T: 34656363
-
Tester Tester
asa
43fvfbdfb
ddsbs, Oregon, 54656
United States
T: 34656363
-
Tester Tester
asa
43fvfbdfb
ddsbs, Oregon, 54656
United States
T: 34656363
-
Tester Tester
asa
43fvfbdfb
ddsbs, Oregon, 54656
United States
T: 34656363
Sweet
Portland, Oregon, 97201
United States
T: 04242452452
Sweet
Portland, Oregon, 97201
United States
T: 04242452452
- Check / Money order
16.Collapse Block
17.Accordion Block
-
A frequently asked question goes here?
Content
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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
A frequently asked question goes here?
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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
A frequently asked question goes here?
Content
Long Content
18.Dropdown Block
Content
Long Content
Content
Long Content
19.Grid Template
Bootstrap grid examples
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
Five grid tiers
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
Three equal columns
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
Three unequal columns
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
Two columns
Get two columns starting at desktops and scaling to large desktops.
Two columns with two nested columns
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
Mixed: mobile and desktop
The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
Mixed: mobile, tablet, and desktop
Align Items
.align-flex-center
.col-6 .col-sm-4
Centrifuges are used in pharmaceutical, biology, microbiology, manufacturing and research labs to separate and isolate suspensions, gas and immiscible liquids. The rotating action of the centrifuge chamber creates the separation as lighter particles migrate toward the axis of centrifugal rotation while more dense particles migrate away. Centrifuges also separate solids from liquids referred to as sedimentation.
.col-6 .col-sm-4
Centrifuges can be categorized as ventilated or refrigerated centrifuges. Manufacturers such as Thermo Fisher Scientific offer ventilated and refrigerated versions in their Heraeus line of centrifuges. Ventilated centrifuges are used for samples that do not require a specific temperature during centrifugation, while refrigerated centrifuges will have a cooling mechanism to maintain a set temperature required for the samples being processed.
.col-6 .col-sm-4
Centrifuges are used in pharmaceutical, biology, microbiology, manufacturing and research labs to separate and isolate suspensions, gas and immiscible liquids. The rotating action of the centrifuge chamber creates the separation as lighter particles migrate toward the axis of centrifugal rotation while more dense particles migrate away. Centrifuges also separate solids from liquids referred to as sedimentation.
Centrifuges can be categorized as ventilated or refrigerated centrifuges. Manufacturers such as Thermo Fisher Scientific offer ventilated and refrigerated versions in their Heraeus line of centrifuges. Ventilated centrifuges are used for samples that do not require a specific temperature during centrifugation, while refrigerated centrifuges will have a cooling mechanism to maintain a set temperature required for the samples being processed.
.align-flex-end
.col-6 .col-sm-4
Centrifuges are used in pharmaceutical, biology, microbiology, manufacturing and research labs to separate and isolate suspensions, gas and immiscible liquids. The rotating action of the centrifuge chamber creates the separation as lighter particles migrate toward the axis of centrifugal rotation while more dense particles migrate away. Centrifuges also separate solids from liquids referred to as sedimentation.
.col-6 .col-sm-4
Centrifuges can be categorized as ventilated or refrigerated centrifuges. Manufacturers such as Thermo Fisher Scientific offer ventilated and refrigerated versions in their Heraeus line of centrifuges. Ventilated centrifuges are used for samples that do not require a specific temperature during centrifugation, while refrigerated centrifuges will have a cooling mechanism to maintain a set temperature required for the samples being processed.
.col-6 .col-sm-4
Centrifuges are used in pharmaceutical, biology, microbiology, manufacturing and research labs to separate and isolate suspensions, gas and immiscible liquids. The rotating action of the centrifuge chamber creates the separation as lighter particles migrate toward the axis of centrifugal rotation while more dense particles migrate away. Centrifuges also separate solids from liquids referred to as sedimentation.
Centrifuges can be categorized as ventilated or refrigerated centrifuges. Manufacturers such as Thermo Fisher Scientific offer ventilated and refrigerated versions in their Heraeus line of centrifuges. Ventilated centrifuges are used for samples that do not require a specific temperature during centrifugation, while refrigerated centrifuges will have a cooling mechanism to maintain a set temperature required for the samples being processed.
20.Color Class
Color Class
.blue
Centrifuges are used in pharmaceutical
.blue-bold
Centrifuges are used in pharmaceutical
.accent
Centrifuges are used in pharmaceutical
.accent-bold
Centrifuges are used in pharmaceutical
Style Color Inline
<span style="color:#ff0000">Centrifuges are used in pharmaceuticalk</span>
Centrifuges are used in pharmaceutical