Elements

[callout size="" title="Callout Element. Important Messages Here" btn_label="Button" btn_link="#" ][/callout]
[divider style="space" height="6px" ]
[divider style="dotted" height="85px" ]

[callout size="" type="stunning" title="Stunning Text. Important Messages Here" caption="Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit" ][/callout]
[divider style="space" height="6px" ]
[divider style="dotted" height="85px" ]

Buttons

[divider style="space" height="15px" ]

[button link="#" round="yes" size="large" color="white" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="yellow" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="orange" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="green" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="red" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="blue" flat="no" ]LARGE[/button]
[button link="#" round="yes" size="large" color="black" flat="no" ]LARGE[/button]

[button link="#" round="yes" size="large" color="white" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="yellow" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="orange" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="green" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="red" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="blue" flat="yes" ]LARGE[/button]
[button link="#" round="yes" size="large" color="black" flat="yes" ]LARGE[/button]

[button link="#" round="yes" size="normal" color="white" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="grey" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="yellow" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="orange" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="green" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="red" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="blue" flat="no" ]normal[/button]
[button link="#" round="yes" size="normal" color="black" flat="no" ]normal[/button]

[button link="#" round="yes" size="normal" color="white" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="grey" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="yellow" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="orange" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="green" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="red" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="blue" flat="yes" ]normal[/button]
[button link="#" round="yes" size="normal" color="black" flat="yes" ]normal[/button]

[button link="#" round="yes" size="small" color="white" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="grey" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="yellow" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="orange" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="green" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="red" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="blue" flat="no" ]small[/button]
[button link="#" round="yes" size="small" color="black" flat="no" ]small[/button]

[button link="#" round="yes" size="small" color="white" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="grey" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="yellow" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="orange" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="green" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="red" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="blue" flat="yes" ]small[/button]
[button link="#" round="yes" size="small" color="black" flat="yes" ]small[/button]

[button link="#" round="yes" size="tiny" color="white" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="grey" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="yellow" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="orange" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="green" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="red" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="blue" flat="no" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="black" flat="no" ]tiny[/button]

[button link="#" round="yes" size="tiny" color="white" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="grey" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="yellow" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="orange" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="green" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="red" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="blue" flat="yes" ]tiny[/button]
[button link="#" round="yes" size="tiny" color="black" flat="yes" ]tiny[/button]

[divider style="space" height="10px" ]
[divider style="dotted" height="50px" ][divider style="space" height="10px" ]

Dropcaps

[column size="1/4" ][dropcap type="" round="yes" color="#3d3d3d" background_color="transparent" ]R[/dropcap]am amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam.[/column]

[column size="1/4" ][dropcap type="square" round="no" color="#f5f5f5" background_color="#78ACC2" ]A[/dropcap]met purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo.[/column]

[column size="1/4" ][dropcap type="square" round="yes" color="#f5f5f5" background_color="#78ACC2" ]A[/dropcap]met purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. [/column]

[column size="1/4" ][dropcap type="circle" round="yes" color="#f5f5f5" background_color="#78ACC2" ]P[/dropcap]urus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. [/column]

[divider style="dotted" height="50px" ]
[divider style="space" height="7px" ]

[column size="1/2" ]

Highlight

[divider style="space" height="10px" ]
Ram amet purus. Vivamus hendrerit,[highlight style="yellow" ] dolor at aliquet laoreet[/highlight], mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam.
Donec sed odio dui. [highlight style="green" ]Nulla vitae elit libero[/highlight], a pharetra augue.
Nullam id dolor id nibh ultricies vehicula ut id elit. [highlight style="pink" ]Integer posuere erat[/highlight] a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus,[highlight style="blue" ] nisi erat porttitor ligula[/highlight], eget lacinia odio sem nec elit.
[/column]

[column size="1/2" ]

Code

[divider style="space" height="10px" ]

[code]public class FooBar implements IFooBarzable {
    static private var cnt:uint = 0;

    public function FooBar(id:uint):void {
        cnt = id;
    }
}[/code]

[/column]

[divider style="dotted" height="1px" ][divider style="space" height="35px" ]

List Styles

[column size="1/4" ]

  • Arrow1, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Arrow2, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Arrow3, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Arrow4, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]

[column size="1/4" ]

  • Star, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Cross, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Plus, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Pen, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]

[column size="1/4" ]

  • Check, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Bookmark, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  • Download, Seque habitant morbi
  • Aliquam mauris nibh, posuere
  • Morbi placerat, sem sed rut

[/column]
[column size="1/4" ]

  1. Decimal, Seque habitant morbi
  2. Aliquam mauris nibh, posuere
  3. Morbi placerat, sem sed rut

[/column]

[divider style="dotted" height="60px" ][divider style="space" height="10px" ]

Table

[divider style="space" height="10px" ]

head1 head2 head3
content1 content2 content3
footer footer footer

[divider style="dotted" height="100px" ]

Message Boxes

[divider style="space" height="5px" ]
[msgbox type="success" show_icon="yes" ]Success – magna aliquam volutpat.[/msgbox]
[msgbox type="warn" show_icon="yes" ]Warn – magna aliquam erat volutpat.[/msgbox]
[msgbox type="error" show_icon="yes" ]Error – magna aliquam erat volutpat.[/msgbox]
[msgbox type="info" show_icon="yes" ]Info – magna aliquam erat volutpat.[/msgbox]
[msgbox type="notice" show_icon="yes" ]Notice – magna aliquam erat volutpat.[/msgbox]
[msgbox show_icon="no" ]Regular – magna aliquam volutpat enim[/msgbox]

Accordion

[divider style="space" height="11px" ]
[accordion type="accordion" size=""]
[acc_element title="commozzril delenit augueea"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[acc_element title="luptatum nulla facilisi"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[acc_element title="laoreet dolore magnaaliquam"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[acc_element title="dolorecommo duis dolore tegud"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[acc_element title="delenit augueea commozzril"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[acc_element title="dolorecommo duis dolore tegud"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril[/acc_element]
[/accordion]

Tab

[divider style="space" height="11px" ]
[tabs type="accordion" size=""]
[tab_element title="Laoreet"]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril delenit augueea commo duis dolorecommo duis dolorecommozzril delenit augueea commo duis dolorecommo duis dolore te feugait nulla duis dolore te feugait nulla facilisi luptatum zzril facilisi.
Etiam eget mi enim, non ultricies nisi voluptatem, illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem non ultricies dicta sunt etiam eget mi enim.[/tab_element]
[tab_element title="Facilisi"]Asunt in anim uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
Sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum. Allamco laboris nisi ut aliquip ex ea commodo consequat. Aser velit esse cillum dolore eu fugiat nulla pariatur.[/tab_element]
[tab_element title="Dolore"]Etiam eget mi enim, non ultricies nisi voluptatem, illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo nemo enim ipsam voluptatem non ultricies dicta sunt etiam eget mi enim, non ultricies nisi voluptatem.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ligula. Vestibulum id porta felis euismod.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.[/tab_element]
[/tabs]

[divider style="dotted" height="60px" ]
[divider style="space" height="15px" ]

Blockquote

[divider style="space" height="11px" ]
[blockquote indent="yes" ]Nincidunt ut laoreet dolore magnaaliquam erat luptatum nulla facilisi luptatum zzril delenit augueea commozzril delenit augueea commo duis dolorecommo duis dolorecommozzril delenit augueea commo duis dolorecommo duis dolore te feugait nulla duis dolore te feugait nulla facilisi luptatum zzril facilisi.[/blockquote]

[divider style="dotted" height="90px" ]

Audio Player

[divider style="space" height="10px" ]

[divider style="dotted" height="90px" ]

Self Hosted Video Player

[divider style="space" height="10px" ]

[divider style="space" height="40px" ]