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.

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.

product image
best-seller

Whole-grain cereal

$ 25.00 CAD

select flavour

select size

Author : Joanne Kim

Sample code < button class = "button" > honey </button> < button class = "button" > mixed berry </button>

Website grid structure

Author : Clare Huang

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

Coco-hazelnut cereal

Qty :1

$25.00

  • Subtotal
  • Tax
  • Shipping

  • Subtotal

  • $25.00
  • $1.25
  • Next step
  • $26.25

Author : Sophia Wang

Sample code <form> < label for = "email "> Email </label> < input type = "text" id = "email" name = "email"> </form>