Also we have integrated some nice Accordions and Toggle functions. There are two ways to use them. You can choose between using our shortcode system or alternative you can use the WS-Accordion Module which is also integrated in the download package.
- Two different ways for the optic and the functionality of the accordions and toggles
- Of course full responsive and working on all devices like Smartphones or Tablets
- Use them for the clarity if you have much content to display
Demo Toggle - Shortcodes
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Demo Accordion - Joomla Module
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{toggle | Title of the Tab}Your Content goes here{/toggle}
{toggle-open | Title of the Tab}Your Content goes here, this Toggle is open for default{/toggle}
The Accordion Sample is made with an Joomla module which is included in the download package of this theme.
We buttons, really! That's why the this awesome Framework has multiple buttons sizes and color that are not only badass out of the box, but easy to customize for your projects. Of course you can easily add Buttons with the integrated Shortcode System, see a Demo of the possible Variations below.
- Nice styled with CSS3 effects and techniques which works in all modern browsers
- Four different sizes and 7 individual colors to take the best match of your websites look
- Very easy to use in your content with our integrated Shortcode System
- Styles for every situation, regular, hover and of course a active and focus style
Sizes and Colors
Add classes for size and type/color to achive what button you wish.
Use Icons on Buttons
Easily add Icons to your Buttons, more then 360 available with the great Font Awesome Icon font.
Advanced Examples
Do whatever you want with our Buttons, let's play Videos, show Images, add Maps, Tooltips, Data Attributes and much more.
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{button | (Size: btn-small, btn-medium, btn-large, btn-xlarge) (Color: btn-primary, btn-info, btn-success, btn-danger, btn-inverse, btn-warning, btn-link) | Your Link goes here | Name your Button here}
{button | btn-large btn-info | http://www.google.de | Jump to Google}
Or use one of these Shortcodes (with Icons or with Link opens in a new Window)
{button-icon | btn-large btn-info | http://www.google.de | Jump to Google | fa-name}
{button-blank | btn-large btn-info | http://www.google.de | Jump to Google}
{button-data | btn-large btn-info | http://www.google.de | Jump to Google | data-attributes comes here}
This is an important feature of our theme, we have included an icon-font for you which is really really awesome (yes, it's also called Font Awesome)! You can place this icons on almost every location of joomla, scroll to the bottom to see how the icons working for you, also watch the really awesome features in the grey panel. More then 360 Icons are available this time, updated continuously. See all Icons here.
- Icons are retina ready, so they look great devices with stunning high resolution displays
- Great variaty, see the rich list above, there are icons for every needed possibility
- The size of the icons always fit to the size of the text
Demo
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{icon | fa-heart color} - display an icon in the main template color
Possible options: color or black (changes the color of the icon)
The Icon size is addicted to the font-size so the icon always have the perfect size. Of course, with the shortcode you can display also icons in module titles and many more.
Buttons
Out of the box classes for the buttons in this Theme include size, type (color) and style (square, slightly rounded, and completely rounded).
Messages
Have something important to say, use this out of the Box Messages or Panels to display some really important Informations.
Typography
This Templates delivers you with some sophisticated Typography Elements which are developed with a sharp eye to design.
Retina Icons
We have implemented Font Awesome v4.0 to have quite a big range of high quality and retina ready icons.
List Styles
We've created a number of list for you to enjoy or modify as you wish. You can also use the Font Awesome v3.0 to build your own personal list.
Responsive Gridsystem
With our awesome responsive Gridsystem you can easily create responsive Grids to style your Content in a nice Way.
Responsive Videos
Embeding iFrames and videos in a responsive way from your YouTube, Vimeo, or another site that uses iframe it's never been easier.
As you maybe have seen before on the icons, of course it's also possible to use them in list-styles. Like all elements in this template extrem easy to use without need of coding or complicated techniques.
- All list styles are retina ready, so they look great on devices with high resolution
- Really great variaty, see the rich list here, there are icons for every needed possibility
- Also it's possible to use different icons in one list, use crosses or checkboxes in one list
Demo
List with Class "list-dot"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-cross"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-ok"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-plus"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-star"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-arrow3"
- List item longer description
- List item
- List item
- Nested List Item
- Nested List Item
- Nested List Item
- List item
- List item
- List item
List with Class "list-arrow5"
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
List with Class "icon"
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
List with Class "icon"
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
- List item
How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{list | Type of the Icon (list-dot, list-dot-dark, list-cross, list-cross-dark, list-ok, list-ok-dark, list-plus, list-plus-dark, list-star- list-star-dark, list-arrow3, list-arrow3-dark, list-arrow5, list-arrow5-dark, icon or type3)}
{listing}Type in some text to display in this list{/listing}
{listing}Type in some text to display in this list{/listing}
{listing}Type in some text to display in this list{/listing}
{/list}
Example for List Styles
{list | list-arrow3}
{listing}Listing{/listing}
{listing}Listing{/listing}
{listing}Listing{/listing}
{/list}
Example for List Style icon or type3 (custom icons, many available)
{list | icon}
{listing}{icon | fa-check}Listing{/listing}
{listing}{icon | fa-check}}Listing{/listing}
{listing}{icon | fa-check}}Listing{/listing}
{/list}
Attention: Many many more list-styles are possible, see all available icons here.
