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.
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.
Sizes
Colors & Icons
Styles
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.
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.
-
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.
-
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.
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.
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.
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
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.
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.
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.
Free
$ 0 /month
Starter
$ 9.99 /month
Rollovers
Timber comes with a range of predefined rollover effects that can be easily changed on the fly. Change easing type, color and opacity of the rollover by using data attributes.
