The Animated Block particle has been preset with a hover loading animation, to reveal more text. The particle supports a large header, tag, a short description and read more.
The particle also features collection lists, with support for 1-5 columns. Each block has support for image, text and a link.
Testimonials is a simple content particle designed for showing testimonials or quotes. It has two styles, with facilities for a quote/description and author image/name/company/link.
The particle also features collection lists, with support for 1-5 columns. Each block has support for image, text and a link.The Grid Promo Gallery particle is designed for displaying image grids, with text overlays, inclusive of tag, title and description.
The particle also features collection lists, with support for 1-6 columns. Each block has support for image, text and a link.Title
The Grid Content particle allows for the display of individual content blocks, with focus on an icon and complementary small text snippets. These are preceded by a general title, description and read more button area.
The particle also features collection lists, with support for 1-6 columns. Each block has support for icon, text and a link.The Grid Statistics particle is powered by an odometer script to auto roll through the numbers. The particle supports 6 columns, and text for each number variable.
Headline
Subtitle
The Content List is a versatile content particle that has separate sections for its text and image content, as well as the lists. The particle requires an image, with options for a tag overlay, and various adjacent text/button options.
The particle also features collection lists, with support for 1-5 columns. Each list item has its own unique icon, link and text settings.The Image Grid particle is a simple solution for displaying a small grid of images. Choose up to 5 columns, and an unlimited amount of rows. All images are clickable and a RokBox modal will show the full sized image.
The particle also supports collection lists for creating new image entries. Each image has settings for caption that appear in the RokBox modal and the path of the file.Title
Title
Info List is a simple particle for creating stacked list items with linkable titles and descriptions underneath. All items are separated by a border, and can be created via the collection list interface for quick and easy setup.
The Promo Image particle offers a simple interface for adding a featured image, with overlay support for a title, a description and icons. Icons can be added via the collection list interface for quick and easy setup, each with individual link settings.
Title
Title
The Contact particle provides an efficient mechanism of providing a contact list. Items are created via the collection list interface allowing you to configure each entry with individual icons and values.
Buttons: 1-4
Default Button Button 2 Button 3 Button 4
<a href="#" class="button">Default Button</a> <a href="#" class="button button-2">Button 2</a> <a href="#" class="button button-3">Button 3</a> <a href="#" class="button button-4">Button 4</a>
Buttons: Color
Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-grey">Button Grey</a> <a href="#" class="button button-pink">Button Pink</a> <a href="#" class="button button-red">Button Red</a> <a href="#" class="button button-purple">Button Purple</a> <a href="#" class="button button-orange">Button Orange</a> <a href="#" class="button button-blue">Button Blue</a>
Buttons: Color Compounded with Buttons 2-4
Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-2 button-grey">Button Grey</a> <a href="#" class="button button-3 button-pink">Button Pink</a> <a href="#" class="button button-4 button-red">Button Red</a> <a href="#" class="button button-2 button-purple">Button Purple</a> <a href="#" class="button button-3 button-orange">Button Orange</a> <a href="#" class="button button-4 button-blue">Button Blue</a>
Buttons: Square
Default Button Button 3 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-square">Default Button</a> <a href="#" class="button button-square button-3">Button 3</a> <a href="#" class="button button-square button-2 button-grey">Button Grey</a> <a href="#" class="button button-square button-3 button-pink">Button Pink</a>
Buttons: Icons
Default Button Button 2 Button 3 Button 4 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a> <a href="#" class="button button-2"><i class="fa fa-fw fa-cloud"></i> Button 2</a> <a href="#" class="button button-3"><i class="fa fa-fw fa-star"></i> Button 3</a> <a href="#" class="button button-4"><i class="fa fa-fw fa-car"></i> Button 4</a> <a href="#" class="button button-grey"><i class="fa fa-fw fa-tag"></i> Button Grey</a> <a href="#" class="button button-pink"><i class="fa fa-fw fa-university"></i> Button Pink</a> <a href="#" class="button button-red"><i class="fa fa-fw fa-edit"></i> Button Red</a> <a href="#" class="button button-purple"><i class="fa fa-fw fa-lock"></i> Button Purple</a> <a href="#" class="button button-orange"><i class="fa fa-fw fa-clock-o"></i> Button Orange</a> <a href="#" class="button button-blue"><i class="fa fa-fw fa-arrows"></i> Button Blue</a>
Buttons: Icons Only
<a href="#" class="button"><i class="fa fa-fw fa-download"></i></a> <a href="#" class="button button-2"><i class="fa fa-fw fa-cloud"></i></a> <a href="#" class="button button-3"><i class="fa fa-fw fa-star"></i></a> <a href="#" class="button button-4"><i class="fa fa-fw fa-car"></i></a> <a href="#" class="button button-grey"><i class="fa fa-fw fa-tag"></i></a> <a href="#" class="button button-pink"><i class="fa fa-fw fa-university"></i></a> <a href="#" class="button button-red"><i class="fa fa-fw fa-edit"></i></a> <a href="#" class="button button-purple"><i class="fa fa-fw fa-lock"></i></a> <a href="#" class="button button-orange"><i class="fa fa-fw fa-clock-o"></i></a> <a href="#" class="button button-blue"><i class="fa fa-fw fa-arrows"></i></a>
Buttons: Sizes
Button XLarge Button Large Button Medium Button Small Button XSmall
<a href="#" class="button button-xlarge button-grey">Button XLarge</a> <a href="#" class="button button-large button-pink">Button Large</a> <a href="#" class="button button-medium button-red">Button Medium</a> <a href="#" class="button button-small button-purple">Button Small</a> <a href="#" class="button button-xsmall button-orange">Button XSmall</a>
Buttons: Block
Default Button Button 2 Button 3 Button 4 Button Grey
<a href="#" class="button button-block">Default Button</a> <a href="#" class="button button-block button-2">Button 2</a> <a href="#" class="button button-block button-3">Button 3</a> <a href="#" class="button button-block button-4">Button 4</a> <a href="#" class="button button-block button-grey">Button Grey</a>