Reactor Documentation

Everything you want to know about using Reactor.

Shortcodes

Reactor comes packed with shortcodes. It even has a shortcode generator built into the WordPress Editor. Look for the [R] icon.


Alerts

[alert type="(success/secondary/alert)" shape="(radius/round)" close="(true/false)"][/alert]
This is a standard alert (div.alert-box).x
This is a success alert without closing X (div.alert-box.success).
This is an alert (div.alert-box.alert.round).x
This is a secondary alert (div.alert-box.secondary.radius).x

Buttons

[button url="" size="(tiny/small/medium/large)" type="(success/secondary/alert)" shape="(radius/round)" expand="(true/false)" disabled="(true/false)" target=""][/button]

Labels

[label type="(success/secondary/alert)" shape="(radius/round)"][/label]
span.label span.label.success span.label.alert.round span.label.secondary.radius

Panels

[panel callout="(true/false)" shape="(radius/round)"][/panel]
This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It’s a little ostentatious, but useful for important content. Oh and it has a border radius.


Pricing Tables

[price_table title="" price="" desc="" button="" url=""]
[pt_item][/pt_item]
[/price_table]
  • Standard
  • $99.99
  • An awesome description
  • 1 Database
  • 5GB Storage
  • 20 Users
  • Buy Now

Progress Bars

[progress_bar type="(success/secondary/alert)" shape="(radius/round)" columns="(the width in columns)" fill="(amount in percent)"][/progress_bar]

Grid

[column large="(columns for large screens)" small="(columns for small screens)" first_last="(first or last in row first/last)"][/column]
large-4 small-2
large-4 small-4 small-4
large-4 small-6
large-3
large-6
large-3
large-2
large-8 small-6
large-2
small-3
small-9
large-4
large-8
small-6 large-5
small-6 large-7
large-6
large-6

Tooltips

[tooltip position="(top/bottom/right/left)" width="(a number for width)" text="(text for the tooltip)"][/tooltip]

The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.


Reveal Modals

[reveal_modal button="(true/false)" text="(text for link)"][/reveal_modal]
Example Modal...

Sections

[section_group type="(tabs/accordion/veritcal-nav/horizontal-nav)"]
[section][/section]
[/section_group]
Tabs

Section 1

Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion

Section 1

Section 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 2

Section 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section 3

Section 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Vertical Nav
Horizontal Nav

Orbit Slider

[orbit_slider id="(id for surrounding div)" category="(a slide category)" orderby="(default is date)" slides="(number of slides default is all)"][/orbit_slider]