Typography

A selection of custom Particles available with Ethereal
Learn More
Image Tag

Headline

Subtitle
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.
Read More Text
List item with individual icon controls
List item with individual icon controls
List item with individual icon controls
List item with individual icon controls
List item with individual icon controls
List item with individual icon controls

Particle

Content List

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.
Learn More

Particle

Image Grid

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.
Learn More

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.
Caption 1
Caption 2
Caption 3
Caption 4

Title

List Item 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
List Item 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Particle

Info List

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.

Learn More

Particle

Promo Image

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.

Learn More

Title

Title
Promo Image Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.

Title

Contact Item 1
+1(555)-555-555
Contact Item 2
555 RocketTheme Blvd, CO
Contact Item 3
This email address is being protected from spambots. You need JavaScript enabled to view it.
Contact Item 4
Live Chat with Us

Particle

Contact

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.

Learn More

Particle

Blog Content

The Blog Content particle is available for creating blog items with a headline, tag, description, or icons. All blog items can be separated by a border to differentiate between them.

Learn More

Blog Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blog Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Title

Menu Editor
Visual Interface
Drag & Drop
Layout Manager
MegaMenu
Dropdowns
FontAwesome
Icon Library

Particle

Icon Headline

The Icon Headline particle allows you to display block text with various headlines and subheadings along with an Font Awesome icon. A Read More option is also available to display below the entire particle.

Learn More

Particle

Image Block

The Image Block particle is a great option for displaying your favorite images in set columns and rows. The Grid Column dropdown within the Image Block settings allows for up to 5 columns of images.

Learn More

Title

image Image Lorem Ipsum
image Block Lorem Ipsum
image Image Lorem ipsum

Title

1
Particles, a quick and easy way to create complex content
Content
The Layout Manager supports particles, positions and atoms.

Particle

Number Headline

The Number Headline particle displays headlines and descriptions in a personal numbered list. The particle also provides options for tags, accent styles, and icons.

Learn More

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>

Headings

All HTML headings, <h1> through <h6> are available.

h1. Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h2. Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h3. Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h4. Heading 4

h5. Heading 5
h6. Heading 6

Emphasis

<em>

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

<strong>

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

<small>

For de-emphasizing inline or blocks of text, use the small tag.

This line of text is meant to be treated as fine print.

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">...</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">...</p>

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small>
</blockquote>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline. 
For example, <code><section></code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

 

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here...</p>
<pre>
&lt;p&gt;Sample text here...&lt;/p&gt;
</pre>

Tables

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
…
</table>