Style Elements

Style Elements

Content Slider

[slider effect="slide" easing="easeInOutExpo"]

[slide]

[slide_text]

Slide Heading 1

Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.

[/slide_text]

[/slide]

[slide]

[slide_text]

Slide Heading 2

Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.

[/slide_text]

[/slide]

[slide]

[slide_text]

Slide Heading 3

Optional slide content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum.

[/slide_text]

[/slide]

[slide_video src="39683393"]

[/slider]

[row]

Accordion

[accordion]

[acc_item title="Accordion item1"]

Accordion1 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla.

[/acc_item]

[acc_item title="Accordion item2"]

Accordion2 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla.

[/acc_item]

[acc_item title="Accordion item3"]

Accordion3 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of accordion. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla.

[/acc_item]

[/accordion]

[/row]

[row]

Tabs

[tabs]

[tab title="Tab1"]

Tab1 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla.

[/tab]

[tab title="Tab2"]

Tab2 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla. Nunc vestibulum ipsum nec libero sodales dignissim.

[/tab]

[tab title="Tab3"]

Tab3 content here. You can edit this part and insert any HTML or plain text. You can also edit the titles of tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla.

[/tab]

[/tabs]

[/row]

[row]

Content Boxes

[box style="0" close_btn="true"]

Normal box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/box]

[box style="1" close_btn="true"]

Information box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/box]

[box style="2" close_btn="true"]

Success box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/box]

[box style="3" close_btn="true"]

Error box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/box]

[box style="4" close_btn="true"]

Notification box. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/box]

[/row]

[row]

Icon Lists

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third last"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third last"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third last"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[col type="one-third last"]

  • List item one
  • List item two
  • List item three
  • List item four

[/col]

[/row]

[row]

Buttons

[btn link="http://yoursite.com" target=""]Default[/btn] [btn link="http://yoursite.com" color="aqua" target=""]Aqua[/btn] [btn link="http://yoursite.com" color="red" target=""]Red[/btn] [btn link="http://yoursite.com" color="grey" target=""]Grey[/btn] [btn link="http://yoursite.com" color="pink" target=""]Pink[/btn] [btn link="http://yoursite.com" color="brown" target=""]Brown[/btn] [btn link="http://yoursite.com" color="skyBlue" target=""]Sky Blue[/btn] [btn link="http://yoursite.com" color="royalBlue" target=""]Royal Blue[/btn]

[btn link="http://yoursite.com" color="orange" target=""]Orange[/btn] [btn link="http://yoursite.com" color="forestGreen" target=""]Forest Green[/btn] [btn link="http://yoursite.com" color="yellowGreen" target=""]Yellow Green[/btn] [btn link="http://yoursite.com" color="skyBlue" size="size-m" target=""]Medium[/btn] [btn link="http://yoursite.com" color="orange" size="size-l" target=""]Large[/btn]

[/row]

[row]

Progress Indicators

[indicator label="Illustrator" bg="#ff9900" value="90"]

[indicator label="Photoshop" bg="#336699" value="85.67"]

[indicator label="HTML/CSS" bg="#99cc00" value="76"]

[indicator label="jQuery/php" bg="#333537" value="60"]

[indicator label="Photography" bg="#cc0000" value="55"]

[indicator label="3D and Motion Graphics" bg="#0099ff" value="13.33"]

[/row]

[row]

Horizontal Rules

1. Single Line
[hr style="single"]

2. Double Line
[hr style="double"]

3. 3D Line
[hr style="3d"]

4. Thick bar
[hr style="bar"]

5. Dashed line
[hr style="dashed"]

[/row]

[row]

Inline image list

[/row]

[row]

Toggle

[toggle title="Click to toggle"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ante, consectetur sit amet vulputate vel, dapibus sit amet lectus. Etiam varius dui eget lorem elementum eget mattis sapien interdum. In hac habitasse platea dictumst. Morbi sed nisi est, vitae convallis nulla. Nunc vestibulum ipsum nec libero sodales dignissim. Nulla ac libero neque, sit amet convallis leo. Aenean sodales, augue venenatis posuere fermentum, tellus velit vestibulum libero, ut elementum ipsum erat sed tellus.

[/toggle]

[/row]