Style Guide Template

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

Hello, my name is Megan Yung and I am in my fourth year at Simon Fraser University. I am currently pursuing a joint-major in Interactive Arts + Technology and Business Administration. You can find my resume here. Also feel free to contact me if you have any questions.

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

Text Elements

Headings

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

Paragraphs

This is a paragraph about anything and everything. Personally, I am just making stuff up on the spot, but typically I would make some nice copywriting here relating to whatever theme the webpage is about. That will be a P1 problem for later.

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Citations