Elements

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

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

Multiple Open Panes

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

Alternative Styles

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

  • 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 Tabs

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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 Tabs

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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.

Alternative Styles

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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.

Tab 1 Content

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.

Tab 2 Content

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.

Tab 3 Content

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%
Final Cut - 80%

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 Edition

$0

  • 10GB Cloud Storage
  • 5 Galleries
  • 0 Add Ons
  • 0 Personalized Domains

Pro Edition

$6.95

  • 20GB Cloud Storage
  • 10 Galleries
  • 100 Add Ons
  • 1 Personalized Domain

Lightbox

Summit is 100% reponsive and CSS3 transitions driven lightbox with a simple JS fallback for browsers such as IE9. It supports images, YouTube videos, Vimeo videos, inline HTML, iframes and ajax content.

View Details

Slider

Avanlanche is 100% reponsive and CSS3 transitions driven with a simple JS fallback for browsers such as IE9. It supports both landscape and portrait images, HTML5, YouTube and Vimeo videos, and a range of 3D transitions for captions and caption images.

View Details

  • Slider Caption

  • Slider Caption

  • Slider Caption

Video

Beautifully responsive videos on the fly.

View Details

Contact Form

All of our templates come with fully functional contact forms that can easily be customized and inserted anywhere in a page. You can easily add addtional fields, select boxes and check boxes to any form without having to edit PHP. Simply add the class "form-aux" to addtion form elements.

View Details

Newsletter Signup

Our templates also come with a fully functional newsletter signup form. Requires a Mailchimp account!

View Details

Ready to create a site with Sartre?