Quote block

The structure used:

[ jvquote type="quote-green" title="Someone famous in" subtitle="Source Title"]Cotents[/jvquote]

Options:

• [type]: quote-green, quote-red, quote-yellow, quote-icon, quote-unstyled or empty
• [title]: Your title
• [subtitle]: Your subtitle

List style

The structure used:

[ jvlist type="arrow" icon="fa fa-star"]List item|List item|List item[/jvlist]

Options:

• [type]: arrow, check, square, round or empty
• [icon]: Template classes that support. Example: fa fa-star, gala-star , icon-star

Alert

The structure used:

[ jvalert type="success " close="yes" icon="yes" title="Your title"]Content[/jvalert]

Options:

• [type]: success, info, warning, danger
• [icon]: yes or no (default)
• [close]: yes or no (default)
• [title]: Your title

Accordion

The structure used:

[ jvaccordions type="accordions" style="icon" theme="info"]
	[jvaccordion title="Title 1" icon="fa fa-user" active="yes"]content[/jvaccordion]
	[jvaccordion title="Title 2" icon="fa fa-user" ]content[/jvaccordion]
[/jvaccordions]

Options:

• [type]: toggle, accordions or empty (default)
• [style]: icon, unstyled or empty (default)
• [theme]: theme, primary, info, success, danger, warnig or empty
• [title]: Your title of accordion item
• [icon]: Icon title of accordion item. Template classes that support. Example: fa fa-star, gala-star , icon-star

Accordion:

Toggle:

Columns

The structure used:

[ jvcolumns]
	[jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol]
	[jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol]
	[jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol]
	[jvcol title="Title" number="4" desktop="4" tablet="2" mobile="1" head="h3"]Content[/jvcol]
[/jvcolumns]

Options:

• [number]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 1200px
• [desktop]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 992px
• [tablet]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang lớn hơn 768px
• [mobile]: Từ 1 đến 12 (bootstrap). Trên màn hình chiều ngang bé hơn 768px
• [head]: heading h1, h2, h3, h4, h5, h6, p ...
• [title]: Your title

Testimonials

The structure used:

[jvtestimonials style="slide" number="4" desktop="4" tablet="2" mobile="1" title="Title" border="no"]
	[jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest]
	[jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest]
	[jvtest name="John Doe" subname="Photographer" avatar="avatar.jpg" link="http://joomlavi.com"]Content[/jvtest]
[/jvtestimonials]

Options:

• [style]: silde, full and classic or empty dedault
• [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px (only classic style)
• [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px (only classic style)
• [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px (only classic style)
• [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px (only classic style)
• [title]: Your title (only full style)
• [border]: Show/hidden border

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

“Aenean egestas semper arcu, in rhoncus ligula tincidunt non. Sed laoreet diam vel justo tempus pulvinar.”

John Doe

Photographer http://joomlavi.com

Tabs

The structure used:

[ jvtabs active="1"]
	[jvtab title="Tab 1" icon=""]Content tab 1[/jvtab]
	[jvtab title="Tab 2" icon=""]Content tab 2[/jvtab]
	[jvtab title="Tab 3" icon=""]Content tab 3[/jvtab]
[/jvtabs]

Options:

• [active]: Tab panel active
• [title]: Tab title
• [icon]: Template classes that support. Example: fa fa-star, gala-star , icon-star

Pricing table

The structure used:

[ jvpricing number="4" desktop="4" tablet="2" mobile="1" color="theme"]
	[jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="yes"]Feature 1|Feature 2|Feature 3[/jvplan]
	[jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan]
	[jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan]
	[jvplan title="Title" button_link="#" button_label="Sign up!" price="$15" per="month" feature="no"]Feature 1|Feature 2|Feature 3[/jvplan]
[/jvpricing]

Options:

• [color]: theme, primary, info, success, danger, warnig or empty
• [number]: Số cột trên màn hình chiều ngang lớn hơn 1200px
• [desktop]: Số cột trên màn hình chiều ngang lớn hơn 992px
• [tablet]: Số cột trên màn hình chiều ngang lớn hơn 768px
• [mobile]: Số cột trên màn hình chiều ngang bé hơn 768px
• [title]: Your title
• [button_link]: Your button link
• [button_label]: Your button label
• [price]: Your price
• [per]: Your per price. Example: day, month, year...
• [feature]: Select Plan feature.

Progressbar

The structure used:

[jvprogressbar theme="back"]
	[jvprogress title="Graphic Design" width="75"]
	[jvprogress title="Web Design" width="87"]
	[jvprogress title="Development" width="63"]
[/jvprogressbar]

Options:

• [theme]: theme, primary, info, success, danger, warnig, , black, white or empty
• [title]: Your title
• [width]: Bar width.

Piechart

The structure used:

[ jvpiechart title="Title" from="100" to="25" barcolor="#dddddd" trackcolor="#ffd442" linecap="10" linewidth="10" size="253" icon="gala-flash-stroke"]

Options:

• [title]: Your title
• [from]: Start point
• [to]: End point
• [barcolor]: The color of the curcular bar. You can pass either a css valid color string like rgb, rgba hex or string colors. But you can also pass a function that accepts the current percentage as a value to return a dynamically generated color.
• [trackcolor]: The color of the track for the bar, false to disable rendering.
• [linecap]: Defines how the ending of the bar line looks like. Possible values are: butt, round and square.
• [linewidth]: Width of the bar line in px.
• [size]: Size of the pie chart in px. It will always be a square.
• [icon]: Template classes that support. Example: fa fa-star, gala-star , icon-star

Counting

The structure used:

[ jvcounting title="Title" color="theme" number="56343" icon="gala-flash-stroke"]

Options:

• [title]: Your title
• [color]: theme, primary, info, success, danger, warnig, back, white or empty
• [number]: Your number
• [icon]: Template classes that support. Example: fa fa-star, gala-star , icon-star

Services

The structure used:

[ jvservices type="feature" title="Title" color="theme" icon="gala-flash-stroke"]Cotent[/jvservices]

Options:

• [title]: Your title
• [color]: theme, primary, info, success, danger, warnig or empty
• [icon]: Template classes that support. Example: fa fa-star, gala-star , icon-star