Style Guide Template

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

Interactive Elements

In-text link

Here is what a link to an external website looks like

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

The SFU logo
The image is retrieved from: https://www.sfu.ca/communicators-toolkit/guides/brand-guide/logos/Institutional.html on May 10th.

Text Elements

Headings

Fourth level heading

Paragraphs

Here is a brief paragraph in html. The tag used was a p tag to denote that it is a paragraph. This paragraph does have too much meaning as it is meant to fill out this section of the website and assignment. So much of the text here is redundant and not useful. More text is added here to ensure that the paragraph contains enough characters to look like a pragraph rather than a short sentence.

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Citations