wireframe style guide

Components designed to fit nicely together

Color palette


Primary

Secondary

Info

Light

Dark

Typography


Display

Heading

Lead paragraph

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquoute

Buttons


Navs and components


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Consectetur adipiscing elit, sed do eiusmod tempor incididunt.
50%

Forms


We'll never share your email with anyone else.
@
Please provide a valid input.

Pictures


Card image
Card image
Card image

Cards


A Card

Some quick example text to build on the card title and make up the bulk of the card's content.

A Card Header

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image

Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Card Image Overlay

Card image

Listing


# Striped table bordered
1 example one
2 example two
3 example three

Navigation


Sections


This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

9 mins

Heading

795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Below is an example form built entirely with Bootstrap's form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.

Heading 4

Blockquoute - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Button