Style Guide

1. Page Title

Tops

2. Breadcrumbs

3. Color Swatches

4. Buttons

  • Link styled as a button

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

  1. Coffee
  2. Tea
  3. Milk
  • Coffee
  • Tea
  • Milk
  1. Coffee
  2. Tea
  3. 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

The Scream by Edward Munch. Painted in 1893.


6.Form

Form Public - 1 Column

Credit Card
Jot us a note and we’ll get back to you as quickly as possible.
Tooltip
Content Tooltip
For better search results, first choose a gift registry type. By default, we search all registry types.
Default Shipping Address

Form - 2 Column (only Apply For My Account Form)

Other Form Groups

Sender

Other Form

Type 1

Sender
Invitee
Maximum 5 email addresses.

Type 2

Text Label

Type 3


Type 4


Type 5

Sidebar Form

7.Actions Toolbar

Other Actions Toolbar

Actions Toolbar - Miss secondary,primary box

Actions Toolbar - Public

Back to Shopping Cart

8.Socials

Socials Links

Socials AddThis

9.Table

CMS Table - Basic Table

No Scroll - Responsive Table

Table caption
Column headingColumn headingColumn headingColumn headingColumn headingColumn headingColumn heading
Table cell contentTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content
Table cell contentTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content
Table cell contentTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content

have Scroll - Table scroll in responsive

Table caption
Column headingColumn headingColumn headingColumn headingColumn headingColumn headingColumn heading
Row headingTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content
Row headingTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content
Row headingTable cell contentTable cell contentwww.google.comTable cell contentTable cell contentTable cell content

Public Table (Account Table)

Recent Orders
Order #DateShip ToOrder TotalStatusAction
0000000064/19/16Tester Tester$226.28ClosedView Reorder
0000000064/19/16Tester Tester$226.28ClosedView Reorder
0000000064/19/16Tester Tester$226.28ClosedView Reorder

Items 1 to 12 of 24 total

Show per page
Page

Table Public Product item - My Account,Gift registry

Items Refunded
Product NameSKUPriceQtySubtotalDiscount AmountRow Total
Product name
Color
Purple
Size
M
Downloads
Episode 1
Episode 2
WJ11-XS-Black$69.001$69.00-$13.80$55.20
Product name
Color
Purple
Size
M
Downloads
Episode 1
Episode 2
WJ11-XS-Black$69.001$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
Gift Registry Items
Product NameRequestedFulfilledRemainingUnit PriceQty
Product name
Color
Purple
Size
M
Downloads
Episode 1
Episode 2

Message ...

1 1 2-$71.80 Fulfilled
Product name
Color
Purple
Size
M
Downloads
Episode 1
Episode 2

Message ...

1 1 2-$71.80 Fulfilled

Other Table - PDP,Payment...

Type 1

More Information
SizeXL
SizeXL

Type 2

Payment Name
LabelPayment Value
LabelPayment Value

Type 3

Type 4

Total
Subtotal$543.00
Discount-$71.80
Shipping (undefined - undefined)$0.00
Order Total$471.20
Order Summary
Cart Subtotal$543.00
Discount 12312323-$71.80
Shipping United Parcel Service - 2nd Day Air$26.94
Order Total$498.14

Type 5

Select MethodPriceMethod TitleCarrier Title
$0.00GroundUnited Parcel Service
$0.00GroundUnited Parcel Service
Message Error

Cart Page

Shopping Cart Items
ItemPriceQtySubtotal
Juno Jacket
Color
Purple
Size
M
$77.00
$77.00
Gift options
Pick a paper of your choice (optional)
Gift Name $555
Move to Wishlist Edit Remove
Juno Jacket
Color
Purple
Size
M
Downloads
Episode 1
Episode 2
$77.00
$77.00
Gift options
Pick a paper of your choice (optional)
Gift Name $555
Move to Wishlist Edit Remove

10.Message

You added Diva Gym Tee to your shopping cart.
Error Message - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Warning Message - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Notice Message - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Info Message - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
You have no items to compare.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Eos V-Neck Hoodie has been added to your Wish List. Click here to continue shopping.

11.Layout

One column page layout

Header
Main column
Footer

Three columns page layout

Header
Main column
Footer

Two columns page layout with sidebar on the left

Header
Main column
Footer

Two columns page layout with sidebar on the right

Header
Main column
Footer

12.Product Format

Ratings Product

Ratings - Base

Rating:
75%

Ratings - Grid Product

Rating:
75%
Rating:
75%

Ratings - PDP - Product Main Info

Rating:
75% of 100
Rating:
75% of 100

Ratings - PDP - Review Forms

Your Rating
  1. One of my favorites b/c no chafing!
    Rating
    80%
    One of my favorites b/c no chafing!

    Review by

    Posted on

  2. bra stays comfy and dry
    Rating
    80%
    I play field hockey and it gets crazy hot outside - bra stays comfy and pretty dry. Recommended!

    Review by

    Posted on

  3. Not exactly true to size
    Rating
    60%
    Not exactly true to size but still very comfortable.

    Review by

    Posted on

  4. Snug fit without being too tight
    Rating
    80%
    Snug fit without being too tight and no irritation or chafing.

    Review by

    Posted on

Ratings - Product Reviews

Be the first to review this product

My Account - Product Reviews

My Recent Reviews View All
Product Reviews
CreatedProduct NameRatingReview 
7/15/16Chaz Kangeroo Hoodie
Rating:
80%
Ideal for cold-weather training or work outdoor...See Details
7/15/16Chaz Kangeroo Hoodie
Rating:
80%
Ideal for cold-weather training or work outdoor...See Details
Rating
80%

Swatches Product

Swatches - Grid Product

XS
S
M
L
XL

Swatches - Filters Options

Swatches - PDP

Color
Size
XS
S
M
L
XL

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

  1. Logan HeatTec&reg; Tee
    Logan HeatTec&reg; Tee
    See Details
    Options Details
    Color
    Blue
    Size
    XL
    $24.00
  1. Logan HeatTec&reg; Tee
    Sprite Yoga Companion Kit
    Qty 2
    $122.00
    See Details
    Options Details
    Color
    Blue
    Size
    XL

Table

Chaz Kangeroo Hoodie
Color
Black
Size
XS
Sprite Yoga Companion Kit
Sprite Yoga Companion Kit
Sprite Stasis Ball
1 x Sprite Stasis Ball 55 cm $23.00
Sprite Foam Yoga Brick
1 x Sprite Foam Yoga Brick $5.00
Sprite Yoga Strap
1 x Sprite Yoga Strap 6 foot $14.00
Sprite Foam Roller
1 x Sprite Foam Roller $19.00

Product Attribute

Base

SKU
WB01

Grid Product

SKU
WB01

PDP

SKU
WB01

Product Options

Base

Color
Purple
Size
M
Downloads
Episode 1
Episode 2
View Details
Options Details
Color
Green
Size
28

Gift Registry

Gift 1
Color
Green
Size
28
Gift 1
Color
Green
Size
28

Mini Cart

See Details
Options Details
Color
Green
Size
2829
Size
1 x Sprite Foam Yoga Brick $5.00
Downloads
Episode 1
Episode 2

Checkout - Summary Items

View Details
Options Details
Color
Green
Size
2829
Size
1 x Sprite Foam Yoga Brick $5.00
Downloads
Episode 1
Episode 2

Advanced Checkout

Sku
SKu0099

Sales

Color
Purple
Size
M
Downloads
Episode 1
Episode 2
Gift 1
Color
Green
Size
28

Cart Page

Color
Purple
Size
M
Downloads
Episode 1
Episode 2

Checkout Order Review

Color
Purple
Size
M
Downloads
Episode 1
Episode 2

Product Actions

Product Actions

Catalog,Reports,Catalog-Widget,Wishlist

In stock
Out of stock
In stock
Out of stock
In stock
Out of stock
In stock
Out of stock
In stock
Out of stock
  • Wish List
  • New Collections
  • New Collections Text
  • Create New Wish List
Compare
In stock
Out of stock
  • Wish List
  • New Collections
  • New Collections Text
  • Create New Wish List
Compare

Compare

In stock
Out of stock

Wishlist

Add to Cart
In stock
Out of stock
In stock
Out of stock

Product Reports,Catalog

In stock
Out of stock

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
  1. $52.00
  2. From $25.00
  3. Special Price $10.00 was $92.00
  4. From $61.00

    To $77.00

  5. $24.00
  6. $56.99 To see product price, add this item to your cart. You can always remove it later.
$99.99

Minimum: $25.00

$24.00

Starting at $14.00

Special Price $10.00 was $92.00

From $61.00

To $77.00

In stock
SKU
240-LV09
Downloads
$0.00
Gift wrapping' + ': Text... $99.99 $99.99 $99.99
Text... $99.99 $99.99 $99.99

From $61.00

To $77.00

In stock

SKU
24-WG080

Product Grid - CDP

View as Grid List
per page
Set Descending Direction

50 items

Page
  1. XS
    XL
    Product name
    Special Price $10.00 was $92.00
    Rating:
    60%
  2. Product name

    From $61.00

    To $77.00

    Rating:
    60%
  3. XS
    XL
    Product name

    From $61.00

    To $77.00

    Rating:
    60%
    Out of stock
  4. Product name
    $24.00
    Rating:
    60%
    • Wish List
    • New Collections
    • New Collections Text
    • Create New Wish List
    Compare
  5. Product name
    $24.00
    Rating:
    60%
Back to top
View as Grid List
per page
Set Descending Direction

50 items

Page

13.Sidebar Block format(Apply Block Left right column)

14.Banner Static

15.Block Form

Email Notification Settings

16.Collapse Block

Apply Discount Code
Gift Cards
Estimate Shipping and Tax
Estimate Shipping and Tax

Enter your destination to get a shipping estimate.

United Parcel Service
Free Shipping

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

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.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4

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.

.col-md-4
.col-md-4
.col-md-4

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.

.col-md-3
.col-md-6
.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8
.col-md-4

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.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixed: mobile, tablet, and desktop

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

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

Hide
You need at least 2 products to compare Compare Clear All
Compare Products