Interactive Elements

In-text link

CSS selector

.in-text-link

Sample code

<a href="#" class="in-text-link">In-text link</a>

Example

In-text link

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Navigation Button</a>

Example

Navigation Button

Submit/Reset Buttons

Css selector:

.button

Sample Code

<button type="submit" value="Submit">Submit</button>%lt; button type="reset" value="Reset" > Reset</button>

Example

Text Input Field with Label

Css selector:

.text-input and input-label

Sample code:

<div class="form-name">
<label for="password-signin1">Password</label><br>
<input type="text" id="password-signin1" name="password"><br><br>
</div>
<label>
<input type="checkbox" name="remember">Remember this device
</label>
<form action="products.html" method="get" class="redirect-products">
<button class="button-submit">Login</button>
</form>

Example






Radio Button with Label

Css selector:

.radio-button

Sample code:

<fieldset> <legend>Select a shipment method:</legend>
<div>
<input type="radio" id="regular(5-7businessdays)" name="drone" value="regular(5-7businessdays)" checked >
<label for="regular(5-7businessdays)">Regular (5-7 business days)</label>
</div>
<div>
<input type="radio" id="express(1-2business days)" name="drone" value="express(1-2businessdays)" >
<label for="express(1-2businessdays)">Express (1-2 business days)</label>
</div>
<div>
<input type="radio" id="pick-up" name="drone" value="pick-up" />
<label for="pick-up">Pickup (free)</label>
</div>
</fieldset>

Example

Select a shipment method:

Image as a Link

Css selector:

.image-link

Sample code:

<a href="grey-sweater.html"><img src="images/item3.png" alt="Blue sweater"></a>

Example

Blue sweater

Text Elements

Headings

Sample code:

<h2>Header 1</h2>
<h3>Header 2</h3>
<h4>Header 3</h4>
<h5>Header 4</h5>
<h6>Header 5</h6>

Examples:

New Arrivals

Our Story

Light Grey Sweater

Paragraphs

Sample code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo leo, elementum at venenatis vitae, auctor eu neque. Sed vulputate hendrerit molestie. Mauris laoreet lorem ac pulvinar consequat. Sed non euismod nisl, sed iaculis tellus. Vestibulum vitae ipsum placerat, finibus ipsum ut, tincidunt tortor.</p>

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo leo, elementum at venenatis vitae, auctor eu neque. Sed vulputate hendrerit molestie. Mauris laoreet lorem ac pulvinar consequat. Sed non euismod nisl, sed iaculis tellus. Vestibulum vitae ipsum placerat, finibus ipsum ut, tincidunt tortor.

Numbered Lists

Sample code:

<ol> <li>90% Cotton</li> <li>5% Alpaca</li> <li>5% Wool</li> </ol>

Example:

  1. 90% Cotton
  2. 5% Alpaca
  3. 5% Wool

Combined Elements

Main Navigation

Sample code:

<header>
<div class="header">
<nav>
<div class="left-nav">
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
<a href="events.html">Events</a>
</div>
<div class="right-nav">
<a href="styleguide.html">Style Guide</a>
<a href="account.html">Account</a>
<a href="cart.html" class="cart-icon"></a>
</nav>
</div>
</header>

Example:

Main Footer

Sample code of one column:

<section class="footer footer-flex">
<div class="footer-section footer-section0" id="footer-section0">
<a href="index.html" class="home-button"><img class="footer-logo" src="images/flufffibre.png" alt="Fluff and Fibre logo"></a></div>
<div class="footer-section footer-section1" id="footer-section1">
<a href="products.html" class="footer-link-header">
<p class="footer-header">Products</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Sweaters</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Pants</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Shoes</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Accesories</p></a>
</div>

Example:

Product Listing

Sample code:

<h4>Backpack</h4> <a><img src="backpack.png" alt="Backpack" style="width:200px;height:200px;"></a> <h4>105$</h4> <a href="#">Description</a>

Example:

Grey sweater

Grey Sweater

$105

100% Wool

Payment Form

Sample code:

<div class="checkout">
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-50">
<h3>Shipping</h3>
<div class="payment">
<form action="payment" method="post" autocomplete="on">
<div class="form-module-flex">
<div class="payment-module">
<div class="form-name">
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="Jane"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-name">
<label for="first-name">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe"><br><br>
</div>
</div>
</div>

<div class="payment-module">
<div class="form-full-address">
<label for="address-line-1">Address</label>
<input type="text" id="address-line-1" name="address-line-1" placeholder="123 Bacon Avenue" required>
<input type="text" id="address-line-2" name="address-line-2" placeholder="#100"><br><br>
</div>
<div class="form-module-flex">
<div class="form-city">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Eggs" required><br><br>
</div>
<div class="form-region">
<label for="region">Province</label>
<select id="region" name="region" required>
<option value="">Choose option</option>
<option value="alta">Alberta</option>
<option value="bc">British Columbia</option>
<option value="man">Manitoba</option>
<option value="nb">New Brunswick</option>
<option value="nl">Newfoundland and Labrador</option>
<option value="ns">Nova Scotia</option>
<option value="nl">Nunavut</option>
<option value="ont">Ontario</option>
<option value="pei">Prince Edward Island</option>
<option value="nque">Quebec</option>
<option value="sask">Saskatchewan</option>
<option value="nwt">The Northwest Territories</option>
<option value="yt">The Yukon</option>
</select><br><br>
</div>
<div class="form-postal-code">
<label for="postal-code">Postal code</label>
<input type="text" id="postal-code" name="postal-code" placeholder="1A2 3B4" required maxlength="7" autocapitalize="characters"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-phone-number">
<label for="phone-number">Phone number</label>
<input type="tel" id="phone-number" name="phone-number" placeholder="123-123-1234" required maxlength="12"><br><br>
</div>
</div>

<div class="payment-module">
<div class="form-email">
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="email@domain.com" required><br><br>
</div>
</div>

</div>
</form>
</div>
</div>

<div class="col-50">
<h3>Payment</h3>
<div class="payment">
<form action="payment" method="post" autocomplete="on">
<div class="form-module-flex">
<div class="payment-module">
<div class="form-name">
<label for="first-name">Name On Card:</label>
<input type="text" id="first-name" name="first-name" placeholder="Jane Doe"><br><br>
</div>
</div>

<div class="payment-module">
<div class="form-card">
<label for="card number">Credit Card Number:</label>
<input type="text" id="card number" name="card number" placeholder="111-222-333-444"><br><br>
</div>
</div>

</div>

<div class="payment-module">
<div class="expiry">
<label for="exp-month">Expiry Month:</label>
<input type="text" id="exp-month" name

Example:

Shipping























Payment














Select a shipment method:

Checkout Cart

Sample code:

<div class="col-25">
<div class="container">
<h4>Shopping Cart
<span class="price" style="color:black">
<i class="fa fa-shopping-cart"></i>
<b> </b>
<h4> </h4>
</span>
</h4>
<p><a href="#">Backpack</a> <span class="price">$109</span></p>
<p><a href="#">Wool Sweater</a> <span class="price">$51</span></p>
<p><a href="#">T-Shirt</a> <span class="price">$20</span></p>
<p><a href="#">Sticker</a> <span class="price">$2</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>$182</b></span></p>
</div>
</div>

Example:

Grey Sweater

Remove



$109

Navy Sweater

Remove



$120

Striped Green and Black Sweater

Remove



$150

Total Price

$379

Brand Components

Fonts


45 Univers Lt Light

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz


Montreal Nueue

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz


Colours

Primary: Teal // #B6CDB8

Secondary: Olive // #B6CDB8

Tertiary: Tan // #E39371

Off-White: Off-White // #FFF2EC


Art Direction

Afends branding material Sustainable Jungle branding image. Also the index hero image. Sustainably Chic branding image. Also the image on the index page's 'Our Story' section.

Citations