Typography

h1. This is a very
large header.

h2. This is a
large header.

h3. This is a
medium header.

h4. This is a
moderate header.

h5. This is a
small header.

h6. This is a
tiny header.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.

h6. Small segment header.

h6 | This is an `h6` with a class of `.h1` to alter it stylistically only

h6 | This is an `h6` with a class of `.h2` to alter it stylistically only

h6 | This is an `h6` with a class of `.h3` to alter it stylistically only

h6 | This is an `h6` with a class of `.h4` to alter it stylistically only

h6 | This is an `h6` with a class of `.h5` to alter it stylistically only

h1 | This is an `h1` with a class of `.h6` to alter it stylistically only

Fonts

franklin-gothic-urw (TypeKit)

Font Awesome:

1234567890 GNUMICR (UTK)

Lead paragraph

A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore iusto ipsam, et iste vero facilis.

Normal paragraph

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words. You can even use <small></small> tags like so: This is smaller text that inherits its line height

This is another paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia maxime eveniet velit. Laboriosam facilis consequuntur praesentium aperiam ratione ducimus, fugiat quibusdam molestias cupiditate, rerum molestiae.

Small paragraph

This is a paragraph with a class of .small-paragraph. It has a smaller font-size and line height, and is a styling class specific to styling small paragraphs. It is separate from the <small> tag, which should inherit its parent's line height. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold!. You can also use em to italicize your words.

Subheader paragraph

A subheader paragraph that has a smaller margin top so it sits closer to heading element above and lighter color so it is not as in-your-face. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptatum rem accusantium tenetur quidem, consequuntur, cum laborum iste magni sed eum pariatur porro reprehenderit. Porro!

Link in paragraph

Links are very standard, and the color is preset to the Foundation primary color.

Unordered list

List item with a much longer description or more content.
List item
List item
- Nested list item
- Nested list item
- Nested list item
List item
List item
List item

Unstyled List

List item
List item
List item

Inline List

One
Two
Three

Red
Blue
Yellow

Carousels

Hero Carousel

Other Carousels

Carousel

1

2

3

4

5

6

Buckets

Grid

Grid Basics

This is a twelve column section in a row. Each of these includes a div.callout element so you can see where the columns are - it's not required at all for the grid.

Six columns

Four columns

Block Grid

This is a block grid that will reflow and reorder rows automatically

Item

Colors

$utk-color-primary
$utk-color-secondary
$utk-color-tertiary
$utk-color-info
$utk-color-success
$utk-color-warning
$utk-color-alert
$utk-color-black
$utk-color-dark-gray
$utk-color-med-gray
$utk-color-light-gray
$utk-color-white

Forms

Form Groups

First name

Bold

Last name

+ Show optional lines for Second, Third, and Fourth name

Second name (optional)
Bold

Third name (optional)

Fourth name (optional)

Input Groups

ZIP Code

Form builder (row grid)

Input Label

.com

Select Box

Choose Your Favorite Pikachu Snorelax

Check these out Catch Them All Check Em' All

Radio Button Group

One

Two

Three

Full Width Radio Button Group

One

Two

Three

Textarea Label

Float Labels

First Name

Last Name

Zip

Phone number

Callouts

Callout

Message Here

Small Button

Callout for configurator image wrapper

This is a preview image only. Adjustments for layout, sizing, and spacing may be made before printing.

Usage

Modals

Standard Modals

Launch Sign in Modal

Sign in to your account.

Password

Remember me.

New user?

Launch Register Modal

Create a new account.

Confirm email

Password

Confirm password

Security question

Security answer

Yes, please send me iPrint exclusive offers and promotions. See our Privacy Policy.

Launch Pricing Modal

Pricing Breakdown

Qty	Price	Total*
100	$1.91	$191.00	(Minimum)
200	$1.71	$342.00
500	$1.61	$805.00
1000	$1.51	$1,510.00
2000	$1.41	$3,020.00
2500	$1.29	$3,225.00
5000	$1.21	$6,050.00	(Best Value)

* Total does not include $50 one-time setup fee or shipping costs.

Tooltips

Membership Auth Block

Costco Membership Details

Add your Costco Membership Number to take advantage of special member pricing.*

Membership Number:

Executive Member

Where do I find my Costco Membership Number?

* Non-Costco members pay a 15% surcharge (applied during checkout).

Your Costco Executive Member savings have been applied to your cart.

Order Overview

Costco Membership Details

Add your Costco Membership Number to take advantage of special member pricing.*

Membership Number:

Executive Member

Where do I find my Costco Membership Number?

* Non-Costco members pay a 15% surcharge (applied during checkout).

Checkout

Membership Number

Your Costco Membership Number can be found here.

Search

Site Search

Hello Bar

.hello-bar style (deprecated)

Buttons

Basic Button Types

CTA Button Link Button Simple Button Success Btn Alert Btn Secondary Btn Hollow Btn Disabled Btn Disbled Alert Btn

Button Sizes

Tiny Button Small Button Default Button Large Btn Expanded Btn

Button Group

Tiny Tiny Tiny

Small Small Small

Default Default Default

Large Large Large

Expanded tiny Expanded tiny Expanded tiny

Expanded small Expanded small Expanded small

Expanded default Expanded default Expanded default

Expanded large Expanded large Expanded large

Primary Action

View Edit Share Delete

Split-Link Button Group

Link 1 Link 2

Contextual Buttons

Configurator Favorites + Personalize group

Desktop (the PDP desktop side panel)

On hover, the heart button should display a tooltip that says “Add to favorites”. When clicked, this should change to a solid heart and display a temporary toolip message that says “Added to favorites” (disappear after 1.5 seconds). If a user hovers over it after adding to favorites, it should read “Remove from favorites”, and the click message will need to read “Removed from favorites” (disappear after 1.5 seconds).

Personalize

Mobile (the configurator fixed PDP bar)

When tapped, the heart button should change to a solid heart and display a temporary toolip message that says “Added to favorites” (disappear after 1.5 seconds). If a user taps this button after adding to favorites, the message will need to read “Removed from favorites” (disappear after 1.5 seconds). There are no hover tooltips for this since it is on mobile.

Personalize

Round Buttons

Slide out button

Delete

Are you sure you want to delete this object?

Progress Button

Button

when clicked becomes ->

Button

Icon Buttons

Standard

Default Button Success Button Secondary Button Alert Button Info Button

Animated

Animated Icon Animated Icon Animated Icon Animated Icon Animated Icon

Position

Icon Before Icon After

Mobile Groups

Back Next

Accordion

Title
```
TEST
```
Configuration
Font Awesome

FontAwesome!