Style Guide Template

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

Interactive Elements

In-text link

If you want to know more about scary robots, there's a very scary movie called The Terminator. I haven't seen it. It's too scary. There's a machine in it or something.

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

Evil toy robot image, linking to a wikipedia list of science fiction horror films.
GAHHH!! Phew, I'm glad this guy isn't real. Click on him to learn about more scary science fiction, specifically of the film variety.

Text Elements

Headings

Heading type 2

Heading type 3

Heading type 4

Heading type 5

Paragraphs

This is sample paragraph text. A paragraph is a long collection of text, typically comprised of several sentences focusing and elaborating on one central idea. Or, something of the sort. This isn't a definition from anywhere, I'm making it up.

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Citations