Interactive Elements

In-text link

CSS selector

.in-text

Sample code:

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

Rendered element:

Please check this link to view more details.

Navigation Button

CSS selector:

.button-nav

Sample code:

<a href="#" class="button-nav">CHRON</a>

Rendered element:

CHRON

Submit/Reset Buttons

CSS selector:

.button

Sample code:

<button type="button">Submit</button>

                                        <button type="button">Submit</Reset>

Rendered element:

Text Input Field

CSS selector:

.input_form

Sample code:


                                          <form action="#" class="input_form">

                                          <input type="text" name="Adress" Placeholder="Adress">
                                          </form>

Rendered element:

Text styling

Headings

CSS selector:

h1,h2,h3

Sample code:


                                               <h1>Heading1</h3>

                                               <h2>Heading2</h3>

                                               <h3>Heading2</h3>

Rendered element:

Heading1

Heading2

Heading3

Paragraphs

Css selector:

Sample code:

<p>YOU MAY DELAY BUT TIME WILL NOT.</p>

Rendered element:

YOU MAY DELAY BUT TIME WILL NOT.

Combined Elements

Main Navigation

Css selector:

.nav

Sample code:


                                        <div class="nav">

                                        <div class="button-nav grid-col-1of6">

                                        <h1 class="logo"><a href="index.html">CHRON</a></h1>
                                        </div>

                                        <div class="button-nav grid-col-7of12">

                                        <class="button-nav grid-button">

                                        <a href="product_list.html">Watches</a>

                                        </div> 
                                        <div class="button-nav grid-button">

                                        <a href="events.html">Events</a>

                                        </div>
                                        <div class="button-nav grid-button">

                                        <a href="about_us.html">About</a>

                                        </div>
                                        <div class="button-nav grid-button">

                                        <a href="contact.html">Contact</a>

                                        </div>
                                        <div>

Rendered element:

CHRON

Watches

Events

About

Contact

Product Listing

Css selector:

.product-list-item

Sample code:


                                               <div class="grid-row">

                                                <div class="grid-col-1of4 container product-list-item">

                                                  <div class="product-item">

                                                       <img src="img/placeholder.png" alt="placeholder image">

                                                       <div class="discription">

                                                            <h2>Product Name</h2>

                                                            <h3 class="price">165 CAD/day</h3>

                                                       </div>

                                                  </div>


                                                  <div class="product-item">

                                                       <img src="img/placeholder.png" alt="placeholder image">

                                                       <div class="discription">

                                                            <h2>Product Name</h2>

                                                            <h3 class="price">165 CAD/day</h3>

                                                       </div>

                                                  </div>

                                             </div>

Rendered element:

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

Grids

Css selector:

.grid,.grid-col-1of4

Sample code:

                    
                                                  <div class="grid">

                                                       <div class="grid-col-1of4"><p>1/4</p></div>

                                                       <div class="grid-col-1of4"><p>1/4</p></div>

                                                       <div class="grid-col-1of4"><p>1/4</p></div>

                                                       <div class="grid-col-1of4"><p>1/4</p></div>


                                                       <div class="grid">

                                                       <div class="grid-col-1of3"><p>1/3</p></div>

                                                       <div class="grid-col-1of3"><p>1/3</p></div>

                                                       <div class="grid-col-1of3"><p>1/3</p></div>

                                                       </div>


                                                       </div>

                                                       <div class="grid">

                                                       <div class="grid-col-1of2"<p>1/2</p></div>

                                                       <div class="grid-col-1of2"><p>1/2</p></div>

                                                       </div>


                                                       <div class="grid-12">

                                                       <div class="grid-col-12of12"><p>12/12</p></div>

                                                       </div>

Rendered element:

1/4

1/3

1/2

12/12

website colour swatches

Css selector:

.lightgrey

Sample code:

<a href="#" class="lightgrey">#BDBDBD</a>

Rendered element:

#BDBDBD

Style Guide

Interactive Elements

In-text link

CSS selector

Sample code:

Rendered element:

Navigation Button

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS selector:

Sample code:

Rendered element:

Text Input Field

CSS selector:

Sample code:

Rendered element:

Text styling

Headings

CSS selector:

Sample code:

Rendered element:

Heading1

Heading2

Heading3

Paragraphs

Css selector:

Sample code:

Rendered element:

Combined Elements

Main Navigation

Css selector:

Sample code:

Rendered element:

CHRON

Product Listing

Css selector:

Sample code:

Rendered element:

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

ROSENDAHL

CAD 165

Grids

Css selector:

Sample code:

Rendered element:

website colour swatches

Css selector:

Sample code:

Rendered element:

Citations

Click hereto check our citation page