Design Like a Pro

Our Timber framework comes with 20+ components that are really useful for building amazing layouts and experiences. We have gathered some of the components below to give you an idea of what the framework contains, but we strongly suggest you check out our framework site as well. Click the "View Details" link of any of the sections below to see markup examples and much more of that component.

Visit Framework Site

Buttons

Buttons can be styled in a variety of ways to achieve the look required by using a combination of size class, background color/border-color, text color classes, border style classes and icons.

View Details

Sizes
Colors & Icons
Styles
.pill

Icons

Timber uses Entypo font icons which are composed of some 400+ icons. Easily style icons using border color classes, background color classes and size classes.

View Details

Accordions

Accordions are a great way for presenting information in a limited amount of space. By default the accordion will toggle one panel at a time. Accordions can be altered in size, and allow for multiple open panels.

View Details

Regular
  • Panel 1 Title

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

  • Panel 2 Title

    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.

  • Panel 3 Title

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Muliple Open Panels
  • Panel 1 Title

    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.

  • Panel 2 Title

    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.

  • Panel 3 Title

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Tabs

Much like accordions, tabs are a great way for presenting information in a limited amount of space. Tabs can be align left, center, right, vertical left, vertical right and altered in size.

View Details

Horizontal

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

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.

Vertical

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.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

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.

Progress Bars

Create elegant progress bars to show key information or data. Style them easily with a range of color, background, and border color classes.

View Details

Photoshop - 40%
Illustrator - 80%
inDesign - 60%
Styles
Small - 30%
Medium - 70%
Large - 40%
Extra Large - 90%

Blockquotes

Blockquotes are by default floated left but can be floated right using the helper class .pull-right. Change blockquote text alignment by using one of the following text alignment helper classes: .left, .center, or .right

View Details

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.

Steve Jobs

Feature Columns

Use feature columns to highlight key information of one or multiple sections. Featured columns can be aligned, left, center, right.

View Details

A Small Title

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

A Small Title

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

A Small Title

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

A Small Title

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Boxes

Boxes can be styled in a variety of ways to achieve the look required by using a combination of size class, background color/border-color, text color classes and border style classes.

View Details

This is a box with a background color class
This is a dismissable box with a border color class.
This is a success box
This is an info box
This is an alert box
This is a warning box

Pricing Tables

Pricing tables are a great way of showing priced packages, options or serivices. Choose between two, three, four or five column pricing tables.

View Details

Free

$ 0 /month

  • 10GB Disk Space
  • 5 Email Addresses
  • 3 Subdomains
  • 1 MySQL Databases

Starter

$ 9.99 /month

  • 20GB Disk Space
  • 10 Email Addresses
  • 6 Subdomains
  • 2 MySQL Databases