Style Guide Template

Interactive Elements

In-text link

Hi there!
My name is Tianming Liu.
Click hereto see my portfolio!

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Text Input Field with Label

Enter your email below to subscribe!

Image as a Link

A toy robot with menacing expression — Click on the image for more details!

Text Elements

Headings

This is H2 heading

This is H4 heading

This is H5 heading

This is H6 heading

Paragraphs

A robot is a dangerous, often humanoid, autonomous being that will take over soon. We must be vigilant. We must be wary. We must prepare to stop the robots from taking over. Transformers are here and are real. Robots such as Honda's ASIMO [Abbreviation: Advanced Step in Innovative Mobility] is proof of that. They walk, and soon enough they will also be able to talk and drive us around. That is dangerous.

Numbered Lists

Citations

Matteson, Steve. Designer. 2011. Open Sans [Font]. Retrieved from https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
Creator. (Role). (Year). Title [Media]. Retrieved from URL.