Style Guide
A collection of pre-design elements, graphics and stylings that presents all of the design decisions for the Matcha Munchies website.
Interactive Elements
In-text link
CSS Selector:
.in-text-link
Sample Code:
<p>Check out the newest selection of<a class="in-text-link" href="#">donuts
Rendered Element:
Gift cards can be ordered online for pickup!
Navigation link
CSS Selector:
.button
Sample Code:
<a href="#" class="button-link"><button class="button">View Menu</button><a>
Rendered Element:
Submit & Reset Buttons
CSS Selector:
input
Sample Code:
<input type = "submit" value = "Submit" />
<input type = "reset" value = "Reset" />
Rendered Element:
Text Input Field with Label
CSS selector:
label, input
Sample code:
<label for = "Input"> Input: </label>
<input type = "text" id = "Input" input = "Input">
Rendered element:
Radio Buttons with Label
CSS selector:
input[type="radio"]
Sample code:
Sample code:
< div class="radio-group" >
< ul >
< li >
<input type = "radio" value="small" name="option" id="small">
<label for = "small"> Small </label>
< /li >
< li />
<input type = "radio" value="medium" name="option" id="medium">
<label for = "medium"> Medium </label>
< /li >
< li />
<input type = "radio" value="large" name="option" id="large">
<label for = "large"> Large </label>
< /li >
< /ul >
< /div >
Rendered element:
Image as a Link
CSS selector:
.image-nav, image-nav:hover
Sample code:
< div class="product" >
<a href="product1.html">< img src="image/mochidonut-x1.png" alt="Mochi Donut" ></a>
< /div >
Rendered element:
