[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Design Like a Pro” weight=”true” xlarge=””]
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.
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Buttons” weight=”true” xlarge=””]
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.
[fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”” extra_class=”” title=”Sizes” weight=”” xlarge=””][fwp_conrad_button btn_class=”default” size=”small” border=”” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Small%20Button||” icon=””][fwp_conrad_button btn_class=”default” size=”medium” border=”” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Medium%20Button||” icon=””][fwp_conrad_button btn_class=”default” size=”large” border=”” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Medium%20Button||” icon=””][fwp_conrad_button btn_class=”default” size=”xlarge” border=”” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Medium%20Button||” icon=””][fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Colors & Icons” weight=”” xlarge=””][fwp_conrad_button btn_class=”bkg-turquoise” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Go%20Back||” icon=”icon-back”][fwp_conrad_button btn_class=”bkg-red-light” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Download||” icon=”icon-download”][fwp_conrad_button btn_class=”bkg-turquoise” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Retweet||” icon=”icon-retweet”][fwp_conrad_button btn_class=”bkg-charcoal-light” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Play%20Video||” icon=”icon-play”][fwp_conrad_button btn_class=”bkg-green-light” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Checkout||” icon=”icon-shopping-cart”][fwp_conrad_button btn_class=”bkg-navy-light” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Upload||” icon=”icon-upload”][fwp_conrad_button btn_class=”bkg-orange-light” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Open%20Menu||” icon=”icon-menu”][fwp_conrad_button btn_class=”bkg-facebook” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Share%20on%20Facebook||” icon=”icon-facebook”][fwp_conrad_button btn_class=”bkg-pinterest” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:Share%20on%20Pinterest||” icon=”icon-pinterest”][fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”mt-20″ margin_bottom=”mb-30″ extra_class=”” title=”Styles” weight=”” xlarge=””][fwp_conrad_button btn_class=”default” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:.rounded||” icon=””][fwp_conrad_button btn_class=”default” size=”medium” border=”pill” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:.pill||” icon=”icon-home”][fwp_conrad_button btn_class=”default” size=”medium” border=”” shadow=”” border_style=”” dsbld=”1″ extra_class=”” url=”url:%23|title:.disabled||” icon=””][fwp_conrad_button btn_class=”default” size=”medium” border=”” shadow=”soft” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:.shadow||” icon=””][fwp_conrad_button btn_class=”default” size=”medium” border=”” shadow=”hard” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:.hard-shadow||” icon=””][fwp_conrad_button btn_class=”gray” size=”medium” border=”rounded” shadow=”” border_style=”” dsbld=”0″ extra_class=”” url=”url:%23|title:.border-grey||” icon=””][fwp_conrad_button btn_class=”gray” size=”medium” border=”rounded” shadow=”” border_style=”dashed” dsbld=”0″ extra_class=”” url=”url:%23|title:.border-grey-dashed||” icon=””][fwp_conrad_button btn_class=”gray” size=”medium” border=”” shadow=”” border_style=”dotted” dsbld=”0″ extra_class=”” url=”url:%23|title:.border-grey-dotted||” icon=””]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Icons” weight=”true” xlarge=””]
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.
[fwp_conrad_icon_button btn_class=”bkg-pinterest” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-pinterest” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-twitter” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-twitter” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-facebook” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-facebook” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-dribbble” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-dribbble” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-linkedin” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-linkedin” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-pinterest” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-behance” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-google” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-google” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-flickr” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-flickr” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-vimeo” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-vimeo” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-youtube” size=”small” icon_type=”circled” extra_class=”” url=”url:%23|||” icon=”icon-youtube” lightbox_link=””]
[fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-heart” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-aircraft” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-star” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-plus” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-minus” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-thumbs-up” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-thumbs-down” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-rocket” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-flash” lightbox_link=””][fwp_conrad_icon_button btn_class=”bkg-turquoise” size=”small” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-feather” lightbox_link=””]
[fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-note” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-pencil” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-music” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-export” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-flashlight” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-mail” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-heart” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-heart-outlined” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-star” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-star-outlined” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-user” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-users” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-home” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-video” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-image” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-camera” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-images” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-menu” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-check” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-cancel” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-inbox” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-location-pin” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-download” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-layers” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-leaf” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-ruler” lightbox_link=””][fwp_conrad_icon_button btn_class=”default” size=”medium” icon_type=”boxed” extra_class=”” url=”url:%23|||” icon=”icon-shareable” lightbox_link=””]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Accordions” weight=”true” xlarge=””]
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.
[fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”mt-20″ margin_bottom=”mb-30″ extra_class=”” title=”Regular” weight=”” xlarge=””][fwp_conrad_tabs_accordion_container type=”accordion” extra_class=””][fwp_conrad_tabs_item title=”PANEL 1 TITLE” active=”1″ visibility=”1″ color=”#999999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”PANEL 2 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”PANEL 3 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][/fwp_conrad_tabs_accordion_container][fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”mt-20″ margin_bottom=”mb-30″ extra_class=”” title=”Muliple Open Panels” weight=”” xlarge=””][fwp_conrad_tabs_accordion_container type=”multi_open_tabs” extra_class=””][fwp_conrad_tabs_item title=”PANEL 1 TITLE” active=”1″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”PANEL 2 TITLE” active=”1″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”PANEL 3 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][/fwp_conrad_tabs_accordion_container]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Tabs” weight=”true” xlarge=””]
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.
[fwp_conrad_tabs_container type=”h-tabs” align=”” extra_class=””][fwp_conrad_tabs_item title=”TAB 1 TITLE” active=”1″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”TAB 2 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”TAB 3 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][/fwp_conrad_tabs_container][fwp_conrad_tabs_container type=”v-tabs” align=”” extra_class=””][fwp_conrad_tabs_item title=”TAB 1 TITLE” active=”1″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”TAB 2 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][fwp_conrad_tabs_item title=”TAB 3 TITLE” active=”0″ visibility=”1″ color=”#999″ hov_color=”#666666″ active_color=”#232323″ extra_class=””]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.[/fwp_conrad_tabs_item][/fwp_conrad_tabs_container]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Progress Bars” weight=”true” xlarge=””]
Create elegant progress bars to show key information or data. Style them easily with a range of color, background, and border color classes.
[fwp_conrad_progress_bars_container extra_class=””][fwp_conrad_progress_bars_item title=”Photoshop” percent=”40″ style=”” size=”” bg_color=”#6ed3cf” visibility=”1″ extra_class=””][fwp_conrad_progress_bars_item title=”Illustrator” percent=”80″ style=”” size=”” bg_color=”#6ed3cf” visibility=”1″ extra_class=””][fwp_conrad_progress_bars_item title=”inDesign” percent=”60″ style=”” size=”” bg_color=”#6ed3cf” visibility=”1″ extra_class=””][/fwp_conrad_progress_bars_container][fwp_conrad_title tag=”h5″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”mt-20″ margin_bottom=”mb-30″ extra_class=”” title=”Styles” weight=”” xlarge=””][fwp_conrad_progress_bars_container extra_class=””][fwp_conrad_progress_bars_item title=”Small” percent=”30″ style=”pill” size=”small” bg_color=”#232323″ visibility=”1″ extra_class=””][fwp_conrad_progress_bars_item title=”Medium” percent=”70″ style=”pill” size=”” bg_color=”#232323″ visibility=”1″ extra_class=””][fwp_conrad_progress_bars_item title=”Large” percent=”40″ style=”pill” size=”large” bg_color=”#232323″ visibility=”1″ extra_class=””][fwp_conrad_progress_bars_item title=”Extra Large” percent=”90″ style=”pill” size=”xlarge” bg_color=”#232323″ visibility=”1″ extra_class=””][/fwp_conrad_progress_bars_container]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Blockquotes” weight=”true” xlarge=””]
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
[fwp_conrad_blockquote type=”border” align=”left” text_color=”” extra_class=”” author=”Steve Jobs” text=”Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.”][fwp_conrad_blockquote type=”icon” align=”left” text_color=”” extra_class=”” author=”Steve Jobs” text=”Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.”][fwp_conrad_blockquote type=”image” align=”left” text_color=”” extra_class=”” author=”Steve Jobs” text=”Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.” author_image=”1576″]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=” Feature Columns” weight=”true” xlarge=””]
Use feature columns to highlight key information of one or multiple sections. Featured columns can be aligned, left, center, right.
[fwp_conrad_feature_boxes_container extra_class=””][fwp_conrad_feature_boxes_item title=”A Small Title” feature_content=”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.” size=”6″ title_color=”” content_color=”” icon_bgcolor=”” icon_color=”color-purple” animation=”1″ anim_direction=”left” anim_delay=”0″ extra_class=”” icon=”icon-aircraft”][fwp_conrad_feature_boxes_item title=”A Small Title” feature_content=”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.” size=”6″ title_color=”” content_color=”” icon_bgcolor=”” icon_color=”color-turquoise” animation=”1″ anim_direction=”left” anim_delay=”0″ extra_class=”” icon=”icon-rocket”][fwp_conrad_feature_boxes_item title=”A Small Title” feature_content=”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.” size=”6″ title_color=”” content_color=”” icon_bgcolor=”” icon_color=”color-orange-light” animation=”1″ anim_direction=”left” anim_delay=”0″ extra_class=”” icon=”icon-flash”][fwp_conrad_feature_boxes_item title=”A Small Title” feature_content=”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.” size=”6″ title_color=”” content_color=”” icon_bgcolor=”” icon_color=”color-red” animation=”1″ anim_direction=”left” anim_delay=”0″ extra_class=”” icon=”icon-heart”][/fwp_conrad_feature_boxes_container]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Boxes” weight=”true” xlarge=””]
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.
[fwp_conrad_message box_style=”” dismissable=”0″ extra_class=”” message=”This is a box with a background color class”][fwp_conrad_message box_style=”gray_border” dismissable=”1″ extra_class=”” message=”This is a dismissable box with a border color class.”][fwp_conrad_message box_style=”success” dismissable=”0″ extra_class=”” message=”This is a success box”][fwp_conrad_message box_style=”info” dismissable=”0″ extra_class=”” message=”This is an info box”][fwp_conrad_message box_style=”alert” dismissable=”0″ extra_class=”” message=”This is an alert box”][fwp_conrad_message box_style=”warning” dismissable=”0″ extra_class=”” message=”This is a warning box”]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Pricing Tables” weight=”true” xlarge=””]
Pricing tables are a great way of showing priced packages, options or serivices. Choose between two, three, four or five column pricing tables.
[fwp_conrad_price_table_container columns=”2″ extra_class=””][fwp_conrad_price_table_item title=”Free” currency=”$” currency_pos=”” price=”0″ button_size=”” selected=”0″ color_scheme=”” color_button=”default” visibility=”1″ extra_class=”” link=”url:%23|title:Select%20Option||”]10GB Disk Space;5 Email Addresses;3 Subdomains;1 MySQL Databases;[/fwp_conrad_price_table_item][fwp_conrad_price_table_item title=”Starter” currency=”$” currency_pos=”” price=”9.99″ button_size=”” selected=”1″ color_scheme=”bkg-turquoise” color_button=”bkg-turquoise” visibility=”1″ extra_class=”” link=”url:%23|title:Select%20Option||”]20GB Disk Space;10 Email Addresses;6 Subdomains;2 MySQL Databases;[/fwp_conrad_price_table_item][/fwp_conrad_price_table_container]
[fwp_conrad_title tag=”h2″ align=”left” align_mobile=”left” color=”color-charcoal” margin_top=”” margin_bottom=”mb-30″ extra_class=”” title=”Rollovers” weight=”true” xlarge=””]
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.
[fwp_conrad_thumbnail rich=”1″ title=”.overlay-fade-out” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-fade-out” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”1073″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-fade-img-scale-in” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-fade-img-scale-in” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”130″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-slide-in-left” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-slide-in-left” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”1134″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-img-slide-up” hover_speed=”700″ opacity=”1″ background=”#0a0a0a” animation=”overlay-img-slide-up” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”1100″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-img-slide-down” hover_speed=”700″ opacity=”1″ background=”#0a0a0a” animation=”overlay-img-slide-down” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”762″]
[fwp_conrad_thumbnail rich=”1″ title=”.overlay-fade-in” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-fade-in” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”762″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-fade-img-scale-out” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-fade-img-scale-out” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”308″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-slide-in-right” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-slide-in-right” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”769″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-img-slide-left” hover_speed=”700″ opacity=”1″ background=”#0a0a0a” animation=”overlay-img-slide-left” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”794″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-scale-in” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-scale-in” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”765″]
[fwp_conrad_thumbnail rich=”1″ title=”.img-scale-in” hover_speed=”700″ opacity=”0.1″ background=”#0a0a0a” animation=”img-scale-in” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”792″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-slide-in-top” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-slide-in-top” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”812″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-slide-in-bottom” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-slide-in-bottom” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”791″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-img-slide-right” hover_speed=”700″ opacity=”1″ background=”#0a0a0a” animation=”overlay-img-slide-right” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”1102″][fwp_conrad_thumbnail rich=”1″ title=”.overlay-scale-in.img-scale-in” hover_speed=”700″ opacity=”0.8″ background=”#0a0a0a” animation=”overlay-scale-in.img-scale-in” effect=”easeInOut” extra_class=”” link=”url:%23|||” image=”993″]