Style Guide Template

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

Interactive Elements

In-text link

Click here to visit Google.

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 colourful Google wordmark
Google is a major tech corporation.

Text Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Paragraphs

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Numbered Lists

  1. First item
  2. Second item
  3. Third item

Combined Elements

Main Navigation

Product/Service Listing

Strawberry Bingsoo
Strawberry Bingsoo
Injeolmi Bingsoo
Injeolmi Bingsoo
Pink Colour Palette
Warm tones make for a great start
Collage of hand drawn faces
Hand drawn graphics make it cute

At CloudPuff Pastries we strive to bring customers a taste of angelic delight. With a wide selection of freshly made drinks and desserts, there is something for everyone. Our fluffy cakes, creamy treats, and sweet confections are bound to bring you a little slice of heaven.

Citations