Features
[container extra=”row”]
[one_half extra=””]
[heading size=”h1″ extra=””]H1 heading style[/heading]
[heading size=”h2″ extra=””]H2 heading style[/heading]
[heading size=”h3″ extra=””]H3 heading style[/heading]
[heading size=”h4″ extra=””]H4 heading style[/heading]
[heading size=”h5″ extra=””]H5 heading style[/heading]
[heading size=”h6″ extra=””]H6 heading style[/heading]
[/one_half]
[one_half extra=””]
[heading size=”h3″ extra=””]Blockquote[/heading]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo.
[heading size=”h3″ extra=””]Labels[/heading]
[paragraph extra=””]
[label type=”label-primary”]Lorem[/label] ipsum dolor sit amet, consectetur adipiscing elit.
[/paragraph]
[paragraph extra=””]
[label type=”label-danger”]Lorem[/label] ipsum dolor sit amet, consectetur adipiscing elit.
[/paragraph]
[paragraph extra=””]
[label type=”label-info”]Lorem[/label] ipsum dolor sit amet, consectetur adipiscing elit.
[/paragraph]
[paragraph extra=””]
[label type=”label-success”]Lorem[/label] ipsum dolor sit amet, consectetur adipiscing elit.
[/paragraph]
[paragraph extra=””]
[label type=”label-warning”]Lorem[/label] ipsum dolor sit amet, consectetur adipiscing elit.
[/paragraph]
[/one_half]
[/container]
[divider extra=””]
[container extra=”row”]
[one_full extra=””]
[heading size=”h3″ extra=””]Dropcaps[/heading]
[/one_full]
[one_half extra=””]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.
[/one_half]
[one_half extra=””]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.
[/one_half]
[/container]
[divider extra=””]
[container extra=”row”]
[one_full extra=””]
[heading size=”h3″ extra=””]Lists[/heading]
[/one_full]
[/container]
[container extra=”row”]
[one_half extra=””]
[heading size=”h3″ extra=””]Unordered List[/heading]
[list type=unordered]
[list_item]Lorem ipsum dolor sit amet[/list_item]
[list_item]Consectetur adipiscing elit[/list_item]
[list_item] Nulla volutpat aliquam velit[/list_item]
[list_item]Aenean sit amet erat nunc[/list_item]
[list_item]Eget porttitor lorem[/list_item]
[/list]
[heading size=”h3″ extra=”spaced”]Description List[/heading]
[list type=desc]
[list_item_dt]Description lists[/list_item_dt][list_item_dd]A description list is perfect for defining terms.[/list_item_dd]
[list_item_dt]Euismod[/list_item_dt]
[list_item_dt]Malesuada porta[/list_item_dt][list_item_dd]Etiam porta sem malesuada magna mollis euismod.[/list_item_dd]
[/list]
[/one_half]
[one_half extra=””]
[heading size=”h3″ extra=””]Ordered List[/heading]
[list type=ordered]
[list_item]Facilisis in pretium nisl aliquet[/list_item]
[list_item]Faucibus porta lacus fringilla vel[/list_item]
[list_item]Aenean sit amet erat nunc[/list_item]
[list_item]Aenean sit amet erat nunc[/list_item]
[/list]
[heading size=”h3″ extra=”spaced”]Icons List[/heading]
[list type=icon extra=”checks”]
[list_item icon=”icon-envelope-alt” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[list_item icon=”icon-film” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[/list]
[list type=icon extra=”carets”]
[list_item icon=”icon-envelope-alt” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[list_item icon=”icon-film” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[/list]
[list type=icon extra=”chevrons”]
[list_item icon=”icon-envelope-alt” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[list_item icon=”icon-film” type=”icon”]Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis.[/list_item]
[/list]
[heading size=”h3″ extra=”spaced”]Inline[/heading]
[list type=inline extra=]
[list_item]Lorem ipsum[/list_item]
[list_item]Phasellus iaculis[/list_item]
[list_item]Nulla volutpat[/list_item]
[/list]
[/one_half]
[/container]
[divider extra=””]
[container extra=”row”]
[one_full extra=””]
[heading size=”h3″ extra=””]Code[/heading]
[/one_full]
[/container]
[container extra=”row”]
[one_half extra=””]
[paragraph extra=””]For example, [code type=”inline”]<section>[/code] should be wrapped as inline.[/paragraph]
[/one_half]
[one_half extra=””][code type=””]<p>Sample text here…<p>[/code][/one_half]
[/container]
[container extra=”row”]
[one_full extra=””]
[heading size=”h3″ extra=””]Tabels[/heading]
[htable type=”table-striped”]
[trow]
[thcol] # [/thcol]
[thcol] First Name [/thcol]
[thcol] Last Name [/thcol]
[thcol] Username [/thcol]
[/trow]
[trow]
[tcol] 1 [/tcol]
[tcol] Mark [/tcol]
[tcol] Otto [/tcol]
[tcol] @mdo [/tcol]
[/trow]
[trow]
[tcol] 2 [/tcol]
[tcol] Jacob [/tcol]
[tcol] Thornton [/tcol]
[tcol] @fat [/tcol]
[/trow]
[trow]
[tcol] 3 [/tcol]
[tcol] Larry [/tcol]
[tcol] the Bird [/tcol]
[tcol] @twitter [/tcol]
[/trow]
[/htable]
[htable type=”table-bordered”]
[trow]
[thcol] # [/thcol]
[thcol] First Name [/thcol]
[thcol] Last Name [/thcol]
[thcol] Username [/thcol]
[/trow]
[trow]
[tcol] 1 [/tcol]
[tcol] Mark [/tcol]
[tcol] Otto [/tcol]
[tcol] @mdo [/tcol]
[/trow]
[trow]
[tcol] 2 [/tcol]
[tcol] Jacob [/tcol]
[tcol] Thornton [/tcol]
[tcol] @fat [/tcol]
[/trow]
[trow]
[tcol] 3 [/tcol]
[tcol] Larry [/tcol]
[tcol] the Bird [/tcol]
[tcol] @twitter [/tcol]
[/trow]
[/htable]
[/one_full]
[/container]
[divider extra=””]
[container extra=”row”]
[one_half extra=””]
[heading size=”h3″ extra=””]Tabs[/heading]
[tabs]
[tabh]
[tab id=”sampletabs0″ class=”active”] Sample Tab #1 [/tab]
[tab id=”sampletabs1″ class=””] Sample Tab #2 [/tab]
[tab id=”sampletabs2″ class=””] Sample Tab #3 [/tab]
[/tabh]
[tabc]
[tabrow id=”sampletabs0″ class=”active”]
[paragraph extra=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/paragraph]
[/tabrow]
[tabrow id=”sampletabs1″ class=””]
[paragraph extra=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/paragraph]
[/tabrow]
[tabrow id=”sampletabs2″ class=””]
[paragraph extra=””]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.[/paragraph]
[/tabrow]
[/tabc]
[/tabs]
[heading size=”h3″ extra=””]Progress Bar[/heading]
[progress_bar percentage=”100″ name=”HTML/CSS” value=”90″ type=”” colour=”progress-bar-primary”]
[progress_bar percentage=”100″ name=”Photoshop” value=”95″ type=”” colour=”progress-bar-primary”]
[progress_bar percentage=”100″ name=”Joomla” value=”75″ type=”” colour=”progress-bar-primary”]
[progress_bar percentage=”100″ name=”Wordpress” value=”100″ type=”” colour=”progress-bar-primary”]
[span extra=””]Stripped Progress Bar[/span]
[progress_bar percentage=”100″ name=”Complete (success)” value=”40″ type=”progress-striped” colour=”progress-bar-success”]
[span extra=””]Colored Progress Bar[/span]
[progress_bar percentage=”100″ name=”Complete” value=”20″ type=”colored” colour=”progress-bar-info”]
[progress_bar percentage=”100″ name=”Complete” value=”60″ type=”colored” colour=”progress-bar-warning”]
[progress_bar percentage=”100″ name=”Complete” value=”80″ type=”colored” colour=”progress-bar-danger”]
[/one_half]
[one_half extra=””]
[heading size=”h3″ extra=””]Accordion[/heading]
[accordions id=”area”]
[accgroup]
[acchead id=”area” tab_id=”area0″ class=”active”]Accordion Panel #1[/acchead]
[accbody tab_id=”area0″ in=”in”]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/accbody]
[/accgroup]
[accgroup]
[acchead id=”area” tab_id=”area1″ class=””]Accordion Panel #2[/acchead]
[accbody tab_id=”area1″ in=””]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/accbody]
[/accgroup]
[accgroup]
[acchead id=”area” tab_id=”area2″ class=””]Accordion Panel #3[/acchead]
[accbody tab_id=”area2″ in=””]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/accbody]
[/accgroup]
[/accordions]
[heading size=”h3″ extra=””]Toggles[/heading]
[toggles id=”test”]
[togglegroup]
[togglehead id=”test” tab_id=”test0″]Toggle Panel #1[/togglehead]
[togglebody tab_id=”test0″]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/togglebody]
[/togglegroup]
[togglegroup]
[togglehead id=”test” tab_id=”test1″]Toggle Panel #2[/togglehead]
[togglebody tab_id=”test1″]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/togglebody]
[/togglegroup]
[togglegroup]
[togglehead id=”test” tab_id=”test2″]Toggle Panel #3[/togglehead]
[togglebody tab_id=”test2″]Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla.Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui.Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue.Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.[/togglebody]
[/togglegroup]
[/toggles]
[/one_half]
[/container]
[divider extra=””]
[container extra=”row”]
[one_half extra=””]
[heading size=”h3″ extra=””]Alert Boxes[/heading]
[alert type=”alert-standard” close=”yes”]Oh snap! Change a few things up and try submitting again.[/alert]
[alert type=”alert-warning” close=”yes”]Oh snap! Change a few things up and try submitting again.[/alert]
[alert type=”alert-error” close=”yes”]Oh snap! Change a few things up and try submitting again.[/alert]
[alert type=”alert-info” close=”yes”]Oh snap! Change a few things up and try submitting again.[/alert]
[alert type=”alert-success” close=”yes”]Oh snap! Change a few things up and try submitting again.[/alert]
[/one_half]
[one_half extra=””]
[heading size=”h3″ extra=””]Tooltips[/heading]
[paragraph extra=””]Tight pants next level keffiyeh [imic_tooltip link=”#” direction=”top” title=”Default Tooltip”]you probably[/imic_tooltip] haven’t heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney’s fixie sustainable quinoa 8-bit american apparel [imic_tooltip link=”#” direction=”bottom” title=”Another Tooltip”]have a[/imic_tooltip] terry richardson vinyl chambray.[/paragraph]
[/one_half]
[/container]
[section extra=”counters margin-30 text-align-center”][container extra=”container row”]
[one_fourth extra=”col-md-3 col-sm-3″]
[imic_count to=”9000″ speed=”2000″ icon=”fa-glass” textstyle=”div” subject=”Drinks Consumed”]
[/one_fourth]
[one_fourth extra=”col-md-3 col-sm-3″]
[imic_count to=”96″ speed=”1500″ icon=”fa-map-marker” textstyle=”div” subject=”Places Visited”]
[/one_fourth]
[one_fourth extra=”col-md-3 col-sm-3″]
[imic_count to=”1500″ speed=”2000″ icon=”fa-music” textstyle=”div” subject=”Songs Played”]
[/one_fourth]
[one_fourth extra=”col-md-3 col-sm-3″]
[imic_count to=”1400″ speed=”2000″ icon=”fa-dribbble” textstyle=”div” subject=”hours played”]
[/one_fourth]
[/container][/section]
[divider extra=””]
[container extra=”row”]
[one_half extra=””]
[heading size=”h3″ extra=””]Buttons[/heading]
[imic_button colour=”btn-default” type=”enabled” link=”http://” target=”_self” extraclass=””]Default[/imic_button]
[imic_button colour=”btn-primary” type=”enabled” link=”http://” target=”_self” extraclass=””]Primary[/imic_button]
[imic_button colour=”btn-success” type=”enabled” link=”http://” target=”_self” extraclass=””]Success[/imic_button]
[imic_button colour=”btn-info” type=”enabled” link=”http://” target=”_self” extraclass=””]Info[/imic_button]
[imic_button colour=”btn-warning” type=”enabled” link=”http://” target=”_self” extraclass=””]Warning[/imic_button]
[imic_button colour=”btn-danger” type=”enabled” link=”http://” target=”_self” extraclass=””]Danger[/imic_button]
[heading size=”h2″ extra=”spaced”]Button Desabled[/heading]
[imic_button colour=”btn-primary” type=”disabled” link=”http://” target=”_self” extraclass=””]Primary button[/imic_button]
[imic_button colour=”btn-default” type=”disabled” link=”http://” target=”_self” extraclass=””]Button[/imic_button]
[heading size=”h2″ extra=”spaced”]Labels[/heading]
[label type=”label-default”]Default[/label]
[label type=”label-primary”]Primary[/label]
[label type=”label-success”]Success[/label]
[label type=”label-info”]Info[/label]
[label type=”label-warning”]Warning[/label]
[label type=”label-dark”]Dark[/label]
[/one_half]
[one_half extra=””]
[divider extra=”visible-sm visible-xs tall”]
[heading size=”h3″ extra=””]Pagination[/heading]
[paragraph extra=”short”]Large[/paragraph]
[pagination size=”pagination-lg”]
[page_first]
[page class=”active”]1[/page]
[page class=””]2[/page]
[page class=””]3[/page]
[page class=””]4[/page]
[page class=””]5[/page]
[page_last]
[/pagination]
[paragraph extra=”short”]Default[/paragraph]
[pagination size=””]
[page_first]
[page class=”active”]1[/page]
[page class=””]2[/page]
[page class=””]3[/page]
[page class=””]4[/page]
[page class=””]5[/page]
[page_last]
[/pagination]
[paragraph extra=”short”]Small[/paragraph]
[pagination size=”pagination-sm”]
[page_first]
[page class=”active”]1[/page]
[page class=””]2[/page]
[page class=””]3[/page]
[page class=””]4[/page]
[page class=””]5[/page]
[page_last]
[/pagination]
[/one_half]
[/container]