Style Guide Template

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

Interactive Elements

In-text link

Here is a link to find the invisible cow:

CLICK HERE

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

A hamster photo linked to a website with more hamsters

Text Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Story about hamster

Once upon a time, a curious hamster named Hazel wiggled out of her cage to explore the garden. She met friendly butterflies who invited her to play hide-and-seek. After the game, she found a hedgehog named Henry. “Help me find berries?” he asked. They searched together and found the sweetest ones to share. As the sun set, Hazel headed home, promising to return for more adventures. That night, she snuggled in her bedding, dreaming of the magical garden waiting for her. THE END.

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Citations