Main Navigation Button
CSS selector:
.menu-button
Sample code:
<a href="#" class="menu-button">Menu Button</a>
Rendered element: purple bar is not a part of the element
Shop Button
CSS selector:
.shop-button
Sample code:
<a href="#" class="shop-button">Shop Button</a>
Rendered element:
ShopAlternative Shop Button
CSS selector:
.shop-button-alt, .shop-button
Sample code:
<a href="#" class="shop-button shop-button-alt">Shop Button</a>
Rendered element: purple bar is not a part of the element
Edit/remove button
CSS selector:
.edit-button
Sample code:
<a class="edit-button" href="#">Edit</a>
Rendered element:
EditAlternative Submit Button
CSS Selector
.button-submit-alt
Sample code
<a href="#" class="button-submit-alt">Submit Button</a>
Rendered element
Alternative Submit ButtonCheckout Buttons
CSS Selector
.button-checkout
Sample code
<a href="#" class="button-checkout">Submit Button</a>
Rendered element
checkoutCheckout process navigation button
CSS selector:
.checkout-nav-button, .active
Sample code:
<a class="checkout-nav-button" href="#">Shipping</a>
<a class="checkout-nav-button active" href="#">Payment</a>
Rendered element:
Shipping / Payment /In-text link
CSS selector:
.in-text-link
Sample code:
<a class="in-text-link" href="#">In-text link</a>
Rendered element:
Hello, I'm an in-text link that links to nothing!Text Input Fields (hidden label)
CSS Selector
.form-input-field-basic
Sample code
<input type="text" id="name" class="form-input-field-basic" placeholder="Name">
CSS Selector
.form-label-field-basic
Sample code
<label for="name" class="form-label-field-basic">Name</label>
Rendered element
Text Input Field with labels
CSS Selector
.form-input-field-full
Sample code
<input type="text" id="address" class="form-input-field-full" placeholder="Address*">
CSS Selector
.form-label-field-full
Sample code
<label for="address" class="form-label-field-full">Address</label>
Rendered element
Text Input Field Extended
CSS Selector
.form-input-field-extended, .textarea
Sample code
<textarea id="message" class="form-input-field-extended placeholder="Message"></textarea>
CSS Selector
.form-label-field-basic
Sample code
<label for="message" class="form-label-field-basic">Message</label>
Rendered element
CSS Selector
.form-input-field-shortened-2, .form-input-field-shortened
Sample code
<input type="number" id="CVV-code" class="form-input-field-shortened-2" placeholder="">
<input type="month" id="expiry-date" class="form-input-field-shortened" placeholder="">
Rendered element
Checkbox label
CSS Selector
none
Sample code
<input type="checkbox" name="address-checked" checked>Text>
Rendered element
Choose this optionHeadings
CSS selectors:
h1, h2, h3
Sample code:
<h2>Header Name/Title</h2>
Rendered element:
Heading 1
Heading 2
Heading 3
Checkout header
CSS selectors:
.checkout-title
Sample code:
<h3 class="checkout-title">Order summary</h3>
Rendered element:
Order Summary
Headings
CSS selectors:
p
Sample code:
<p>Text here</p>
Rendered element:
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae felis malesuada semper. Nulla imperdiet sem ante, ut pretium enim sodales vel. In dui ipsum, tempus vel mauris et, consequat sodales dolor. Donec sit amet venenatis lorem, ac luctus mauris. Quisque feugiat elementum est, sit amet pharetra ex faucibus at. Cras nec congue turpis, vitae volutpat elit. Vestibulum semper, risus ac blandit pulvinar, orci mi pretium orci, id fermentum lorem metus placerat risus. In rutrum felis ante, quis porta ex pretium nec. Integer condimentum quam in neque consectetur blandit.
Bulleted Lists
CSS selector:
ul
Sample code:
<ul><li>List Item</li></ul>
Rendered element:
Easiest Plants to Grow:
- Cucumbers
- Cosmos
- Lettuce
- Sunflower
- Radishes
- Squash
Numbered Lists
CSS selector:
ol
Sample code:
<ol><li>List Item</li></ol>
Rendered element:
Top Five Organic Fertilizers
- Blood Meal
- Bone Meal
- Compost
- Earthworm Castings
- Bat Guano
Modified Numbered Lists
CSS selector:
.li-extended
Sample code:
<ol><li class="li-extended">List Item</li></ol>
Rendered element:
Top Three Organic Fertilizers
- Statement 1
- Statement 2
- Statement 3
Table heading (3 categories)
CSS selector:
table, tr, th
Sample code:
<table><tr><th>Category 1</th><th>Category 2</th><th>Category 3</th></tr></table>
Rendered element:
| Category 1 | Category 2 | Category 3 |
|---|
Basic table with 5 top categories
CSS selector:
.cart-header, .cart-image, .cart-price
Sample code:
<table><tr><th>Category 1</th><th>Category 2</th><th>Category 3</th><th>Category 4</th><th>Category 5</th></tr><tr><td><img class="cart-image" scr="" alt=""></td><td>Category 2</td><td>Category 3</td><td>Category 4</td><td class="cart-price">Category 5</td></tr></table>
Rendered element:
| Image | Item | Quantity | Item Price | Total Price |
|---|---|---|---|---|
|
Product name | 1 | C$0.00 | C$0.00 |
Vertical table for contact info
CSS selector:
.contact-table, .title, .data
Sample code:
<table class="contact-table"><tr><td class="title">Title</td><td class="data">Title</td></tr></table>
Rendered element:
Checkout table
CSS selector:
.checkout-title, .checkout-header, .checkout-line, .checkout-price, .right-alignment, .button-checkout
Sample code:
<h3 class="checkout-title">Order summary</h3><table class="checkout-header"><tr><td class="checkout-line">Title</td><td class="checkout-line right-alignment">Price</td></tr><tr><td class="checkout-line checkout-price">Title</td><td class="checkout-line checkout-price right-alignment">Price</td></tr></table><a href="#" class="button-checkout">Submit Button</a>
Rendered element:
News Article Titles
CSS selector:
.news-title, news-subtitle
Sample code:
<h3 class="news-title">Title</h3><p>Text</p><p class="news-subtitle">Subtitle</p>
Rendered element:
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel luctus lacus. Pellentesque id molestie nibh.
comlimentary information
United Navigation
CSS selector:
.united-nav, .main-nav, .secondary-nav, .menu-button, .full-bleed-bar-top
Sample code:
<nav class="united-nav full-bleed-bar-top"><div class="main-nav"><a href="#" class="menu-button">Menu 1</a></div><div class="secondary-nav"><a href="#" class="menu-button">SubMenu1</a></div></nav>
Rendered element:
Central page decoration
CSS selector:
.intro, .logo-central,
Sample code:
<div class="intro">
<img class="logo-central" src="img/icons/logo-central.png" alt="leaf me that has berries on a branch of a tree">
<h2 class="section-title">unique plants for unique experiences
</h2>
</div>
Rendered element:
unique plants for unique experiences
Sections separator
CSS selector:
.intro, .logo
Sample code:
<div class="intro">
<img class="logo" src="img/icons/logo-big.png" alt="leaf me that has berries on a branch of a tree">
<h2 class="section-title">section name
</h2>
</div>
Rendered element:
News and Events
Sections separator (reverse colors)
CSS selector:
.intro, .full-bleed-bar, .logo, .section-title, .category-white-text
Sample code:
<div class="intro full-bleed-bar">
<img class="logo" src="img/icons/logo-big-reverse.png" alt="leaf me that has berries on a branch of a tree">
<h2 class="section-title category-white-text">section name
</h2>
</div>
Rendered element:
contact us
Main category
CSS selector:
.grid-row, .cropped-container, .grid-col-1of2, category-image
Sample code:
<div class="grid-row cropped-container">
<div class="grid-col-1of2">
<img class="category-image" src="img/600x600.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div></div>
<div class="grid-col-1of2">
<img class="category-image" src="img/600x600.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div></div>
</div>
Rendered element:
News article
CSS selector:
.grid-row, .cropped-container, .grid-col-1of3, .news-image, .news-date-container, .news-date, .news-month, .news-title, news-subtitle
Sample code:
<div class="grid-row cropped-container">
<div class="grid-col-1of3">
<a href="#">
<img class="news-image" src="img/400x267.png" alt="Image description">
<div class="news-date-container">
<h3 class="news-date">XX</h3>
<h4 class="news-month">month</h4>
</div>
</a>
<h3 class="news-title">Title</h3>
<p>Text</p>
<p class="news-subtitle">Subtitle</p>
</div>
<div class="grid-col-1of3">
<a href="#">
<img class="news-image" src="img/400x267.png" alt="Image description">
<div class="news-date-container">
<h3 class="news-date">XX</h3>
<h4 class="news-month">month</h4>
</div>
</a>
<h3 class="news-title">Title</h3>
<p>Text</p>
<p class="news-subtitle">Subtitle</p>
</div>
<div class="grid-col-1of3">
<a href="#">
<img class="news-image" src="img/400x267.png" alt="Image description">
<div class="news-date-container">
<h3 class="news-date">XX</h3>
<h4 class="news-month">month</h4>
</div>
</a>
<h3 class="news-title">Title</h3>
<p>Text</p>
<p class="news-subtitle">Subtitle</p>
</div></div>
Rendered element:
XX
month
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae felis malesuada semper.
XX
month
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae felis malesuada semper.
XX
month
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at purus vitae felis malesuada semper.
Form
CSS selector:
.form-contact, .form-label-field-full, .form-input-field-full
Sample code
<form class="form-contact">
<label for="input_type_1" class="form-label-field-full">Label</label>
<input type="text" id="input_type_1" class="form-input-field-full" placeholder="Paceholder text">
<label for="input_type_2" class="form-label-field-full">Label</label>
<input type="text" id="input_type_2" class="form-input-field-extended" placeholder="Placeholder text">
<input type="checkbox" name="address-checked" checked>Text>
</form>
Rendered element
Form (reversed colors)
CSS selector:
.form-feedback, .full-bleed-bar, .form-label-field-full, .form-input-field-full
Sample code
<form class="form-feedback full-bleed-bar">
<label for="input_type_1" class="form-label-field-full">Label*</label>
<input type="text" id="input_type_1" class="form-input-field-full" placeholder="Paceholder text">
<label for="input_type_2" class="form-label-field-full">Label*</label>
<input type="text" id="input_type_2" class="form-input-field-extended" placeholder="Placeholder text">
<p class="form-subtitle">*Required fileds</p>
<input type="submit" class="button-submit-alt form-contact-button" value="Submit">
</form>
Rendered element
2-column grid
CSS selector
.cropped-container, .grid-col-1of2, .grid-row
Sample code
<div class=""grid-row cropped-container><div class="grid-col-1of2"><h2>Name here</h2><p>Description here</p></div><div class="grid-col-1of2"><h2>Name here</h2><p>Description here</p></div></div>
Rendered element
Our mission
LeafMe company provides new and aspiring gardeners with plants and flowers tailored to suit garden's geographical location, seasonal preferences, terrain and soil type, and even its purpose. Our customers are new homeowners who want to create a specific garden experience that best suits the purpose of their garden and its peculiarities.
Our mission
LeafMe company provides new and aspiring gardeners with plants and flowers tailored to suit garden's geographical location, seasonal preferences, terrain and soil type, and even its purpose. Our customers are new homeowners who want to create a specific garden experience that best suits the purpose of their garden and its peculiarities.
2 column grid with 2 images
CSS selector
.grid-row, .cropped-container-main, .grid-col-1of2
Sample code
<div class=""grid-row cropped-container-main><div class="grid-col-1of2">
<img class="category-image" src="img/600x600.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div>
</div><div class="grid-col-1of2">
<img class="category-image" src="img/600x600.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div>
</div>
</div>
Rendered element
3 column grid with images
CSS Selector
.grid-row, .cropped-container, .grid-col-1of3
Sample code
<div class=""grid-row cropped-container><div class="grid-col-1of3">
<img class="category-image" src="img/400x276.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div>
</div><div class="grid-col-1of3">
<img class="category-image" src="img/400x267.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div>
</div><div class="grid-col-1of3">
<img class="category-image" src="img/400x267.png" alt="Image description">
<div class="category-title-box">
<h3 class="category-title category-white-text"></h3>
<h4 class="category-subtitle category-white-text"></h4>
<a href="itemlisting.html" class="shop-button shop-button-alt"></a>
</div>
</div>
</div>
Rendered element:
Checkout process grid
CSS Selector
.grid-row, .cropped-container, .checkout-nav, .checkout-nav-button, .active
Sample code
<div class="grid-row cropped-container">
<div class="grid-col-cart">
<nav class = "checkout-nav">
</nav>
<table class="cart-header">
</table>
<div class="grid-col-checkout">
<h3 class="checkout-title">Order summary</h3>
<table class="checkout-header">
</table>
<a class="button-checkout" href="#">Checkout</a>
</div>
<div>
Rendered element:
| Image | Item | Quantity | Item Price | Total Price |
|---|---|---|---|---|
|
|
Product name | 1 | C$0.00 | C$0.00 |
Item Listings
CSS Selector
.item-listing-unit, .item-name, .price-number
Sample code
<div class="item-listing-unit centered-element"><a href="full_product_view.html"><img src="img/succulent9.png" alt="placeholder for product image"><p class="item-name centered-element">"Red-Spear" Succulent</p><p class="price-number centered-element">C$8.95</p>
Rendered element
"Red-Spear" Succulent
C$8.95
Full View Listing with Filter
CSS Selector
.filter-nav, .checkout-nav-button, .filter-button, .sub-category, .product-image, .latin-name, .price-number, .review-rating, .review-stars, .in-text-link, .form-input-quantity, .button-submit
Sample code
<div class="grid-row"><div class="grid-col-1of4"><nav class="filter-nav"><a href="itemlisting.html" class="checkout-nav-button active filter-button">All Plants</a><ul><li><a href="itemlisting.html" class="in-text-link sub-category selected-nav">Succulents</a></li><li><a href="#" class="sub-category">Cacti</a></li><li><a href="#" class="sub-category">Air Plants</a></li></ul><a href="#" class="checkout-nav-button filter-button">Pots + Containers</a></li><a href="#" class="checkout-nav-button filter-button">Equipment + Tools</a></li><a href="#" class="checkout-nav-button filter-button">Sale</a></li></nav></div><div class="grid-col-3of4"><section id="product-listing"><figure class="product-image"><img src="img/succulent9.png" alt="small, green succulent plant with red tips in a light blue flower pot"></figure>
<h3>"Red-Spear" Succulent</h3><p class="latin-name"><em class="latin-name">Latin Name</em></p><p class="price-number medium-text"><$0.00></p><div class="review-rating"><div class="review-stars"><★ ★ ★ ★ ★></div><a class="in-text-link margin-left small-text" href="#reviews"><2 reviews></a></div><p><em><Descriptions><form class="form-input-quantity"><label for="quantity">Quantity:</label><input type="number" id="quantity" min="1" max="5" placeholder="1"></form><a class="button-submit button-nav-add-to-cart" href="cart.html">Add to Cart</a></section></div></div>
Rendered element:
"Red-Spear" Succulent
Echeveria amoena
C$8.95
The Echeveria amoena or "Red-Spear" Succulent, is a pale green succulent of the Crassulaceae family. Native to Mexico and Central America, these succulents need a fair amount of sunshine, but require little water. Water these plants from the roots to avoid over-watering. If the tips begin to yellow, water the plant more frequently. The leaves may also spread wide if there is not enough sunlight.
Add to CartSuggested Products
CSS Selector
.suggested-products, .suggested-product-name
Sample code
<p>People who looked at this also looked at:</p><div class="suggested-products"><div><img src="img/thumbnail10.png" alt="thumbnail for related product: green succulent with medium-length stalks in a white and aqua-coloured flower pot"><p class="suggested-product-name"><Item Name></p></div></div>
Rendered element
People who looked at this also looked at:
"Lotus" Succulent
"Rounded Flat-leaf" Succulent
"Lettuce-Leaf" Succulent
"Candycorn" Succulent
"Brussel Sprout" Succulents
Reviews
CSS Selector
#review, .latin-name, .button-submit
Sample code
<h2>Reviews</h2><div class="review"><h3><Review title></h3><p class="latin-name"><em>First Name, Last Name, State/Province, Country</em></p><p>Review</p></div><a class="button-submit" href="#"><Leave a Review></a>
Rendered element
Reviews
Super easy to take care of!
Alexander Mudd, VA, USA
My girlfriend is infamous for killing off all sorts of plants. No matter what she does, they always seem to die. By some miracle, this guy has lasted half a year so far and still appears to be thriving. I'm impressed @LeafMe! Will definitely buy from you guys again.
Soooo cuteeeee
Becca Green, BC, Canada
Omg. Ok. So like this thing is the cutest plant I've ever seen. When I opened up the package I couldn't believe it. Mine showed up almost perfectly round with plump little leaves, and I basically died. It did spread out a little but I mean it's alive so I totally understand that it'd want to stretch out its' little leaves. Love it!