Elements
[section title=”Button _Styles_”]
[row]
[span4]
[/section] [section title=”Alert _Messages_” style=”gray”] [alert type=”” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-success” label=”Congrats!” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-info” label=”Useful info” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-danger” label=”Danger!” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “]
[/section] [section title=”Accordions”] [accordions][accordion title=”Accordion title”]Duis tempor aliquam odio at condimentum. Fusce eget leo ac turpis placerat commodo ac ut lorem. Quisque congue nulla ut nisl fringilla tempus. Suspendisse potenti. Integer ac dolor sapien. Integer quis ipsum erat. Mauris semper, neque sed rutrum dignissim, velit est varius mi, non congue elit nunc ullamcorper turpis. Pellentesque ac neque et arcu eleifend mollis. Donec tristique elementum eros eget tincidunt. Suspendisse potenti.[/accordion][accordion title=”Another Accordion title”]Duis tempor aliquam odio at condimentum. Fusce eget leo ac turpis placerat commodo ac ut lorem. Quisque congue nulla ut nisl fringilla tempus. Suspendisse potenti. Integer ac dolor sapien. Integer quis ipsum erat. Mauris semper, neque sed rutrum dignissim, velit est varius mi, non congue elit nunc ullamcorper turpis. Pellentesque ac neque et arcu eleifend mollis. Donec tristique elementum eros eget tincidunt. Suspendisse potenti.[/accordion][/accordions]
[/section] [section title=”Images _&_ Slideshows” style=”gray”] [row][span6] [image size=”box-big” source=”http://themes.oxygenna.com/smartbox/files/2013/04/landscape-3-600×600.jpg” icon=”icon-cog”] [image size=”box-huge” source=”http://themes.oxygenna.com/smartbox/files/2013/04/landscape-5-600×600.jpg” icon=”icon-heart”]
[/span6] [span6][flexslider slideshow=”devices” animation=”slide” speed=”8000″ duration=”500″ directionnavpos=”inside” controlsposition=”outside” captions=”hide”]
[/span6][/row] [/section] [section title=”Pricing _Tables_” style=”dark”][pricing heading=”standard” price=”10″ per=”month” featured=”no”]
[/section]
[section title=”Typography _Shortcodes_”]
[button size=”” label=”Default” link=”#”] [button size=”” type=”primary” label=”Primary” link=”#”]
[button size=”” label=”Info” type=”info” link=”#”] [button size=”” label=”Success” type=”success” link=”#”]
[button size=”” label=”Warning” type=”warning” link=”#”] [button size=”” label=”Danger” link=”#” type=”danger”]
[button size=”” label=”Inverse” type=”inverse” link=”#”] [button size=”” label=”Link” link=”#” type=”link”] [/span4] [span4]
[button size=”btn-large” label=”Large button” link=”#”] [button size=”btn-large” type=”primary” label=”Large Button” link=”#”]
[button size=”” label=”Default button” link=”#”] [button size=”” type=”primary” label=”Default Button” link=”#”]
[button size=”btn-small” label=”Small button” link=”#”] [button size=”btn-small” type=”primary” label=”Small Button” link=”#”]
[button size=”btn-mini” label=”Mini button” link=”#”] [button size=”btn-mini” type=”primary” label=”Mini Button” link=”#”] [/span4] [span4]
[button icon=”icon-beaker” size=”” label=”Beaker” link=”#”] [button icon=”icon-star” size=”” type=”success” label=”Star” link=”#”]
[button icon=”icon-heart” size=”” type=”danger” label=”Heart” link=”#”] [button icon=”icon-cloud” size=”” type=”primary” label=”Cloud” link=”#”]
[button icon=”icon-leaf” size=”” label=”Leaf” link=”#”] [button icon=”icon-lightbulb” size=”” type=”info” label=”Light bulb” link=”#”]
[/span4]
[/row]
[button icon="icon-heart" type="success" size="btn-large" label="My text" link="a link"]
[/section]
[section title=”Tabbed _Navigation_” style=”gray”]
[row]
[span3] [/span3]
[span6]
[tabs][tab title=”Home”]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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/tab_pane][tab_pane title=”About us”]Donec consectetur ultrices nisl, vitae fringilla est interdum id. Morbi condimentum lacinia scelerisque. Nullam nulla dui, dignissim sed cursus in, vulputate nec mi. Aliquam lacus lectus, scelerisque blandit vestibulum id, vehicula a enim.[/tab][tab title=”About us”]Vestibulum imperdiet adipiscing tempus. Sed nec est sapien. Donec tortor tortor, semper vitae commodo sed, hendrerit id felis. Aliquam sagittis enim bibendum enim facilisis vitae viverra urna congue. Maecenas malesuada rutrum ligula, at egestas metus semper nec.[/tab][tab title=”Services”]Duis tempor aliquam odio at condimentum. Fusce eget leo ac turpis placerat commodo ac ut lorem. Quisque congue nulla ut nisl fringilla tempus. Suspendisse potenti. Integer ac dolor sapien. Integer quis ipsum erat. Mauris semper, neque sed rutrum dignissim, velit est varius mi, non congue elit nunc ullamcorper turpis. Pellentesque ac neque et arcu eleifend mollis. Donec tristique elementum eros eget tincidunt. Suspendisse potenti.[/tab][/tabs]
[/span6]
[span3] [/span3]
[/row]
[tabs][tab title="First title"]First content here[/tab][tab title="Second title"]Second content[/tab][/tabs]
[/section]
[section title=”Progress _Bars_”]
Basic
[progress type=”progress” percentage=”20″] [progress style=”progress-success” type=”progress” percentage=”40″] [progress style=”progress-warning” type=”progress” percentage=”60″] [progress style=”progress-danger” type=”progress” percentage=”80″]Striped
[progress type=”progress progress-striped” percentage=”20″] [progress style=”progress-success” type=”progress progress-striped” percentage=”40″] [progress style=”progress-warning” type=”progress progress-striped” percentage=”60″] [progress style=”progress-danger” type=”progress progress-striped” percentage=”80″]Animated
[progress type=”progress progress-striped active” percentage=”20″] [progress style=”progress-success” type=”progress progress-striped active” percentage=”40″] [progress style=”progress-warning” type=”progress progress-striped active” percentage=”60″] [progress style=”progress-danger” type=”progress progress-striped active” percentage=”80″][progress style="progress-danger" type="progress progress-animated" percentage="80"]
[/section] [section title=”Alert _Messages_” style=”gray”] [alert type=”” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-success” label=”Congrats!” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-info” label=”Useful info” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “] [alert type=”alert-danger” label=”Danger!” Description=”Curabitur elementum vehicula ipsum id tincidunt. Ut enim mi, suscipit feugiat facilisis vitae, mollis at magna. Aenean tellus mauris, congue a vestibulum eget, varius quis turpis. “]
[alert type="alert-info" label="Danger!" Description="...."]
[/section] [section title=”Accordions”] [accordions][accordion title=”Accordion title”]Duis tempor aliquam odio at condimentum. Fusce eget leo ac turpis placerat commodo ac ut lorem. Quisque congue nulla ut nisl fringilla tempus. Suspendisse potenti. Integer ac dolor sapien. Integer quis ipsum erat. Mauris semper, neque sed rutrum dignissim, velit est varius mi, non congue elit nunc ullamcorper turpis. Pellentesque ac neque et arcu eleifend mollis. Donec tristique elementum eros eget tincidunt. Suspendisse potenti.[/accordion][accordion title=”Another Accordion title”]Duis tempor aliquam odio at condimentum. Fusce eget leo ac turpis placerat commodo ac ut lorem. Quisque congue nulla ut nisl fringilla tempus. Suspendisse potenti. Integer ac dolor sapien. Integer quis ipsum erat. Mauris semper, neque sed rutrum dignissim, velit est varius mi, non congue elit nunc ullamcorper turpis. Pellentesque ac neque et arcu eleifend mollis. Donec tristique elementum eros eget tincidunt. Suspendisse potenti.[/accordion][/accordions]
[accordions][accordion title="Accordion title"]Accordion content[/accordion][/accordions]
[/section] [section title=”Images _&_ Slideshows” style=”gray”] [row][span6] [image size=”box-big” source=”http://themes.oxygenna.com/smartbox/files/2013/04/landscape-3-600×600.jpg” icon=”icon-cog”] [image size=”box-huge” source=”http://themes.oxygenna.com/smartbox/files/2013/04/landscape-5-600×600.jpg” icon=”icon-heart”]
[image source="some source" icon="icon-heart"]
[/span6] [span6][flexslider slideshow=”devices” animation=”slide” speed=”8000″ duration=”500″ directionnavpos=”inside” controlsposition=”outside” captions=”hide”]
[flexslider slideshow="some slideshow" animation="slide" speed="8000" duration="500" directionnavpos="inside" controlsposition="outside" captions="hide"]
[/span6][/row] [/section] [section title=”Pricing _Tables_” style=”dark”][pricing heading=”standard” price=”10″ per=”month” featured=”no”]
- 1 project
- 5 GB Storage
- 5 Users
- 5 GB Bandwidth
- 10 projects
- 5 GB Storage
- 10 Users
- 10 GB Bandwidth
- 100 project
- 50 GB Storage
- Unlimited Users
- 10 GB Bandwidth
[pricing heading="standard" price="10" per="month" featured="no"]
- 1 project
- 5 GB Storage
[button icon="" size="btn-large" label="Sign Up" link="#"][/pricing]
Lead text
[lead centered=”yes”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. In aliquet facilisis condimentum. Donec at orci orci, a dictum justo. Sed a nunc non lectus fringilla suscipit. Vivamus pretium sapien sit amet mauris aliquet eleifend vel vitae arcu. Fusce pharetra dignissim nisl egestas pretium. [/lead][lead centered="yes"]Some content[/lead]
Blockquote
In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. In aliquet facilisis condimentum. Donec at orci orci, a dictum justo.
Quote content
Icon lists
[row] [span4] [iconlist][iconitem title=”icon title” icon=”icon-heart”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][iconitem title=”another icon title” icon=”icon-star”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][/iconlist] [/span4] [span4] [iconlist][iconitem title=”icon title” icon=”icon-magnet”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][iconitem title=”another icon title” icon=”icon-map-marker”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][/iconlist] [/span4] [span4] [iconlist][iconitem title=”icon title” icon=”icon-signal”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][iconitem title=”another icon title” icon=”icon-eye-open”]In facilisis scelerisque dui vel dignissim. Sed nunc orci, ultricies congue vehicula quis, facilisis a orci. I[/iconitem][/iconlist] [/span4] [/row][iconlist][iconitem title="icon title" icon="icon-heart"][/iconitem][iconitem title="another icon title" icon="icon-star"][/iconitem][/iconlist]
[/section]