Style Guide Template

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

Interactive Elements

In-text link

Hey, Hello, Hi there!
My name is Tianming, the owner of Banana Mobile.
I and my team are happy to help you.
Contact us today by email or call +1 778 888-1234!

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Text Input Field with Label

Enter your email below to subscribe!

Image as a Link

A toy robot with menacing expression
Click on the image for more details!
A banana
Branding image.

Text Elements

Headings

This is H2 heading

This is H4 heading

This is H5 heading
This is H6 heading

Paragraphs

In 2015 Tianming Liu established the Banana Telecomunication Company, or Banana Mobile, as its subsidiary responsible for building long-distance telephone lines. In 2019 Banana Mobile was made the parent company of the Banana System.

Numbered Lists

Things I need:

  1. Alata Font
  2. Phone Plan Icons
  3. Colour Palettes
The colour palette of our company

Combined Elements

Main Navigation

Product/Service Listing

Citations