Style Guide

Interactive Elements

In-text link

CSS selector:

a

Sample code:

<p><a href="https://mdn.dev">In-text link</a></p>

Rendered element:

In-text link

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Text Input Field with Label

CSS selectors:

form, .form-element, label, input

Sample code:

            
                <form>
                  <div class="form-element"> 
                    <label for="first-name">First Name</label> 
                    <input id="first-name" type="text" placeholder="First Name">First Name</input>
                  </div> 
                </form>
            
          

Rendered element:

Image as a Link

CSS selector:

.image-link

Sample code:

            
              <a 
                  class="image-link" 
                  href="https://www.sketchappsources.com/free-source/846-ui-style-guide-sketch-freebie-resource.html"
                >
                <img 
                    src="img/style-guide.png"
                    alt="A style guide for a UI Design"
                    width="800"
                    height="600"
                />
              </a>
            
          

Rendered element:

A style guide for a UI Design

Text Elements

Headings

CSS selector:

.heading-guide

Sample code:

<h2 class="heading-guide">Heading1</h2>

Rendered element:

Heading1

Heading2

Heading3

Heading4

Paragraphs

CSS selector:

none

Sample code:

<p>This is the place where you can look for the working space in your area for your desired work.</p>

Rendered element:

This is the place where you can look for the working space in your area for your desired work.

Numbered Lists

CSS selectors:

.numbered-list

Sample code:

            
              <ul class="numbered-list"> 
                  <li>Garage space</li> 
                  <li>Backyard space</li>
                  <li>Store room space</li>
              </ul>
            
          

Rendered element:

  • Garage space
  • Backyard space
  • Store room space

Combined Elements

Main Navigation

CSS selector:

.main-navigation

Sample code:

            
              <nav class="main-navigation">
                <a href="">Home</a>
                <a href="">Listings</a>
                <a href="">About us</a>
                <a href="">Advanced Search</a>
              </nav>
            
          

Product/Service Listing

Garage space

Empty garage space available for rent
  • Size: 150sqft
  • Location: 1000 Pacific Ave, Pacific Ocean, P4O 2P0
  • Price: $ 50 per day (Negotiable)
  • Contact: Available on request

Colors

CSS selectors:

.p1-colors, .medium-aquamarine

Sample code:

            
              <div class="p1-colors">
                <div class="medium-aquamarine">#56E39F</div>
              </div>
            
          

Rendered element:

#56E39F
#E87461
#DD9787
#332E3C
#74A4BC

Fonts

  • Roboto Serif Bold
  • Roboto Serif Bold Itatlic
  • Montserrat Light

Citations