style guide

text elements

h1

CSS Selector:

h1

Sample code:

<h1>header</h1>

Rendered element:

header

h2

CSS Selector:

h2

Sample code:

<h2>header</h2>

Rendered element:

header

h3

CSS Selector:

h3

Sample code:

<h3>header</h3>

Rendered element:

header

h4

CSS Selector:

h4

Sample code:

<h4>header</h4>

Rendered element:

header

p

CSS Selector:

p

Sample code:

<p>body text</p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet aliquam sapien. Mauris cursus lorem eget aliquet suscipit. Nunc tempus ipsum quam, nec cursus turpis vehicula vel. Integer non ligula ac turpis consectetur gravida non id massa. Maecenas libero magna, pulvinar vel ipsum a, rutrum lacinia nulla. Donec a dolor pharetra justo interdum sodales ac at lacus. Phasellus nec sagittis massa, id pellentesque tellus.

interactive elements

main nav element

CSS Selector:

.main-nav-link

Sample code:

<a class="main-nav-link" href="">link</a>

Rendered element:

link

text link

CSS Selector:

.text-link

Sample code:

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

Rendered element:

link

large clickable item with image grid

CSS Selector:

.home-large-banner .sub-header-bar .img-grid-container

Sample code:

<a class="home-large-banner grid-1of1" href="">
<div class="sub-header-bar grid-1of1">
<h2>guitar-piano reference tool</h2>
<h3>web/desktop - ux/ui design</h3>
</div>
<div class="grid-1of1 img-grid-container">
<img class="img-border" src="images/gtrpno-label-1.png">
<img class="img-border" src="images/gtrpno-label-2.png">
<img class="img-border" src="images/gtrpno-label-3.png">
<img class="img-border" src="images/gtrpno-label-4.png">
</div>
</a>

Rendered element:

guitar-piano reference tool

web/desktop - ux/ui design

close up screenshot of the guitar to piano tool close up screenshot of the guitar to piano tool close up screenshot of the guitar to piano tool close up screenshot of the guitar to piano tool

clickable image

CSS Selector:

.folio-img

Sample code:

<div class="folio-img-container">
<a href="images/chart_final_template.png" class="folio-img" data-lightbox="style-guide" data-title="final prototype template without colour">>
<img class="img-border" src="images/chart_final_template.png" alt="final prototype template without colour">
<p>final prototype template without colour</p>
</a>
</div>

Rendered element: