On-Court
Tennis Store

Style Guide

Interactive Elements

In-text link

In Text Link

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Button one

Text Input Field with Label




Image as a Link

Pure drive lite unstrung
Pure drive lite unstrung
Pure drive super lite unstrung
Pure drive super lite unstrung
Pure drive team unstrung
Pure drive team unstrung

Text Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

This is an example of how the paragraph will look like in the website

Numbered Lists

  1. Tennis racquet 1
  2. Tennis racquet 2
  3. Tennis racquet 3

Combined Elements

Main Navigation

Home Product About Us Contact Citations

Product

Pure drive lite unstrung

Pure Drive Lite Unstrung

This paragraph is a description of the product.

$120

Learn more
Pure drive super lite unstrung

Pure Drive Lite Unstrung

This paragraph is a description of the product.

$99

Learn more
Pure drive team unstrung

Pure Drive Lite Unstrung

This paragraph is a description of the product.

$250

Learn more

Color Palette Selection

Colors

Font Selection

Graphik font Open sans font

Citations