Funko Pop! Pattern Library

Button: Add to Cart/ Purchase

CSS selector:

.button

Sample code:

<a href="#" class="button-load">Payment/Add to cart</a>

Rendered element:

Add to Cart Button

Button: Pop Category & Submit

CSS selector:

.nav-button

Sample code:

<a href ="#" class="nav-button load">Pop! Category</a>

Rendered element:

Pop! Category

Text Input Field

CSS Selector:

.input-box

.input-label

.input-detail

Sample code:

<div class="input-box"> <p class = "input-label">Name</p> <form id="detail-name" method="post" action="#"> <input class="input-detail" type="text" name="name" placeholder=""> </form> </div>

Rendered element:

Name

Drop Down Menu

CSS Selector:

.drop-down

select

Sample code:

<div class ="drop-down"> <select> <option class "dd-opt" value="sort-by">Sort By</option> <option value="name">Alphabetical>Alphabetical</option> <option>Newly Released></option> <option>Price: Higher></option> <option>Price: Lower></option> </select> </div>

Rendered element:

Search

CSS Selector:

.search-line

.search

#search-bar

#search-button

Sample code:

<div class ="search-line"> <form id="search-bar" method="post" action="#"> <input class="search" type="text" id="form-name" placeholder="Search"></form> <a href="#"><img class = "search-button" src = "img/search.png"></a> </div>

Rendered element:

Search Button

Breadcrumbs

CSS Selector:

.breadcrumbs

.bc-home

.bc-break

.breadcrumbs

Sample code:

<nav class = "breadcrumbs"> <a href ="#" class= "bc-home">Home</a> <p class = "bc-break"> // </form> <a href = "#" class = "bc-home bc-current">Products</a>

Rendered element:

H2: Section Titles

CSS Selector:

h2

Sample code:

<h2>Offers</h2>

Rendered element:

Offers

H6: Recommendations & Question

CSS Selector:

h6

Sample code:

<h6>Got a Question? Ask us!</h6>

Rendered element:

Got a Question? Ask Us!

Paragraphs

CSS Selector:

.banner

Sample code:

<p class="history-text">Text goes here</p>

Rendered element:

Founded in 1998 by Mike Becker, the company was originally conceived by Becker as a small project to bring back various low-tech, nostalgia-themed toys in the high-tech world of today. Funko's first manufactured bobblehead was of the restaurant advertising icon Big Boy. Sold in 2005, Funko LLC is now headed by Brian Mariotti as president. Since 2005, the company has increased the scope of unique toy lines, and has signed licensing deals with WWE, Lucasfilm, Marvel, Hasbro, Elvis Presley, CBS, FOX, Warner Bros, Disney, Microsoft, HBO, etc.

Location Details

CSS Selector:

.store-details

.store-details p

.bold-color

Sample code:

<div class ="store-details"> <p><a class = "bold-color">Phone Number>1 604 123 4466></a> </div>

Rendered element:

Phone Number +1 604 123 4466

Banner with H1 and H4

CSS Selector:

.banner

.banner-header

.banner-title

.banner-question

Sample code:

<section class = "banner"> <img src="img/about-banner.png" alt="A banner image that shows a picture of the Funko mascot in the head office"> <div class = "banner-header"> <h1>About Us</h1> <h4>Who Are We?</h4>

Rendered element:

Offers Image Transitions & H3

CSS Selector:

.new-additions

.feature-box

.feature-box-pics

.label

.new-description-paragraph

Sample code:

<div class = "new-additions feature-box"> <a href ="#"><img src="img/new-addition.png" alt = "A picure of the new Inside Out Funkos"> <h3 class = "label">New</h3> <h3>Inside Out</h3> <p class= "new-description-paragraph">Stylized versions of Pixar’s designs from the film — are capturing our emotions</p> </div>

Rendered element:

A picure of the Big Hero 6 Funkos

New

Inside Out

Stylized versions of Pixar’s designs from the film — are capturing our emotions

Header

CSS Selector:

.logo

.head-nav

.current

Sample code:

<div class = "logo"> <a href ="index.html"><img src = "img/funko.png" height="50" width = "100" alt = "funko logo"></a></div> <nav> <a class ="head-nav" href = "products.html">Products</a> <a class ="head-nav" href = "about.html">About</a> <a class ="head-nav" href = "contact.html">Contact</a> <a class ="head-nav" href = "events.html">Events</a> </nav>

Rendered element:

Item Listing

CSS Selector:

.item-box

.multi-item, .multi-item:hover

.offer-label

.item-name

.item-number

Sample code:

<div class = "item-box"> <a href ="#"><img class="multi-item" src = "img/joy.png" alt="joy funko with box"></a> <p class ="offer-label">New!</p> <p class ="item-name">Pop! Disney: Joy</p> <p class ="item-number">Item: #2501</p> </div>

Rendered element:

joy funko with box

New!

Pop! Disney: Joy

Item: #2501

Footer

CSS Selector:

.footer

.footer-img

.comments

.email-butter, .email-button:hover

.footer-icons

Sample code:

<div class = "footer"> <img class="footer-img" src="img/funko.png" height="50" width="100" alt="funko logo"> <div class = "email"> <form id="comments" method="post" action="#"> <input class="comments" type="text" id="form-name" placeholder="Enter your email"> <ia href ="#" class = "email-button">Submit</a> </form> </div> <div class ="footer-icons"> <img src="img/Footer/facebook.png" height ="30" width="30" alt="Facebook logo"> <img src="img/Footer/twitter.png" height ="30" width="30" alt="Twitter logo"> <img src="img/Footer/instagram.png" height ="30" width="30" alt="Instagram logo> </div>

Rendered element:

Staff

CSS Selector:

.grid-col-three

.sub-heading

.staff-name

.staff-description

.staff-text

.staff-info

Sample code:

<div class="grid-col-three"> <img src="img/staff-1.png" alt="Photo of a team member"> <p class="sub-heading staff-name">Melissa</p> <p class= "staff-name staff-description">Production Corrdinator</p> <p class="staff-text staff-intro">As the production corrdinator, Melissa ensures the scheduling and co-ordinating the communications and daily workings of the whole team. She maintains the purchase order log, makes sure the paperwork is completed and filed, and ensure that nothing is overlooked.</p>

Rendered element:

Photo of a team member

Melissa

Production Corrdinator

As the production corrdinator, Melissa ensures the scheduling and co-ordinating the communications and daily workings of the whole team. She maintains the purchase order log, makes sure the paperwork is completed and filed, and ensure that nothing is overlooked.

Events Transitions

CSS Selector:

.events-all

.events-grid

.events-all-first, .events-grid-mid, .events-grid-last

.events-all-first img, .events-grid-mid img, .events-grid-last img

.events-label

Sample code:

<div class="events-all"> <div class="events-grid events-grid-first"> <a href = "events1.html"><img src="img/events-comiccon.png" height ="170" width ="238" alt = "A picture of San Diego Comic Con's logo"></a> <p class= "events-label">San Diego Comic Con</p> </div> </div>

Rendered element:

A picture of San Diego Comic Con's logo

San Diego Comic Con

Review Item

CSS Selector:

.cart-all

.cart

..item-wrapper

.review-item

.cart-details

.cart-label, .cart-number, .cart-item

Sample code:

<div class= "cart-all"> <div class= "cart"> <div class="item-wrapper"> <img class="review-item" src = "img/joy.png" alt= "review item of joy funko with box"> </div> <div class="cart-details"> <div class="cart-item"> <p class="cart-label">Name</p> <p>Pop! Disney: Joy</p> </div> <div class="cart-item cart-number"> <p class="cart-label">Qty</p> <p>1</p> </div> <div class="cart-item cart-number"> <p class="cart-label">Price</p> <p>11.95</p> </div> </div> </div> </div>

Rendered element:

review item of joy funko with box

Name

Pop! Disney: Joy

Qty

1

Price

11.95

Pop Up Box

CSS Selector:

.events-all

.events-grid

.events-all-first, .events-grid-mid, .events-grid-last

.events-label

Sample code:

<div id="popup_box"> <a id="popupBoxClose">X</a> <div class = "popup-item"> <img src = "img/joy.png" height="100" width="100" alt="Joy funko with box"> <div class ="pop-up-header"> <img class = "checkmark" src = "img/checkmark.png" alt="checkmark vector"> <p class = "popup-added">Item Added!</p> </div> </div> <div class = "popup-nav"> <a class="popup-checkout" href ="purchase-item.html">Checkout</a> </div> </div>

Rendered element: