Almost all shortcodes are flexible, you can add css class or style attributes to further customize the design. In fact, you can add any attribute you want and it will be added in the rendered shortcode. For example:

[button class='my-button' style='background: #abc']

Titlebox


MaS Premium WordPress Theme

Get it now

Mas Premium WordPress Theme

Experience the responsiveness and awesome features, only from ThemeForest.
Get it now
[titlebox title='MaS Premium WordPress Theme']
[titlebox button="Get it now" link="#" title="Mas Premium WordPress Theme" icon="download-alt" subtitle="Experience the responsiveness and awesome features, only from ThemeForest."]

Buttons


Button Button with Icon I'm a button
[button href='#' label='Button']
[button href='#' label='Button with Icon' icon='download' size='large']
[button href='#' newwindow='true' size='small' bg='LightSlateGrey' color='#fff']

Code


<!DOCTYPE html>
<html lang="en-US">
</html>
<body>
</body>
[code]...[/code]

Contact Form


Send message Reset
[contactform]

Spacer


A spacer is a 10-pixel high gap which you can use for layouting
[spacer]

Infoboxes


This is a normal infobox
This is a notice infobox
This is an error infobox
This is a success infobox
[infobox]This is a normal infobox[/infobox]
[infobox type='notice']This is a notice infobox[/infobox]
[infobox type='error']This is an error infobox[/infobox]
[infobox type='success']This is a success infobox[/infobox]

Dropcaps


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at.

[dropcaps]L[/dropcaps]orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at.
[dropcaps colored='true']L[/dropcaps]orem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at.

Bullet Lists


You can use any icon as a bullet
  • Bullet item
  • Bullet item
  • Bullet item
  • Bullet item
[list]
[li]Bullet item[/li]
[li type='remove']Bullet item[/li]
[li type='ok']Bullet item[/li]
[li type='star']Bullet item[/li]
[/list]

QR Code


[qr data='http://gambit.ph' width='150' height='150']

Share Buttons


[sharebuttons]

Toggle


Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat.

Toggle Colored

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat.
[toggle title='Toggle']Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat.[/toggle]
[toggle title='Toggle Colored' colored='true' startopen='true']Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat.[/toggle]

Highlight & Tooltip


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget faucibus dui. Praesent vulputate sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat. Morbi lacinia lectus eget justo scelerisque in lobortis ligula ultrices. Nullam ut diam vel sem euismod aliquam sit amet a nunc.

Lorem ipsum dolor sit amet, [tooltip text='A tooltip!'][highlight]consectetur[/highlight][/tooltip] adipiscing elit. Donec eget faucibus dui. [tooltip text='Another tooltip!'][highlight colored='true']Praesent vulputate[/highlight][/tooltip] sodales augue, in interdum augue placerat at. Duis et varius mi. Aliquam erat volutpat. Morbi lacinia lectus eget justo scelerisque in lobortis ligula ultrices. [tooltip text='One more tooltip!'][highlight]Nullam ut diam[/highlight][/tooltip] vel sem euismod aliquam sit amet a nunc.