Forum
Table of contents
Accordion
[accordion]
[toggle title="First toggle"]Quisque porttitor, dui sit amet sagittis luctus, erat nisl sagittis quam, in aliquam diam ante vel leo. Donec fringilla iaculis justo, nec auctor lacus lacinia sit amet. Vivamus eu felis ante. Mauris vel erat lacus. Nam hendrerit tempus hendrerit.[/toggle]
[toggle title="Second toggle"]Aliquam sed lacus diam, pharetra pulvinar odio. Proin ac tincidunt nulla. Cras accumsan massa sed metus dignissim non egestas lorem egestas. Morbi eget dui sit amet nisi iaculis hendrerit non ut nisi.[/toggle]
[toggle title="Third toggle"]Massa dignissim nec gravida nisi blandit. Morbi et eros risus. Duis lacus enim, elementum id bibendum elementum, convallis sed erat. Sed vitae elementum lectus. Phasellus auctor tellus non erat condimentum eu placerat nunc eleifend.[/toggle]
[/accordion]
[[accordion] [toggle title="First toggle"]Quisque porttitor, dui sit amet sagittis...[/toggle] [toggle title="Second toggle"]Aliquam sed lacus diam, pharetra...[/toggle] [toggle title="Third toggle"]Massa dignissim nec gravida nisi...[/toggle] [/accordion]]
Parameters:
- title
- Title of a toggle item. Does not apply to an accordion tag.
Buttons
[button color=white href="#"]White[/button] [button color=grey href="#"]Grey[/button] [button color=pink href="#"]Pink[/button] [button color=orange href="#"]Orange[/button] [button color=green href="#"]Green[/button] [button color=blue href="#"]Blue[/button] [button color=darkblue href="#"]Dark Blue[/button] [button color=purple href="#"]Purple[/button] [button color=teal href="#"]Teal[/button] [button color=black href="#"]Black[/button]
[[button color=white href="#"]White[/button]] [[button color=grey href="#"]Grey[/button]] [[button color=pink href="#"]Pink[/button]] [[button color=orange href="#"]Orange[/button]] [[button color=green href="#"]Green[/button]] [[button color=blue href="#"]Blue[/button]] [[button color=darkblue href="#"]Dark Blue[/button]] [[button color=purple href="#"]Purple[/button]] [[button color=teal href="#"]Teal[/button]] [[button color=black href="#"]Black[/button]]
Parameters:
- href
- The destination of a link. For example, http://envato.com.
- color (optional)
- Color of the button. Possible values: white, grey, pink, orange, green, blue, darkblue, purple, teal, black.
- target (optional)
- The target of a link (where to open it). Possible values: _blank (new window), _self (current window), _parent (parent frameset), _top (full body of the window), framename (a named frame)
Dropcap
[dropcap]A[/dropcap]enean accumsan consectetur justo sit amet congue. Fusce luctus metus sed tellus lobortis laoreet. Mauris sed felis nibh. Maecenas varius posuere risus, at ultricies dolor sodales non. Nullam a urna quis dui ornare tristique. Ut id ante non quam malesuada sollicitudin. Sed sollicitudin eros eu augue mollis eget gravida metus sodales. Nulla et nunc sed lacus posuere placerat.
[[dropcap]A[/dropcap]]enean accumsan consectetur justo sit amet congue...
Google Maps
[googlemaps width=642 height=360]Helsinki, Finland[/googlemaps]
[[googlemaps width=642 height=360]Helsinki, Finland[/googlemaps]]
Parameters:
- height (optional)
- Height of the map.
- width (optional)
- Width of the map.
[icon type=applications]Icons
Use icons to spice up your headlines and content!
[[icon type=applications]]Icons
Parameters:
- type
- Icon to use. Please see the table below for all possible icon types.
[icon type="64" /]64 | [icon type="address" /]address | [icon type="advanced" /]advanced | [icon type="applications" /]applications |
[icon type="archive" /]archive | [icon type="back" /]back | [icon type="bookmark" /]bookmark | [icon type="calculator" /]calculator |
[icon type="cash" /]cash | [icon type="chat" /]chat | [icon type="cloudy" /]cloudy | [icon type="color" /]color |
[icon type="compose" /]compose | [icon type="computer" /]computer | [icon type="computer2" /]computer2 | [icon type="computer3" /]computer3 |
[icon type="copy" /]copy | [icon type="creditcard" /]creditcard | [icon type="deletearchive" /]deletearchive | [icon type="desktop" /]desktop |
[icon type="desktop2" /]desktop2 | [icon type="down" /]down | [icon type="edit" /]edit | [icon type="exclamation" /]exclamation |
[icon type="exit" /]exit | [icon type="folder" /]folder | [icon type="folder2" /]folder2 | [icon type="forward" /]forward |
[icon type="forward2" /]forward2 | [icon type="forwardfolder" /]forwardfolder | [icon type="forwardmail" /]forwardmail | [icon type="globe" /]globe |
[icon type="globe2" /]globe2 | [icon type="happy" /]happy | [icon type="harddrive" /]harddrive | [icon type="heineken" /]heineken |
[icon type="help" /]help | [icon type="info" /]info | [icon type="install" /]install | [icon type="intel" /]intel |
[icon type="intel2" /]intel2 | [icon type="keyboard" /]keyboard | [icon type="lock" /]lock | [icon type="minus" /]minus |
[icon type="minus2" /]minus2 | [icon type="monitor" /]monitor | [icon type="moon" /]moon | [icon type="moon2" /]moon2 |
[icon type="movies" /]movies | [icon type="movies2" /]movies2 | [icon type="music" /]music | [icon type="music2" /]music2 |
[icon type="newarchive" /]newarchive | [icon type="newdoc" /]newdoc | [icon type="next" /]next | [icon type="notebook" /]notebook |
[icon type="open" /]open | [icon type="pause" /]pause | [icon type="phone" /]phone | [icon type="picture" /]picture |
[icon type="picturecast" /]picturecast | [icon type="play" /]play | [icon type="plus" /]plus | [icon type="podcast" /]podcast |
[icon type="preferences" /]preferences | [icon type="public" /]public | [icon type="radioactive" /]radioactive | [icon type="record" /]record |
[icon type="refresh" /]refresh | [icon type="remove" /]remove | [icon type="rewind" /]rewind | [icon type="rewind2" /]rewind2 |
[icon type="rss" /]rss | [icon type="rss2" /]rss2 | [icon type="sad" /]sad | [icon type="search" /]search |
[icon type="send" /]send | [icon type="server" /]server | [icon type="splash" /]splash | [icon type="star" /]star |
[icon type="stop" /]stop | [icon type="stop2" /]stop2 | [icon type="stop3" /]stop3 | [icon type="sun" /]sun |
[icon type="terminal" /]terminal | [icon type="trahsfull" /]trahsfull | [icon type="trash" /]trash | [icon type="unarchive" /]unarchive |
[icon type="unread" /]unread | [icon type="up" /]up | [icon type="user" /]user | [icon type="users" /]users |
[icon type="window" /]window | [icon type="yinyang" /]yinyang | [icon type="zoomin" /]zoomin | [icon type="zoomout" /]zoomout |
table#icons-table {
font-size:14px;
line-height:32px;
}
table#icons-table span {
display:inline-block;
margin:0 6px;
}
table#icons-table td {
padding:2px 0;
}
Quotes
Maecenas et euismod purus. Nullam suscipit purus ac.
Massa dignissim nec gravida nisi blandit. Morbi et eros risus. Duis lacus enim, elementum id bibendum elementum, convallis sed erat. Sed vitae elementum lectus. Phasellus auctor tellus non erat condimentum eu placerat nunc eleifend. Nam elit velit, elementum vel suscipit non, hendrerit non felis.
Nullam vitae eros risus. Ut sagittis faucibus lacus et lacinia. Sed sit amet nisl ipsum, eu sodales leo. Donec metus justo, aliquet ac blandit non, interdum et purus. Nullam posuere nisi a magna congue nec consectetur lectus semper. Sed rhoncus eros vitae purus auctor eget tristique ante hendrerit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam sed lacus diam, pharetra pulvinar odio. Proin ac tincidunt nulla. Cras accumsan massa sed metus dignissim non egestas lorem egestas. Morbi eget dui sit amet nisi iaculis hendrerit non ut nisi. Vivamus ornare imperdiet neque, at mattis lorem pellentesque eget. Nulla eu massa orci. Donec et lacus lacus. Praesent euismod, velit non porta tincidunt, justo turpis sagittis nisi, ac ornare sem sapien nec ipsum. Sed leo lorem, pharetra eget imperdiet nec, suscipit id libero. In placerat felis id eros suscipit adipiscing. Quisque porttitor, dui sit amet sagittis luctus, erat nisl sagittis quam, in aliquam diam ante vel leo. Donec fringilla iaculis justo, nec auctor lacus lacinia sit amet. Vivamus eu felis ante. Mauris vel erat lacus. Nam hendrerit tempus hendrerit.
[Maecenas et euismod purus. Nullam suscipit purus ac.] [Nullam vitae eros risus. Ut sagittis faucibus lacus et lacinia...] [Lorem ipsum dolor sit amet, consectetur adipiscing elit.]
Parameters:
- align (optional)
- How to align the quote. Possible values: left, right. If align is set, pull quote will be used and otherwise blockquote.
Tabs
[tabgroup]
[tab title="Tab 1"]Quisque porttitor, dui sit amet sagittis luctus, erat nisl sagittis quam, in aliquam diam ante vel leo. Donec fringilla iaculis justo, nec auctor lacus lacinia sit amet. Vivamus eu felis ante. Mauris vel erat lacus. Nam hendrerit tempus hendrerit.[/tab]
[tab title="Tab 2"]In placerat felis id eros suscipit adipiscing. Quisque porttitor, dui sit amet sagittis luctus, erat nisl sagittis quam, in aliquam diam ante vel leo. Donec fringilla iaculis justo, nec auctor lacus lacinia sit amet. Vivamus eu felis ante.[/tab]
[tab title="Tab 3"]Massa dignissim nec gravida nisi blandit. Morbi et eros risus. Duis lacus enim, elementum id bibendum elementum, convallis sed erat. Sed vitae elementum lectus. Phasellus auctor tellus non erat condimentum eu placerat nunc eleifend.[/tab]
[/tabgroup]
[[tabgroup] [tab title="Tab 1"]Quisque porttitor, dui sit amet sagittis...[/tab] [tab title="Tab 2"]In placerat felis id eros suscipit...[/tab] [tab title="Tab 3"]Massa dignissim nec gravida nisi...[/tab] [/tabgroup]]
Parameters:
- title
- Title of a tab. Does not apply to a tabgroup tag.
Tooltip
Maecenas et euismod purus. [tooltip tip="This is the tip."]Nullam[/tooltip] suscipit purus ac massa dignissim nec gravida nisi blandit. [tooltip tip="And second one."]Morbi[/tooltip] et eros risus. Duis lacus enim, elementum id bibendum elementum, convallis sed erat.
Maecenas et euismod purus. [[tooltip tip="This is the tip."]Nullam[/tooltip]] suscipit purus ac massa dignissim nec gravida nisi blandit.
Parameters:
- tip
- Text that will appear when a tooltip is hovered.
Vimeo
[vimeo width=642 height=360] http://vimeo.com/11673745 [/vimeo]
[[vimeo width=642 height=360] http://vimeo.com/11673745 [/vimeo]]
Parameters:
- height (optional)
- Height of the video.
- width (optional)
- Width of the video.
Slideshare
[slideshare width=642 height=534] http://www.slideshare.net/HubSpot/20-dos-donts-for-clickable-callstoaction [/slideshare]
[[slideshare width=642 height=534] http://www.slideshare.net/HubSpot/20-dos-donts-for-clickable-callstoaction [/slideshare]]
Parameters:
- height (optional)
- Height of the slideshow.
- width (optional)
- Width of the slideshow.
Slideshow
[[slideshow] http://cdn.aye.fi/slideshow1.jpg http://cdn.aye.fi/slideshow2.jpg http://cdn.aye.fi/slideshow3.jpg [/slideshow]]
Parameters:
- timeout (optional)
- How long to show one slide. 0 disables automatic playing.
- fx (optional)
- What transition to use in slideshow. Possible values: fade, scroll.
Youtube
http://www.youtube.com/watch?v=ifboyvjXPPg
[ http://www.youtube.com/watch?v=ifboyvjXPPg ]
Parameters:
- hd (optional)
- Whether to embed HD quality video. Possible values: 720, 1080.
- height (optional)
- Height of the video.
- width (optional)
- Width of the video.
- widescreen (optional)
- Whether the video is widescreen. Possible values: 1, 0.