# 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

Primary Secondary Info Light Dark Link
Primary Secondary Info Light Dark
Toggle
Btn 1 Btn 2 Btn 3
BadgeNew! Icon Active Disabled Small Regular Large

## 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.

- « Previous
- 1
- 2
- 3
- 4
- » Next

50%

#### Well done!

This is an info panel.

## Forms

We'll never share your email with anyone else.
@
1
2
3
Remember me
Disabled option
Please provide a valid input.
Checkbox

## Pictures

#### Caption #1

Paragraph. Lorem ipsum dolor sit

#### Caption #2

Paragraph. Lorem ipsum dolor sit

Previous Next

Caption #1

Caption #2

## 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

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

#### Card Image Overlay

## Listing

- List group
- Active list item
- Disabled list item
Link list item

# | 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
© 2017-2018

##### Features

- Cool stuff
- Random feature
- Team feature
- Stuff for developers
- Another one
- Last time

##### Resources

- Resource
- Resource name
- Another resource
- Final resource

##### About

- Team
- Locations
- Privacy
- Terms