A selection of custom Particles available with Requiem

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.
image
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Read More
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu.
Author Name
Author Name Company

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.
Grid Promo Gallery

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.
Tag Title - Lorem ipsum dolor sit Description

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Grid Content

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.
Grid Statistics

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.

Miles travelled
Photos taken
Image Tag

Headline

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

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

Title

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

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.

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.

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
hello@no-reply.com
Contact Item 4
Live Chat with Us
Contact Details

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>

Troi GmbH

CTO > Product Manager | Nov 2012 - ...

/Keeping Deadlines
Keeping Deadlines
Transition from stagnant project to Private Beta release in less than a year. Realistic prospect for product release date.
/Velocity Increase
Velocity Increase
Increase in SCRUM velocity from an average of 3 User Stories per Sprint to 9 User Stories per Sprint, while maintaining personnel numbers.
Position change to Product Manager (and Product Owner)
Take-over of role of product owner after one year in the company for the next major release of the software with an undisclosed seven-figure budget.
/International Customers
International Customers
Essential assistance for sales-department in sealing the contract with one of the top-five advertising agencies in the world, for the first time opening the doors for Troi GmbH to the international market.
/Process Automation
Process Automation
Implementation of automatized systems in order to increase personnel performance, customer satisfaction, greatly reduce work-load and instate strict processes, raising productivity by 400% while maintaining personnel numbers.
/HR-Stability
HR-Stability
Stability in human resource numbers with average customer growth of 30%/month while simultaneously raising customer satisfaction from 4.0 to 1.2 (scale from 6.0 to 1.0), which is the highest the product Troi ever had.
/SCRUM
SCRUM
Involvement in first implementation of agile software development using SCRUM.
/Wiki
Wiki
First implementation of documentation (WiKi) procedures in the technical division.
As Technical Manager

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>