Modular Pattern Elements
Main navigation module
This is a sample of the grainjar main navigation. We used a small dark green navigation bar with a white logo.
Checkout breadcrumb
Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.
Sample code <a href = "#"> Information </a>
Author : Clare Huang
Anatomy
- Page link: Directs users to the parent-level page.
- Arrow: shows the order of content.
Product detail page module
This is a sample of the product detail page on the grainjar website. Spacing and interactive elements such as flavour and size selection are important to consider.
best-seller
Whole-grain cereal
$ 25.00 CAD
select flavour
select size
Sample code
<button class = "button"> honey </button>
<button class = "button"> mixed berry </button>
Author : Joanne Kim
Checkout module
This is a sample of the checkout module at grainjar. Forms must be concise and labels must be legible to clearly communicate usage to users.
Guest checkout
Coco-hazelnut cereal
Qty: 1
$25.00
- Subtotal
- Tax
- Shipping
-
Subtotal
- $25.00
- $1.25
- Next step
- $26.25
Sample code
<form>
<label for = "email"> Email </label>
<input type = "text" id = "email" name = "email">
</form>
Author : Sophia Wang
Recipe detail module
How to make the perfect parfait
This recipe is made with one of our customer favorites Cinnamon Walnut Grain Free Granola. So healthy and delicious! Snack attack waiting to happen. This crispy granola stays crunchy in your milk and is filled with wonderful sweet nutty flavors.
Details
- Prep Time: 5 minutes
- Serving Size: 4 servings
Ingredients list
- grainjar Cinnamon Walnut Grain Free Granola
- Greek yogurt
- Honey for drizzle on top
- Blueberries to top it off
Instructions
- In small jars layer the granola and yogurt.
- Then top off with blueberries and honey drizzle.
Sample code
<h3> How to make the perfect parfait </h3>
<img src = "img/granola-parfait.png" alt="recipe detail" width="750">
<h4> Details </h4>
<li> Prep Time: 5 minutes </li>
<li> Serving Size: 4 servings </li>
All Recipes Module
All Recipes
Triple Berry Crisp
- Total Time: 65 minutes +
- Serving Size: 9 servings
The easiest Triple Berry Crisp made with frozen raspberries, blueberries and blackberries for a juicy berry filling nestled under a crispy oat topping.
Read more >
Easy Overnight Oats
- Total Time: 5 minutes +
- Serving Size: 1 serving
This easy overnight oats recipe is a healthy simple breakfast that you can make ahead for busy mornings and customize with many add-ins and toppings!
Read more >
Chocolate Pumpkin Granola
- Total Time: 50 minutes +
- Serving Size: 2 servings
This recipe for pumpkin granola is loaded with nutty pecans and studded with chocolate chips for the perfect hint of chocolatey goodness. Vegan + gluten-free.
Read more > Sample code
<h3> All Recipes </h3>
<img src = "img/berry-crisp.png" alt="triple berry crisp" width="211">
<h4> Triple Berry Crisp </h4>
<li> Total Time: 65 minutes + </li>
<li> Serving Size: 9 servings </li>
<p> The easiest Triple Berry Crisp made with frozen raspberries. </p>
Carousel module
Recommended for you
Coco-hazeulnut cereal
$ 25.00 CAD
Citrus swirl granola
$ 25.00 CAD
Puffed-grain cereal
$ 25.00 CAD
Whole-grain flakes
$ 25.00 CAD
Shopping Cart Module
Coco-hazelnut cereal
- 1 +
$25.00
Subtotal
$25.00
Sample code
<table>
<tr>
<th>Product</th>
</tr>
<tr>
<td>Coco-hazelnut cereal</td>
</tr>
</table>
Footer
Sample code
< footer >
< div class = "column-1">
<h4> Information </h4>
<p> About </p>
<p> grainjar </p>
<p> Packaging </p>
<p> Free </p>
<p> Our recipes </p>
</div>
</footer>Author : Sophia Wang
Website grid structure
Our grid system is composed of 8 flexible columns with variable gutter sizes: 22 px for the navigation, 44 px between filter options and 66 px between product grid items. The left and right margin are both 125 px from the edge.
Home page grid layout
Logo
Main
Content
Content
Content
Content
Content
Content
Content
Content
Recipes
Author : Joanne Kim