Funko! Pop- Style Guide

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:

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:

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:

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:

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:

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:

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:

Name

Pop! Disney: Joy

Qty

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>

Funko Pop! Pattern Library

Button: Add to Cart/ Purchase

CSS selector:

Sample code:

Rendered element:

Button: Pop Category & Submit

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS Selector:

Sample code:

Rendered element:

Drop Down Menu

CSS Selector:

Sample code:

Rendered element:

Search

CSS Selector:

Sample code:

Rendered element:

Breadcrumbs

CSS Selector:

Sample code:

Rendered element:

H2: Section Titles

CSS Selector:

Sample code:

Rendered element:

Offers

H6: Recommendations & Question

CSS Selector:

Sample code:

Rendered element:

Got a Question? Ask Us!

Paragraphs

CSS Selector:

Sample code:

Rendered element:

Location Details

CSS Selector:

Sample code:

Rendered element:

Banner with H1 and H4

CSS Selector:

Sample code:

Rendered element:

About Us

Who Are We?

Offers Image Transitions & H3

CSS Selector:

Sample code:

Rendered element:

New

Inside Out

Header

CSS Selector:

Sample code:

Rendered element:

Item Listing

CSS Selector:

Sample code:

Rendered element:

Footer

CSS Selector:

Sample code:

Rendered element:

Staff

CSS Selector:

Sample code:

Rendered element:

Events Transitions

CSS Selector:

Sample code:

Rendered element:

Review Item

CSS Selector:

Sample code:

Rendered element:

Pop Up Box